The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Using my navbar on another forum

View previous topic View next topic Go down

Using my navbar on another forum

Post by becomeelite on January 1st 2013, 12:46 am

So i had a graphic designer make my nav bar on my forum (www.InformationKeptQuiet.com) And i have a friend of mine that wants to use it on his forum. The thing is, since i had someone else make and install the nav bar, i dont know how to let my friend use it.

Is the code in the CSS? Or in a template? Take a look at the nav bar i have and then tell me what information i need to post here so that someone can show me how to take this nav bar and install it on my friends forum.

thanks so much!

becomeelite
Forumember

Posts : 53
Reputation : 1
Language : English

http://www.informationkeptquiet.com

Back to top Go down

Re: Using my navbar on another forum

Post by Sir Chivas™ on January 1st 2013, 1:03 am

Hello,

Before anything, what type of forum is your friend using? Such as host and version?

Now, if he is using Forumotion: he'll just have to do the following steps:

1. Open Admin Panel.
2. Click on the Display tab.
3. Under Pictures and Colors, click on Pics Management.
4. Advance mode, will be in the first tab.
(or can easily change them by editing them under "Homepage," >> Headers & Navigation).



Attention!
- Please provide your forum URL at all times.
- When the issue is solved, please mark it as solved.



Sir Chivas™
Support Moderator
Support Moderator

Male Posts : 6783
Reputation : 430
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||

Back to top Go down

Re: Using my navbar on another forum

Post by becomeelite on January 1st 2013, 1:14 am

Its exactly the same as mine...its a mirror site almost. Just different topic.

I copied my css and my header template over to his site but when i did it did correctly copy the nav bar, but everything was out of proportion and the site logo was way to high up and half buried.

Heres my CSS:

Code:
a.mainmenu[href="/groups"] {
display: none;
}
a.mainmenu[href="/calendar"] {
display: none;
}
.bodyline {
background-color: transparent;
border: none;
}
.navbartable {
background-color: #151115;
line-height: 42px;
position: relative;
top: -100px;
z-index: 20;
margin-bottom: -50px;
}
a.mainmenu {
    color: #fff;
    text-decoration: none;
}
.ribbon {
 font-size: 16px !important;
 /* This ribbon is based on a 16px font side and a 24px vertical rhythm. I've used em's to position each element for scalability. If you want to use a different font size you may have to play with the position of the ribbon elements */

 width: 50%;
 top: -120px;
 position: relative;
 background: #151b2a;
 color: #fff;
 text-align: center;
 padding: 1em 2em; /* Adjust to suit */
 margin: 2em auto 3em; /* Based on 24px vertical rhythm. 48px bottom margin - normally 24 but the ribbon 'graphics' take up 24px themselves so we double it. */
margin-bottom: -60px;
}
.ribbon:before, .ribbon:after {
 content: "";
 position: absolute;
 display: block;
 bottom: -1em;
 border: 1.5em solid #111622;
 z-index: -1;
}
.ribbon:before {
 left: -2em;
 border-right-width: 1.5em;
 border-left-color: transparent;
}
.ribbon:after {
 right: -2em;
 border-left-width: 1.5em;
 border-right-color: transparent;
}
.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
 content: "";
 position: absolute;
 display: block;
 border-style: solid;
 border-color: #7a7a7a transparent transparent transparent;
 bottom: -1em;
}
.ribbon .ribbon-content:before {
 left: 0;
 border-width: 1em 0 0 1em;
}
.ribbon .ribbon-content:after {
 right: 0;
 border-width: 1em 1em 0 0;
}
.non-semantic-protector { position: relative; z-index: 2; }
.container {
width: 100%;
height: auto;
margin-top: 40px;
}
.leftbox {
Width: 49%;
background-color: #dfe4e8;
border-style: solid;
border-width: 2px;
border-color: #056b9e;
padding: 5px;
float: left;
margin-bottom: 50px;
}
.widebox {
Width: 100%;
background-color: #dfe4e8;
border-style: solid;
border-width: 2px;
border-color: #056b9e; 
padding: 5px;
padding-bottom: 10px;
text-align: center;
margin-bottom: 50px;
}
.rightbox {
Width: 46.75%;
background-color: #dfe4e8;
border-style: solid;
border-width: 2px;
border-color: #056b9e;
margin-left: 52%;
padding: 5px;
padding-bottom: 10px;
text-align: center;
margin-bottom: 50px;
}
.rightbox a {
color: #000000 !important;
text-decoration: none !important;
font-family: arial;
}

