change background colour of heading/search bar to transparent « Support Forum | Kriesi.at

Support Forum » Flagship

change background colour of heading/search bar to transparent

10 posts from 3 voices

Started 5 months ago by webWahine
Latest reply from Devin
This topic is closed
This topic is not a support question

Tags:

No tags yet.

webWahine
Member

hi there

here is my working site:

http://burrardlanding.com/

pwd - **removed by support**

i really like the positioning of the header and search indented up into the header background images, but i know that the client is going to want to see the whole image so i'd like to style it so that the header with page title and search is transparent (or at least shows an alpha value), ie, the title_container

i would then like to style the title text to be white, which i can see in firebug, but i'm not sure about where that background colour is being called

please advise

thanks, again, jodi

ps - i purchased a theme by another developer off themeForest and after days of frustration and a very buggy theme i came back to kriesi, because your themes are technically very solid, very well designed, and you always offer great support :)

Posted 5 months ago #
webWahine
Member

ok, so i found it with firebug (must have been tired); it's here:

#top .stretch_full.title_container {
background-color: #FF3300;
}

however, this is a very small site so i don't really need the breadcrumbs - how do i hide just the breadcrumbs when i am using the 'heading plus search bar & breadcrumb' element in the template builder, please

thanks again, jodi

Posted 5 months ago #
webWahine
Member

me again

i just tried an opacity setting in the css and it's not revealing the image underneath so i guess i still need to know how to play with that, please :)

Posted 5 months ago #
Ismael
Moderator
Hi,

The whole container has a white background. You can't set opacity on the header alone. Try this on your custom.css to see what I'm talking about.
```
.container {
background: none;
}

.stretch_full.title_container {
background: rgba(255, 255, 255, 0.6)!important;
}
```
Regards,
Ismael
Posted 5 months ago #
webWahine
Member

hi ismael

thanks, i did try that and it worked but once i set the opacity to 40% it didn't reveal the header image underneath - what's the trick to have that showing, if possible? thanks, jodi

Posted 5 months ago #

Ismael
Moderator

Hi jodi,

Try to add this code on your Quick CSS or custom.css:

@media only screen and (min-width: 960px) {
	.stretch_full.title_container {
		background: rgba(255, 255, 255, 0.4);
		position: absolute;
		left: 0;
		top: -67px;
	}

	#main > div.container {
		margin-top: 97px;
		overflow: visible;
	}
}

If the style is being overwritten, just add the !important. Hope this helps. :)

Regards,
Ismael

Posted 5 months ago #

webWahine
Member

hi ismael

that worked, thanks - so lastly i'd like to hide just the breacrumbs in the 'heading + search & breacrumbs' element in the template builder

i assume it needs to be some commented or modified php - please advise

thanks again! :)

Posted 5 months ago #
Ismael
Moderator
Hi webWahine,

Kindly add this code in Quick CSS or custom.css:
```
.title_container .breadcrumb {
   display: none;
}
```
This will hide the breadcrumbs. Hope this helps. :)

Regards,
Ismael
Posted 5 months ago #
webWahine
Member

perfect, and so simple! thank you; all is well; you are the best! :)

Posted 5 months ago #
Devin
Moderator

Glad Ismael could help :)

Regards,

Devin

Posted 5 months ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.

Kriesi.at - Wordpress Themes and HTML Templates

change background colour of heading/search bar to transparent

Topic Closed

Support Forum usage - Please read

Check out some of our WordPress Themes

Blog Categories

Latest Themes

Pages

About me…