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

Xenporta/Theme Help

Discussion in 'XenForo Questions and Support' started by iJumbo, Jul 7, 2012.

  1. iJumbo

    iJumbo Member

    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
     

    Attached Files:

  2. Matthew2D

    Matthew2D Active Member

    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.
     
  3. Shelley

    Shelley Well-Known Member

    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.
     
  4. Matthew2D

    Matthew2D Active Member

    Just search fightcraft. I found it.
     
    Shelley likes this.
  5. Shelley

    Shelley Well-Known Member

    Try adding the following into extra.css template.

    Code:
    .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.

    Code:
    border: none !important;
    
     
  6. iJumbo

    iJumbo Member

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

    iJumbo Member

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

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

    Shelley Well-Known Member

    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.
     
  9. iJumbo

    iJumbo Member

    What about changing the size, color, etc?
     
  10. Shelley

    Shelley Well-Known Member

    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.

    Code:
    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

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

    iJumbo Member

    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)
     
  12. Shelley

    Shelley Well-Known Member

    what I did to get rid of the quicknav is just hide the trigger icon adding the following to extra.css
    Code:
    .breadcrumb .jumpMenuTrigger {
    display: none !important;
    }
    
    I've never used any of jaxels add-ons so I can see where the newsfeed is.
     
  13. Shelley

    Shelley Well-Known Member

    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.

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

    iJumbo Member

    Where would I remove that code from?
     
  15. Shelley

    Shelley Well-Known Member

    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.
     
  16. iJumbo

    iJumbo Member

    Oh ok, misread. :)
     
  17. iJumbo

    iJumbo Member

    Perfect! That's what I was wanting exactly.
     
  18. Shelley

    Shelley Well-Known Member

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

Share This Page