Xenporta/Theme Help

[iJumbo]

Hello,

I am trying to customize my theme more and more and I'm trying to make it look like the screenshot shown below. (Screen Shot 2012-07-07 at 11.27.46 AM.png)

I don't know how to change the appearance of the Xenporta/Forum header.

Thanks

 

[Matthew2D]

You might try looking in the CSS file for xenporta. If your using google chrome you can specify the element by clicking on the header.

 

[Shelley]

Can't really isolate the specific problem going by the screenshot. If your making just css edits which it looks like you are I would use extra.css to make the edits and find out the class names using the browser inspector and modify accordingly.

Alternatively you could post a link to your site so somebody can see the css that needs altered and offer further support.

 

[Matthew2D]

Can't really isolate the specific problem going by the screenshot. If your making just css edits which it looks like you are I would use extra.css to make the edits and find out the class names using the browser inspector and modify accordingly.

Alternatively you could post a link to your site so somebody can see the css that needs altered and offer further support.

Just search fightcraft. I found it.

 

[Shelley]

Try adding the following into extra.css template.

.recentNews .subHeading {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    margin: 0 -15px 10px !important;
}

If you want to remove the green border add the following, though you may prefer to keep that showing but i think it looks better without.

border: none !important;

 

[iJumbo]

Thank you so much! I'll see how it turns out.

 

[iJumbo]

Try adding the following into extra.css template.

.recentNews .subHeading {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    margin: 0 -15px 10px !important;
}

If you want to remove the green border add the following, though you may prefer to keep that showing but i think it looks better without.

border: none !important;

I'm fairly new to Xenforo, how may I go about accessing "extra.css"?

EDIT: I just used the search bar, thanks anyways.

 

[Shelley]

Log into your admincp Go to Appearance >> templates and scroll down till you see extra.css and then open the template insert the code i posted above.

Ensure you add it to the correct styles extra.css if you have multiple styles.

 

[iJumbo]

Log into your admincp Go to Appearance >> templates and scroll down till you see extra.css and then open the template insert the code i posted above.

Ensure you add it to the correct styles extra.css if you have multiple styles.

What about changing the size, color, etc?

 

[Shelley]

If your wanting to change the color just add the following to normal text to the code i provide above though below is a colour size example you input your own size colour preferences.

color: red !important;
font-size: 13px;

If your wanting links within it changed in colour you will have to keep this separate and add the following

.recentNews .subHeading a{
color: purple !important; 
}

 

[iJumbo]

If your wanting to change the color just add the following to normal text to the code i provide above though below is a colour size example you input your own size colour preferences.

color: red !important;
font-size: 13px;

If your wanting links within it changed in colour you will have to keep this separate and add the following

.recentNews .subHeading a{
color: purple !important;
}

If you check out my site (mcfightcraft.com), it has these borders around the Xenporta news feed. How do I get rid of that, also how do I get rid of the Quick Nav Menu?

(The board I'm basing mine off of is located here: bukkit.org)

 

[Shelley]

what I did to get rid of the quicknav is just hide the trigger icon adding the following to extra.css

.breadcrumb .jumpMenuTrigger {
display: none !important;
}

I've never used any of jaxels add-ons so I can see where the newsfeed is.

 

[Shelley]

If your referring to the section main container try the following if that wasn't what you wanted just simply remove the following code I'm posting.

#recentNews .sectionMain {
    background-color: none !important;
    border: 0px solid #0F0F0F !important;
    padding: 0 !important;  
}

 

[iJumbo]

If your referring to the section main container try the following if that wasn't what you wanted just simply remove the following code I'm posting.

#recentNews .sectionMain {
    background-color: none !important;
    border: 0px solid #0F0F0F !important;
    padding: 0 !important; 
}

Where would I remove that code from?

 

[Shelley]

no I meant try that and check that it's what your wanting the extra border and stuff removed from the news. If it's not what you wanted then remove it, if it's what you wanted then keep it in the extra.css template.

 

[iJumbo]

no I meant try that and check that it's what your wanting the extra border and stuff removed from the news. If it's not what you wanted then remove it, if it's what you wanted then keep it in the extra.css template.

Oh ok, misread.

 

[iJumbo]

Perfect! That's what I was wanting exactly.

 

[Shelley]

You might want to add margin-top: 15px; to that last code snippet so there's spacing at the top.