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

XF 1.2 Transparent Header

Discussion in 'Styling and Customization Questions' started by Thronk, Aug 4, 2013.

  1. Thronk

    Thronk Member

    Hello,

    I'm trying to set a background image but the header color is overlapping. I've set Header And Navigation to transparent background (was red) but it's still red.

    I checked all the properties and can't find what is setting this.

    header.PNG
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

    What about General -> HTML?
     
  3. Thronk

    Thronk Member

    General -> HTML is set to black background with my background image. What I assume should be, but as I said the header is conflicting.
     
  4. Brogan

    Brogan XenForo Moderator Staff Member

    Can you post a link so I can inspect the code?
     
  5. Thronk

    Thronk Member

    The link to my site? It's in my signature, the style is Colorful Red.
     
  6. Brogan

    Brogan XenForo Moderator Staff Member

    The header css is still red:

    upload_2013-8-4_21-40-39.png
     
  7. Thronk

    Thronk Member

    Hmm.. I had cleared the value.
    I tested with lime green and when I reload the page, I see the lime green but a second later the red overlaps.
     
  8. Brogan

    Brogan XenForo Moderator Staff Member

    Check you haven't manually added it to EXTRA.css or one of the other templates.
     
  9. Thronk

    Thronk Member

    This is my extra.css

    Code:
    // Navigation //
    .navTabs .navTab.PopupClosed:hover {
    background-color: transparent !important;
    
    }
    
    .navTabs .navTab.PopupClosed .navLink {
    color: white !important;
    }
    
    .Popup .PopupControl:hover, .Popup.PopupContainerControl:hover {
    color: white;
    background-color: rgb(62, 62, 62);
    }
    
    // Sidebar //
    .sidebar .section .primaryContent h3, .sidebar .section .secondaryContent h3, .profilePage .mast .section.infoBlock h3 {
    background-color: #444547 !important;
    padding: 10px 10px 11px 24px !important;
    }
    
    .sidebar .secondaryContent {
    background-color: white !important;
    border-bottom: #efefef !important;
    }
    
    // Resource Manager //
    .resourceListSidebar .secondaryContent {
    background-color: rgb(252, 252, 255) !important;
    border-color: rgb(252, 252, 255);
    }
    
    .resourceListItem .main .cost {
    color: gray;
    background-color: #e6e6e6;
    border: 1px solid #c0c0c0;
    }
    
    // Forms //
    .formPopup .controlsWrapper {
    background: #c0c0c0;
    }
    
    // Miscellaneous //
    .button.primary {
    background-color: #a5cae4;
    }
    
    .attachedFiles {
    border: 1px solid #c0c0c0 !important;
    }
    
    .attachedFiles .attachedFilesHeader {
    color: #373737 !important;
    background: #e6e6e6 url('styles/colorful/xenforo/gradients/form-button-white-25px.png') repeat-x top !important;
    border-bottom: 1px solid #c0c0c0 !important;
    }
    
    .attachedFiles .attachmentList {
    background: #f0f0f0 !important;
    }
    
    .attachment .boxModelFixer {
    border: 1px solid #e6e6e6 !important;
    }
    
    .attachment .thumbnail {
    border-right: 1px solid #e6e6e6 !important;
    }
    
    .bbCodeBlock {
    border: 1px solid #c0c0c0 !important;
    }
    
    .bbCodeBlock .type {
    color: #373737 !important;
    background: #e6e6e6 url('styles/colorful/xenforo/gradients/form-button-white-25px.png') repeat-x top !important;
    border-bottom: 1px solid #c0c0c0 !important;
    }
    
    .bbCodeBlock pre, .bbCodeBlock .code {
    background: rgb(252, 252, 255) url('styles/colorful/xenforo/gradients/category-23px-light.png') repeat-x top !important;
    }
    
    .message .newIndicator span {
    background-color: #da0000 !important;
    }
    
    .message .newIndicator {
    color: #373737 !important;
    background: #da0000 url('styles/colorful/xenforo/gradients/form-button-white-25px.png') repeat-x top !important;
    border: 1px solid #da0000 !important;
    
    #content .pageWidth
    {
        background-color: transparent !important;
    }
     
  10. Thronk

    Thronk Member

    I should mention it's a child style to a default blue colorful style
     
  11. Brogan

    Brogan XenForo Moderator Staff Member

    Search the templates for #header - that will show you which css template it is in.
     
    aiman.h.kallaf and Thronk like this.
  12. Thronk

    Thronk Member

    Thank you,

    In Header.css there was a value
    basically a red gradient. I removed that value and now have it transparent.
     

Share This Page