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

basic menu styling help

Discussion in 'Styling and Customization Questions' started by Live Free, Jul 24, 2011.

  1. Live Free

    Live Free Active Member

    I'm new to Xenforo and the styling process. I'm trying to get the forum to match my wordpress design, but I'm struggling. Some of my questions might be obvious, but since I'm new I'd appreciate pointing me in the right direction.

    First of all, is there any way I can set up the header and menu to call the same data for wordpress and xenforo (to simplify)?

    Assuming not, how is styling supposed to be done for the menu? Are there template edits or is it solely style properties? When I edit the style properties for the existing XenForo theme, then clear the cache and refresh the page, I see no change.

    This happens when I edit the "Navigation Tab, Selected TAb, Selected Tab Sub-Link," etc. Basically editing anything under the header and navigation, color/style wise, doesn't seem to yield any results. This is leaving me puzzled.

    Any tips? Any basic styling tutorials?
  2. angelog272

    angelog272 Member

    We're in the same boat.
  3. oO5 Dynasty

    oO5 Dynasty Well-Known Member

    This is how i learned to style my board. I do everything through extra.css
    First first inspect the element i want to change on the site by right clicking it. Then i edit the code in the browser, and when i get the results i like, i copy the code and put it into my extra.css Also add !important at the end to make sure the code is active.
    .ctaFtThreadTextIcon {
        font-size: 14px;
        overflow: hidden;
        line-height: 1.44em;
        height: 300px !important;
    .ctaFtIcon {
        background-color: rgba(255,255,255,0)!important;
        padding: 2px;
        margin-right: 10px;
        border: 1px solid rgba(0,0,0,0)!important;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        -khtml-border-radius: 4px;
        border-radius: 4px;
        float: left;
        width: 300px;
        height: 300px;
    This way the original style properties stays the same, and i can just go to the extra.cc to remove any code at anytime.


Share This Page