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

[Style customization] CSS instead of div style?

Discussion in 'XenForo Questions and Support' started by Trombones13, Feb 23, 2011.

  1. Trombones13

    Trombones13 Well-Known Member

    [​IMG]
    Can't I do this with CSS somewhere? This is the current code (located in navigation) and I feel like that there has to be a style property for this or something...


    Code:
    <div class="navTabs" style="background: rgba(255,255,255,0.4);
    border-left: 1px solid rgba(255,255,255,0.5);
    border-right: 1px solid rgba(255,255,255,0.5);
    border-bottom: 1px solid rgba(255,255,255,0.5);
    padding: 0 15px 15px 15px;
    -webkit-border-bottom-right-radius: 12px;
    -webkit-border-bottom-left-radius: 12px;
    -moz-border-radius-bottomright: 12px;
    -moz-border-radius-bottomleft: 12px;
    border-bottom-right-radius: 12px;
    border-bottom-left-radius: 12px;
    ">
    I also have this in PAGE_CONTAINER:
    Code:
    <div class="pageWidth" style="background: rgba(255,255,255,0.4);
    border-left: 1px solid rgba(255,255,255,0.5);
    border-right: 1px solid rgba(255,255,255,0.5);
    padding: 0 15px 15px 15px;
    ">
    (also think I just found a bug...off to the Test forum)
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

    What are you trying to do exactly?

    The Style Properties for the navTabs class is Header and Navigation: Navigation Tabs Container
     
  3. Trombones13

    Trombones13 Well-Known Member

    It adds the little translucent borders that are around my custom theme (site has it [Echo] on there by default if you're looking at it), but I figured I could probably move those to Style Properties so I wouldn't have to deal with those customized templates upon upgrading the forum every time.

    That Style Property mentioned works for the first one. :D I tried Page Width Controller (@pageWidth) for the one in PAGE_CONTAINER earlier, but it didn't work.
     
  4. Brogan

    Brogan XenForo Moderator Staff Member

    Have you tried adding the css to EXTRA.css and using the class name?

    For example:
    Code:
    .pageWidth {
    background: rgba(255,255,255,0.4);
    border-left: 1px solid rgba(255,255,255,0.5);
    border-right: 1px solid rgba(255,255,255,0.5);
    padding: 0 15px 15px 15px;
    }
    If you're adding new html/markup to a template though, there's no other way of doing it.
     
  5. Trombones13

    Trombones13 Well-Known Member

    Just did, but it does the same weird thing that the @pageWidth Style Property does:
    XF Voice PageWidth Mod.png
    (the weird colors on the breadcrumb/my username are because of the screenshot program, not this)
     
  6. Brogan

    Brogan XenForo Moderator Staff Member

    So adding the code to EXTRA.css has a different outcome than when it is included inline in the PAGE_CONTAINER template?

    Have you tried using the !important attribute?

    Failing that you could create a new class and add it to the PAGE_CONTAINER template like so:
    div class="pageWidth EchoBorders"
     
  7. Trombones13

    Trombones13 Well-Known Member

    The screenshot above is what it looks like with the code you mentioned put in EXTRA.css (with !important). Removing the code from PAGE_CONTAINER altogether removes the translucency on the left and right side.

    ...Turns out the issue was that I needed #content in front of it, because there's a <div id="content"> in front of it. sigh Fixed now...thanks :) *reverts PAGE_CONTAINER*
     
  8. Brogan

    Brogan XenForo Moderator Staff Member

    I probably should have checked the template but I was being lazy :D

    At least you got it working.
     
    Trombones13 likes this.

Share This Page