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

[NicoMarpaunk]

I am using xenporta and currently the title of my latest news displayed like this

http://i.imgur.com/jXtW7.jpg

How to make it looks like this ?

http://i.imgur.com/ERHAC.jpg


Thanks !

 

[Chris D]

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.

Specifically

    #recentNews .recentNews .subHeading,
    #recentThreads .sectionHeaders
    {
border: 0px;
font-size: 14px;
font-family: Georgia, "Times New Roman", serif;
color:
#777;
background:
#F1F1EC url('styles/flexile/xenforo/gradients/navigation-tab.png') repeat-x top;
padding: 10px 15px;
margin: 0 -15px 15px;
border-bottom: 1px solid
#D6D6D6;
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.

 

[NicoMarpaunk]

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.

Specifically

    #recentNews .recentNews .subHeading,
    #recentThreads .sectionHeaders
    {
border: 0px;
font-size: 14px;
font-family: Georgia, "Times New Roman", serif;
color:
#777;
background:
#F1F1EC url('styles/flexile/xenforo/gradients/navigation-tab.png') repeat-x top;
padding: 10px 15px;
margin: 0 -15px 15px;
border-bottom: 1px solid
#D6D6D6;
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.

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

 

[MagnusB]

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.

 

[NicoMarpaunk]

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.

Specifically

    #recentNews .recentNews .subHeading,
    #recentThreads .sectionHeaders
    {
border: 0px;
font-size: 14px;
font-family: Georgia, "Times New Roman", serif;
color:
#777;
background:
#F1F1EC url('styles/flexile/xenforo/gradients/navigation-tab.png') repeat-x top;
padding: 10px 15px;
margin: 0 -15px 15px;
border-bottom: 1px solid
#D6D6D6;
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.

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.

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

http://i.imgur.com/pUwrA.jpg

 

[Chris D]

1. Add this to your EXTRA.css:

.recentNews .subHeading a
{
color: black;
}

2. You will want to add this to your EXTRA.css:

.sectionMain
{
padding: 0px;
margin: 0px auto;
border: 0px;
}

 

[NicoMarpaunk]

OMG thanks so much itsw working perfect now