.rightbox a:hover {
color: #000000 !important;
text-decoration: none !important;
font-family: arial;
}
.leftbox a {
color: #000000 !important;
text-decoration: none !important;
font-family: arial;
}

.leftbox a:hover {
color: #000000 !important;
text-decoration: none !important;
font-family: arial;
}
.boxheader {
  padding-top: 1em;
  font-weight: 600;
  color: #FFF;
  background-color: #056b9e;
  text-align: center;
  height: 35px;
  margin-bottom: 20px;
}
.video-title {
  padding-top: 1em;
  font-weight: 600;
  color: #000000;
  background-color: #d1d7dc;
  text-align: center;
  height: 35px;
}
.video-description {
  padding: 5px;
  color: #000000;
  background-color: #d1d7dc;
  text-align: left;
  height: auto;
  width: auto;
margin-bottom: 10px;
}

.video-container {
   position: relative;
   padding-bottom: 56.25%;
   padding-top: 30px;
   height: 0;
   overflow: hidden;
}

.video-container iframe, 
.video-container object, 
.video-container embed {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}
.button {
   -moz-box-shadow:inset 0px 1px 4px 0px #bbdaf7;
   -webkit-box-shadow:inset 0px 1px 4px 0px #bbdaf7;
   box-shadow:inset 0px 1px 4px 0px #bbdaf7;
   background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5) );
   background:-moz-linear-gradient( center top, #79bbff 5%, #378de5 100% );
   filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5');
   background-color:#79bbff;
   -moz-border-radius:6px;
   -webkit-border-radius:6px;
   border-radius:6px;
   border:1px solid #84bbf3;
   display:inline-block;
   color:#ffffff;
   font-family:arial;
   font-size:18px;
   font-weight:bold;
   padding:12px 20px;
   text-decoration:none !important;
   text-shadow:0px 2px 0px #528ecc;
}.button:hover {
   background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff) );
   background:-moz-linear-gradient( center top, #378de5 5%, #79bbff 100% );
   filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff');
   background-color:#378de5;
}.button:active {
   position:relative;
   top:1px;
}
.button a {
font-color: white;
font-family:arial;
font-size:18px;
font-weight:bold;
text-decoration: none;
text-shadow:0px 2px 0px #528ecc;
}
.rightbox h2 {
font-size:24px;
color:#333 !important;
font-weight:bold;
padding:0 0 10px 0;
background:none !important;
}

h1, h2, h3, h4, h5, h6, p, form {
font-size:100%;
font-weight:normal;
line-height:normal;
padding:0;
margin:0;
}
.signupform {
padding: 15px;
background-color: #d1d7dc;
width:80%;
text-align: center;
margin: 0 auto;
}
.formTable {
text-align: center;
width:90%;
font-family:Arial;
margin: 0 auto;
}

.formTable label{
font-weight: bold;
}

