XF 1.2 Transparent Header

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
 

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.
 

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.
 

Brogan

XenForo moderator
Staff member
Check you haven't manually added it to EXTRA.css or one of the other templates.
 

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;
}
 

Thronk

Member
Thank you,

In Header.css there was a value
background: linear-gradient(to bottom, #da0000 0, #b90000 100%) !important;
basically a red gradient. I removed that value and now have it transparent.
 
Top