New To xF - Need Help With NavTabs?

[Carlos B]

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:

And here is the one I have attempted to recreate on my xenforo skin:

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):

#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

 

[Jake Bunce]

Custom CSS can be placed in this template:

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