.formTable h2{
font-size:24px;
color:#333 !important;
font-weight:bold;
padding:0 0 10px 0;
background:none !important;
}
.formTable input[type="text"]{
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius:2px;
border:1px solid #2282b2;
height:30px;
background:#fff;
line-height:30px;
font-size:14px;
color:#333333;
width:70%;
margin:0;
padding:0;
}
.formTable input[type="text"]:focus{
background:#FFFFFF;
}
.formTable textarea{
-webkit-border-radius: 2px;
-moz-border-radius: 2px;border-radius:2px;
border:1px solid #2282b2;
height:80px;
background:#fff;
line-height:18px;
font-size:14px;
color:#333333;
width:315px;
resize:none;
font-family:arial;
margin:0;
padding:0;
}
.formTable textarea:focus{
background:#FFFFFF;
}
.footlink{color:#808080; margin:0 auto; font-size:10pt;}
.footlink a{ color:#808080; font-size:10pt; text-decoration:underline;}
.footlink a:hover{ text-decoration:none;}
  #emptyidcc .mainmenu {
    color: #000000 !important;
}
.center{
    width:500px;
    margin:0 auto;
    text-align:left;
}
ul{
    list-style-type: square;
}
      #emptyidcc .mainmenu {
        color: #000000 !important;
    }
 

And heres my Overall_Header template:

