1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

New To xF - Need Help With NavTabs?

Discussion in 'Styling and Customization Questions' started by Carlos B, Apr 3, 2012.

  1. Carlos B

    Carlos B Member

    FIXED :)

    Hello,

    I am brand new to XenForo, and I came from IP.Board. I am trying to "convert" my skin over to XenForo, and almost have it all except one thing.

    Since I am used to IP.Board, I recognize things such as primary_nav or community_app_menu. When it comes to NavTabs, I'm completely lost. I need to make the NavBar look exactly like my Primay_nav from my IP.Board skin, and I'm guessing only people experienced with IP.Board will be able to help me.

    Here is my old skins nav bar:
    [​IMG]

    And here is the one I have attempted to recreate on my xenforo skin:
    [​IMG]

    You can't see the whole thing, as hovering and those things are not shown. The main thing is, I need to recreate the exact "Primary_Nav" that I had on my old skin to this XenForo skin.

    Here is the code from my old skin (all the code for the primary_nav):
    Code:
    #primary_nav{
    background:#262626 url({style_images_url}/nav_bg.png) repeat-x;
    font-size: 13px;
    padding-left:10px;
    padding: 3px 10px 0 10px;
    height:40px;
    border-bottom:2px solid black
    }
     
        #community_app_menu > li { margin: 0px 4px 0 0; top: 5px; position: relative;
    }
     
        #community_app_menu > li > a {
            color: #9a9a9a;
            -webkit-border-radius: 14px;
            -moz-border-radius: 14px;
            border-radius: 14px;
            display: block;
            outline: none;
            padding: 0px 15px;
            line-height: 30px;
            height: 30px;
        }
     
        #community_app_menu > li > a:hover,
        #community_app_menu > li > a.menu_active {
            background: url("{style_images_url}/trans30.png") repeat;
            background: rgba(0,0,0,0.3);
            -webkit-box-shadow: inset rgba(0,0,0,0.8) 0px 1px 5px, rgba(255,255,255,0.03) 0px 0px 0px 1px, rgba(255,255,255,0.1) 0px 1px 0px;
            -moz-box-shadow: inset rgba(0,0,0,0.8) 0px 1px 5px, rgba(255,255,255,0.03) 0px 0px 0px 1px, rgba(255,255,255,0.1) 0px 1px 0px;
            box-shadow: inset rgba(0,0,0,0.8) 0px 1px 5px, rgba(255,255,255,0.03) 0px 0px 0px 1px, rgba(255,255,255,0.1) 0px 1px 0px;
            color: #fff;
        }
     
        #community_app_menu > li.active a {
            background: url("{style_images_url}/trans50.png") repeat;
            background: rgba(0,0,0,0.5);
            -webkit-box-shadow: inset rgba(0,0,0,0.8) 0px 1px 5px, rgba(255,255,255,0.03) 0px 0px 0px 1px, rgba(255,255,255,0.1) 0px 1px 0px;
            -moz-box-shadow: inset rgba(0,0,0,0.8) 0px 1px 5px, rgba(255,255,255,0.03) 0px 0px 0px 1px, rgba(255,255,255,0.1) 0px 1px 0px;
            box-shadow: inset rgba(0,0,0,0.8) 0px 1px 5px, rgba(255,255,255,0.03) 0px 0px 0px 1px, rgba(255,255,255,0.1) 0px 1px 0px;
            color: #fff;
            position: relative;
        }
    Where would I put each of those in the new skin etc.?

    I have the "old" skin live here:
    http://coremodding.com/forums

    And my "new" Xenforo skin live here:
    http://coremodding.com/xen

    Any amount of help would be appreciated :)
     
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Custom CSS can be placed in this template:

    Admin CP -> Appearance -> Templates -> EXTRA.css
     

Share This Page