Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
  • #18094

    hi there

    here is my working site:

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


    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


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



    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;




    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


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




    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! :)


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




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


    Glad Ismael could help :)



Viewing 10 posts - 1 through 10 (of 10 total)

The topic ‘change background colour of heading/search bar to transparent’ is closed to new replies.