XF 1.2 Transparent Header

[Thronk]

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.

 

[Paul B]

What about General -> HTML?

 

[Thronk]

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

 

[Paul B]

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

 

[Thronk]

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

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

 

[Paul B]

The header css is still red:

 

[Thronk]

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.

 

[Paul B]

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

 

[Thronk]

This is my extra.css

// 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]

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

 

[Paul B]

Search the templates for #header - that will show you which css template it is in.

 

[Thronk]

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.