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

[Help] How to change this to something like this (example inside).

Discussion in 'Styling and Customization Questions' started by NicoMarpaunk, May 21, 2012.

  1. NicoMarpaunk

    NicoMarpaunk New Member

  2. Chris D

    Chris D XenForo Developer Staff Member

    Best bit of advice I can give is to make use of the developer tools built into your browser. Chrome by the looks of it.

    If you right click the header at Bukkit.org and click Inspect Element, you will see on the right handside basically all of the CSS rules which match that element.


        #recentNews .recentNews .subHeading,
        #recentThreads .sectionHeaders
    border: 0px;
    font-size: 14px;
    font-family: Georgia, "Times New Roman", serif;
    #F1F1EC url('styles/flexile/xenforo/gradients/navigation-tab.png') repeat-x top;
    padding: 10px 15px;
    margin: 0 -15px 15px;
    border-bottom: 1px solid
    border-top-left-radius: 6px;
    -webkit-border-top-left-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -khtml-border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    -moz-border-radius-topright: 6px;
    -khtml-border-top-right-radius: 6px;
    So that should probably do it, but of course you may not have that background image available.

    The best way to make CSS changes is to use EXTRA.CSS this is a style sheet that will never be updated during XenForo updates and allow you to make changes without overriding the original style. Make a mistake? Just delete the bits you've changed in EXTRA.CSS and it's back to how it was :) Also bear in mind that a lot of this will be using Style Properties. If none of this makes sense, then try and find the Style Properties which gives you a nice looking easy to use interface to make these changes.

    But - more importantly - it's not ideal to just borrow other people's code, experiment with these things and you'll quickly learn what works and what doesn't and you'll easily be able to define your own style.
  3. NicoMarpaunk

    NicoMarpaunk New Member

    thanks for the help, but well, i am blind about css, lots of forum i saw using xenporta doesent have that yellow bar like in my forum.. (i think only my site has that yellow bar)

    imma try to use style properties
  4. MagnusB

    MagnusB Well-Known Member

    AFAIK, Xenporta does not style the headings, that is handled by your default style. I just checked on my site, and I have not done any styling changes to the heading.

    The CSS Yorick supplied will set the background color to #F1F1EC, and also seems to take into account the positioning problems I can see on your picture :)
    I would suggest adding that CSS in EXTRA.css, then do tweaking to the background, color and border-bottom rule, specifically the colors.
    Yorick likes this.
  5. NicoMarpaunk

    NicoMarpaunk New Member

    I get it working now, some problems still left...

    1. How do i make the recent news title color not brown but black ?

    2. How do i remove the small white background behind the recentnews area ? Thanks

  6. Chris D

    Chris D XenForo Developer Staff Member

    1. Add this to your EXTRA.css:

    .recentNews .subHeading a
    color: black;
    2. You will want to add this to your EXTRA.css:

    padding: 0px;
    margin: 0px auto;
    border: 0px;
    MagnusB likes this.
  7. NicoMarpaunk

    NicoMarpaunk New Member

    OMG thanks so much itsw working perfect now
    Yorick likes this.

Share This Page