Code:
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
<head>
   <title>{SITENAME_TITLE}{PAGE_TITLE}</title>
   <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
   <meta http-equiv="content-script-type" content="text/javascript" />
   <meta http-equiv="content-style-type" content="text/css" />
   <!-- BEGIN switch_compat_meta -->
   <meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />
   <!-- END switch_compat_meta -->
   <!-- BEGIN switch_canonical_url -->
   <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
   <!-- END switch_canonical_url -->
   {META_FAVICO}
   {META}
   {META_FB_LIKE}
   <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" />
   {T_HEAD_STYLESHEET}
   {CSS}
   <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
   <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
   <script src="{JQUERY_PATH}" type="text/javascript"></script>
   <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>

   <!-- BEGIN switch_fb_login -->
   <script src="http://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
   <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
   <!-- END switch_fb_login -->

   <!-- BEGIN switch_ticker -->
   <link type="text/css" rel="stylesheet" href="{JS_DIR}jquery/ticker/ticker.css" />
   <script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script>
   <!-- END switch_ticker -->

   <!-- BEGIN switch_ticker_new -->
   <script src="{JS_DIR}jquery/jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
   <script type="text/javascript">//<![CDATA[
      /* Definir le sens de direction en fonction du panneau admin */
      var tickerDirParam = "{switch_ticker.DIRECTION}";
      var slid_vert = false;
      var auto_dir = 'next';
      var h_perso = parseInt({switch_ticker.HEIGHT});

      switch( tickerDirParam )
      {
         case 'top' :
            slid_vert = true;
            break;

         case 'left':
            break;

         case 'bottom':
            slid_vert = true;
            auto_dir = 'prev';
            break;

         case 'right':
            auto_dir = 'prev';
            break;

         default:
            slid_vert = true;
      }

      $(document).ready(function() {
         var w_cont = $('#fa_ticker_container').width();

         if (w_cont > 0)
         {
            $('#fa_ticker_container').width(w_cont);

            /* Affichage de la liste */
            $('#fa_ticker_content').css('display','block');

            /* Calcul des dimensions du conteneur et des elements */
            var width_max = $('ul#fa_ticker_content').width();
            var width_item = Math.floor(width_max / {switch_ticker.SIZE});
            var height_max = h_perso;

            /* Calcul de la hauteur maximale du conteneur en fonction des elements et de la hauteur personnalisee dans l'admin */
            $('ul#fa_ticker_content li').each( function () {
               if ($(this).height() > height_max)
               {
                  height_max = $(this).height();
               }
            } );

            /* Redimensionnement des elements et des images trop larges */
            $('ul#fa_ticker_content li').width(width_item).height(height_max).find('img').each(function () {
               if ($(this).width() > width_item)
               {
               var ratio      = $(this).width() / width_item;
               var new_height = Math.round($(this).height() / ratio);
               $(this).height(new_height).width(width_item);
               }
            });

            /* Redimensionnement et centrage du conteneur en mode vertical */
            if (slid_vert)
            {
               $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
            }

            /* Initialisation du caroussel */
            $('#fa_ticker_content').jcarousel({
                  vertical: slid_vert,
               wrap: 'circular',
               auto: {switch_ticker.STOP_TIME},
               auto_direction: auto_dir,
            scroll: 1,
            size: {switch_ticker.SIZE},
            height_max: height_max,
            animation: {switch_ticker.SPEED}
            });
         }
         else
         {
            $('ul#fa_ticker_content li:not(:first)').css('display','none');
            $('ul#fa_ticker_content li:first').css('list-style','none').css('text-align','center');
         }
      });
   //]]>
   </script>
   <!-- END switch_ticker_new -->

   <script type="text/javascript">//<![CDATA[
   $(document).ready(function(){
      <!-- BEGIN switch_enable_pm_popup -->
         pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
         pm.focus();
      <!-- END switch_enable_pm_popup -->
      <!-- BEGIN switch_report_popup -->
         report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
         report.focus();
      <!-- END switch_report_popup -->
      <!-- BEGIN switch_ticker -->
         ticker_start({switch_ticker.HEIGHT}, {switch_ticker.SPACING}, {switch_ticker.SPEED}, '{switch_ticker.DIRECTION}', {switch_ticker.STOP_TIME});
      <!-- END switch_ticker -->
   });

   <!-- BEGIN switch_login_popup -->
      var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;
   <!-- END switch_login_popup -->

   <!-- BEGIN switch_login_popup -->
   $(document).ready( function() {
      $(window).resize(function() {
         var windowWidth = document.documentElement.clientWidth;
         var popupWidth = $("#login_popup").width();
         var mypopup = $("#login_popup");

         $("#login_popup").css({
         "left": windowWidth/2 - popupWidth/2
            });
      });
   });
   <!-- END switch_login_popup -->
   //]]>
   </script>
   {GREETING_POPUP}
   <!-- BEGIN switch_ticker_new -->
   <style>
   .jcarousel-skin-tango .jcarousel-item {
      text-align:center;
      width: 10px;
   }

   .jcarousel-skin-tango .jcarousel-item-horizontal {
      margin-right: {switch_ticker.SPACING}px;
   }

   .jcarousel-skin-tango .jcarousel-item-vertical {
      margin-bottom: {switch_ticker.SPACING}px;
   }
   </style>
   <!-- END switch_ticker_new -->
   {HOSTING_JS}
   <!-- BEGIN google_analytics_code -->
   <script type="text/javascript">
   //<![CDATA[
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', '{G_ANALYTICS_ID}']);
    _gaq.push(['_trackPageview']);
   _gaq.push(['_trackPageLoadTime']);

   <!-- BEGIN google_analytics_code_bis -->
   _gaq.push(['b._setAccount', '{G_ANALYTICS_ID_BIS}']);
   _gaq.push(['b._trackPageview']);
   <!-- END google_analytics_code_bis -->

    (function() {
      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
   //]]>
   </script>
   <!-- END google_analytics_code -->
</head>
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
   <!-- BEGIN hitskin_preview -->
   <div id="hitskin_preview" style="display: block;">
      <h1><img src="http://illiweb.com/fa/hitskin/hitskin_logo.png" alt="" /> Hit<em>skin</em>.com</h1>
      <div class="content">
         <p>
            {hitskin_preview.L_THEME_SITE_PREVIEW}
            <br />
            <span>{hitskin_preview.U_INSTALL_THEME}<a href="http://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
         </p>
      </div>
   </div>
   <!-- END hitskin_preview -->

   <!-- BEGIN switch_login_popup -->
   <div id="login_popup">
      <table class="forumline" width="{LOGIN_POPUP_WIDTH}" height="{LOGIN_POPUP_HEIGHT}" border="0" cellspacing="1" cellpadding="0">
         <tr height="25">
            <td class="catLeft">
               <span class="genmed module-title">{SITENAME}</span>
            </td>
         </tr>
         <tr height="{LOGIN_POPUP_MSG_HEIGHT}">
            <td class="row1" align="left" valign="top">
               <div id="login_popup_buttons">
                  <form action="{S_LOGIN_ACTION}" method="get">
                     <input type="submit" class="mainoption" value="{L_LOGIN}" />
                     <input type="button" class="mainoption" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
                     <input id="login_popup_close" type="button" class="button" value="{L_DONT_DISPLAY_AGAIN}" />
                  </form>
               </div>
               <span class="genmed">{LOGIN_POPUP_MSG}</span>
            </td>
         </tr>
      </table>
   </div>
   <!-- END switch_login_popup -->

   <a name="top"></a>
   {JAVASCRIPT}

   <table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
      <tr>
         <td class="bodyline">
            <table width="100%" cellspacing="0" cellpadding="0" border="0">
               <tr>
                  <!-- BEGIN switch_logo_left -->
                  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                  <!-- END switch_logo_left -->
                  <td align="center" width="100%" valign="middle">
                     <!-- BEGIN switch_logo_center -->
                     <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
                     <br />
                     <!-- END switch_logo_center -->
                     
                  </td>
                  <!-- BEGIN switch_logo_right -->
                  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                  <!-- END switch_logo_right -->
               </tr>
            </table>
<div class="non-semantic-protector">
            <table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}" class="ribbon" >
               <tr>
                  <td class="ribbon-content" align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
               </tr>
            </table>
                          </div>
                         
            <div style="clear: both;"></div>
                         
            <!-- BEGIN switch_ticker_new -->
            <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
               <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
                  <tr>
                     <td {CLASS_TABLE_TYPE} align="left" class="row1">
                        <div id="fa_ticker_container">
                           <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none;">
                              <!-- BEGIN ticker_row -->
                              <li>{switch_ticker.ticker_row.ELEMENT}</li>
                              <!-- END ticker_row -->
                           </ul>
                        </div>
                     </td>
                  </tr>
               </table>
            </div>
            <!-- END switch_ticker_new -->

            <!-- BEGIN switch_ticker -->
            <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
               <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
                  <tr>
                     <td {CLASS_TABLE_TYPE} align="left" class="row1">
                        <div id="fa_ticker_container">
                           <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
                              <div class="fa_ticker_content">
                                 <!-- BEGIN ticker_row -->
                                 <div>{switch_ticker.ticker_row.ELEMENT}</div>
                                 <!-- END ticker_row -->
                              </div>
                           </div>
                        </div>
                     </td>
                  </tr>
               </table>
            </div>
            <!-- END switch_ticker -->

            <div id="page-body">
               <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
                  <table cellpadding="0" cellspacing="0" width="100%" class="three-col">
                     <tbody>
                        <tr>
                           <td valign="top" width="{C1SIZE}">
                              <div id="{ID_LEFT}">
                                 <!-- BEGIN giefmod_index1 -->
                                 {giefmod_index1.MODVAR}
                                    <!-- BEGIN saut -->
                                    <div style="height:{SPACE_ROW}px"></div>
                                    <!-- END saut -->
                                 <!-- END giefmod_index1 -->
                              </div>
                           </td>
                           <td valign="top" width="100%">
<!-- BEGIN html_validation -->
                           </td>
                        </tr>
                     </tbody>
                  </table>
               </div>
            </div>
         </td>
      </tr>
   </table>
</body>
</html>
<!-- END html_validation -->

i know somewhere between those 2 the code for my ribbon nav bar is in there..lol

becomeelite
Forumember

Posts : 53
Reputation : 1
Language : English

http://www.informationkeptquiet.com

Back to top Go down

Re: Using my navbar on another forum

Post by becomeelite on January 2nd 2013, 2:08 am

bump
----





Last edited by becomeelite on January 3rd 2013, 1:21 am; edited 2 times in total

becomeelite
Forumember

Posts : 53
Reputation : 1
Language : English

http://www.informationkeptquiet.com

Back to top Go down

Re: Using my navbar on another forum

Post by becomeelite on January 3rd 2013, 1:22 am

Theres to many modifications on my site, i dont want to copy everything over to his site. And yes, there the same version and everything

All i want is to take the look of my nav bar and put it on his site.

becomeelite
Forumember

Posts : 53
Reputation : 1
Language : English

http://www.informationkeptquiet.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum