Header - Background

[Guest]

Hi

 

Just wondering how to add a bit of color to the header, between the nav bar and breadcrumbs.

 

Many thanks

 

Grandpa

[Guest]

@@wHiTeHaT

Hi

 

Many thanks

 

Does

<div id="header_main">
..........all what comes inside header here........
</div>

Go somewhere in header.php.

 

Many thanks

 

Cheers

 

John

[Dan Cole]

@@grandpaj

 

John you might have a div class there already...I do.

 

Have a look for .module_header in user.css and if it is there you just need to change the css.  Mine looks like this and it simply loads in a background image.

 

.modular-header  {
  background: url('images/tpl/header-top.png');
}

 

You can remove the background part and replace it with..

 

background-color: #f1592a; /* color - orange */

 

if you just want to alter the color.

 

If you don't have an existing div class then you'll need to make the changes suggested by Henry in header.php which you'll find in your includes directory.

 

Dan

[Guest]

@@Dan Cole

 

No I don't have anything like that in CSS.

I have tried as Henry, said, in header.php but must be trying in the wrong place.

 

Cheers

 

Grandpa

[Dan Cole]

@@grandpaj

 

John here is a snippet from my header.php....

 

<div class="modular-header">
  <?php echo $oscTemplate->getContent('header'); ?>
</div>

 

Try adding the modular-header div class and then the css code I mentioned previously and let us know how you make out.

 

Dan

[Guest]

@@Dan Cole

Hi Dan

 

Had a go as mentioned above. For some reason just doesn't want to work

 

Cheers

Grandpa

[Dan Cole]

@@grandpaj

 

Do you have a link to your site where I can look at the changes you made?

 

Dan

[Guest]

@@Dan Cole

 

Hi Dan

 

Here's a link

 

http://www.grandpas.co.nz/BS234master

 

Many thanks

 

John

[Dan Cole]

@@grandpaj

 

Hi John...it actually does work.  You can see it on a smaller screen size....looks like you have the css added to a media query...try moving it further down the user.css file...ie outside the media query.

 

Dan

[Guest]

@@Dan Cole

 

Hi Dan

 

Don't really know what Ive done, but it seems to work now. Somehow I need to also get the background into the white space just below the nav bar.

http://www.grandpas.co.nz/BS234master/

 

Many thanks for your help

 

Grandpa

[Dan Cole]

@@grandpaj

 

Glad that worked for you John...I tried looking at  your site again but if looks like you removed the css definition.

 

For the white space that is probably just a padding or a margin setting that needs to be adjusted...just use firebug or Chrome to inspect it and then make the required change.   Should be an easy fix.

 

Dan

[Guest]

@@wHiTeHaT

Hi Henry

 

Thanks for your reply.

 

CSS no problem

 

But the rest. . .HTML is this just in 1 ile or several. Ive looked in index.php,header.php, template_top.php, html_output.php - No luck

Can you give me a pointer as to what file please

 

Many thanks

 

Grandpa

[Dan Cole]

@@grandpaj

 

It looked like you had it working John...what happened?

 

Dan

[Guest]

@@Dan Cole

 

Hi Dan

 

I was playing around, maybe just a little to much. The code I had that seemed to work just didn't look right, so long story short. I couldn't remember the code, and the playing around got rid of it.

 

I'm not quit sure what Henry means with the HTML code above.

 

Cheers

 

Grandpa

[Dan Cole]

Henry's code also goes in the header.php file....he is basically telling you to do they same thing as I did...we're using different class and slightly different css but the gist of it is the same.  He code covers the whole header where I was just targeting the area between the navigation bars.  Choose the code that best suits what you're trying to do.

 

Dan

[Guest]

@@Dan Cole

Hi Dan

 

Don't know whats going on. Can get it to work adequately in Responsive but not in "Desktop mode" Here's my code;

 

<div class="modular-header"><header id="header-area">
  <?php echo $oscTemplate->getContent('header'); ?>
</div>     </header>(or here)

<div class="clearfix"></div>
</div>    </header>( doesnt make any dif if this is here)

 

CSS

#header-area { 
  background: url('images/tpl/header-top.png');
}

 

I must have something wrong. Can tidy up code once working.

 

 

Any thoughts

 

Many thanks

Grandpa

[Dan Cole]

@@grandpaj

 

John...it looks like all your css code is inside a media tag....@@media (max-width: 1920px).   You are in effect saying use my user.css file for screen sizes below 1920 px...ie not desktop and if it's a desktop ignore my css file.  You also seem to be missing the closing bracket.  HTH...

 

Dan 

[Guest]

Hi Dan

 

Well Ive tried everything ( except the right thing) I even had the css with only

 

#header-area {
  background: url('images/tpl/header-top.png');
}

 

Still the same result, shows in responsive but not "desktop" mode

So I must have a problem somewhere else, goodness knows where.

 

Cheers

 

Grandpa

[Dan Cole]

@@grandpaj

 

John I assume you have an interest in learning how this works and if so try replacing you user.css with the code below and see what happens as you change screen sizes...also try changing the  barkground color, the media query size etc...you might also try using a background image.

 

If that works for you try adding the code to your user.css and see if still works as it does when you just use this code...when adding it to your css please note the placement of your opening and closing  { brackets }.  It looks to me like part of the problem you're having is that your current media query didn't have a closing bracket so that the css you added only worked for screens with the media size you specified ie up to 1928px.

@[member=media] screen and (max-width: 360px) {

.modular-header {
  background-color: blue;
}

}

Let me know how it goes...

 

Dan

[Guest]

@@Dan Cole

 

Hi Dan

 

Ive been trying all sorts of things.

For some reason the above didn't work on screen size greater than 846px when screen size is less than 847px  the background works fine. I have checked the CSS and all media seems to be closed (})

 

Even when I totatly removed the CSS with the exception of the above code, still no joy. 

Somewhere I guess I must have an error as nobody else seems to have this problem.

 

Cheers

 

Grandpa

[Dan Cole]

@@grandpaj

 

Seems to work fine John...you have the max-width in the media query set to 768 so I see your pink background color up to that screen size and then it goes away.  You just need to change the max-width to a higher number and it'll display the color pink up to the number you set it for.

 

One thing I did notice is that you have a lot of media queries in your css file...I tend to have one media query for each screen I target and have all the css for that screen size within the media query but maybe that is like tomato vs tomato.

 

Dan

[Guest]

@@Dan Cole

 

Hi Dan

 

Tried changing the media query width and other things, like max-width:1290px;

width:100%;, removed media query.

 

So I think i'll just leave it. Thank you so much for your various solutions

 

Kind regards

 

Grandpa

[Dan Cole]

@@grandpaj

 

I'm stubborn John.  (w00t)  What exactly doesn't work...does the pink disappear?  Does it not go beyond the 768?  What are you seeing when you increase the max-width?

 

Dan

[Guest]

@@Dan Cole

 

Hi Dan,

 

I don't like giving up either, but felt I have used enough of your time.

 

Once I get above 396px the pink (which is only for now) dissapears.

I am using FF browser and the Responsive Design View

I have changed the media width to around 1290px, makes no differece, left the media at 360px still no diff. I have removed all user css with the exception of

 

@@media screen and (max-width: 360px) {

.modular-header {
  background-color:
}

}  No difference

 Have made width :1290px, have tried width:100%.

 

It will probably be something stupid I have done.

 

Cheers

 

Grandp

[Dan Cole]

@@grandpaj

 

John is this your live site or a test site?  It would be nice if you could leave the color set ie pink and increase the media width to 1400px or something and leave it like that for a bit so we can have a look and play around with the css to trouble shoot it.   Is that possible? I'm wondering if one of your other media queries is over riding it?  You have a lot going on there.

 

Dan