It would help us help you if you included a link to your website. Without this information I have to speak in generalities, telling you how to find the required information. With this information I could give you a specific solution.
Suggest that you install a browser inspector like firebug, it shows you how your html is formed and how your css is working. Using this you will be able to identify the css you ant to change.
Hi Ross.
Thanks for the reply.
The site was hidden behind a “Comming soon” page, but I have just published it.
http://www.healthandbooty.co.uk
I have Firebug installed and ready to go.
If possible it would be nice if the logo and title where left aligned and resizd with the page. Not sure if this can be done though.
Appologise for the messed up link above btw. It does work though. 🙂
Your banner image looks better with:
.site-header {
background: url("http://www.healthandbooty.co.uk/wp-content/uploads/2014/09/cropped-header.png") no-repeat scroll left top rgba(0, 0, 0, 0);
}
It is still very wide at 1600px, which is OK for wide monitors.
Suggest that you resize the banner image for each of your media widths, this will make them faster to load as well.
The css above will be used in each media query block using the resized images. You will tune your text as well.
Appologies. I had some added css published for the prevoius post. I have now removed that and replaced it with the css you posted.
I’m not sure I understand the css side of things. It seems to point to a specific file and there seems to be no “switch” to tell it what size the image is. If I use multilple header sizes, how can this work when I point the css to one specific image ?
I used a width of 1600px as that was the size of the origional images with the theme. Are there standard media widths that people normaly work with ?
Thanks for all your help by the way.
Your responsive 2013 theme has these media widths:
style.css:@media (max-width: 1599px) {
style.css:@media (max-width: 1069px) {
style.css:@media (max-width: 999px) {
style.css:@media (max-width: 767px) {
style.css:@media (max-width: 643px) {
style.css:@media (max-width: 359px) {
resize the banner image for widths of: 1070, 1000, 768, 644, 360
put the width into the filename.
In you css, each of these blocks will have lines like:
@media (max-width: 767px) {
.site-header {
background: url("http://www.healthandbooty.co.uk/wp-content/uploads/2014/09/cropped-header768.png") no-repeat scroll left top rgba(0, 0, 0, 0);
}
}
Hi again.
I have set the header image to the 1600 wide version in the customize theme section and entered the css code into a plugin (Custom css manager). I have also resize the header and renamed each as seen in the code.
This is the code I have entered :-
@media (max-width: 1599px) {
.site-header {
background: url("http://www.healthandbooty.co.uk/wp-content/uploads/2014/09/header1600x230.png") no-repeat scroll left top rgba(0, 0, 0, 0);
}
}
@media (max-width: 1069px) {
.site-header {
background: url("http://www.healthandbooty.co.uk/wp-content/uploads/2014/09/header1070x154.png") no-repeat scroll left top rgba(0, 0, 0, 0);
}
}
@media (max-width: 999px) {
.site-header {
background: url("http://www.healthandbooty.co.uk/wp-content/uploads/2014/09/header1000x144.png") no-repeat scroll left top rgba(0, 0, 0, 0);
}
}
@media (max-width: 767px) {
.site-header {
background: url("http://www.healthandbooty.co.uk/wp-content/uploads/2014/09/header768x111.png") no-repeat scroll left top rgba(0, 0, 0, 0);
}
}
@media (max-width: 643px) {
.site-header {
background: url("http://www.healthandbooty.co.uk/wp-content/uploads/2014/09/header644x93.png") no-repeat scroll left top rgba(0, 0, 0, 0);
}
}
@media (max-width: 359px) {
.site-header {
background: url("http://www.healthandbooty.co.uk/wp-content/uploads/2014/09/header360x52.png") no-repeat scroll left top rgba(0, 0, 0, 0);
}
}
Still no joy though. I suspect I have done something silly somewhere but can’t figure out what.
What I see happening in my browser inspector is that your “display custom css code” is be over ridden by this code:
<style id="twentythirteen-header-css" type="text/css">
.site-header {
background: url("http://www.healthandbooty.co.uk/wp-content/uploads/2014/09/header1600x230.png") no-repeat scroll center top / 1600px auto rgba(0, 0, 0, 0);
}
Somehow it is going into your page header as an inline css block, as such it is defeating the media queries. Is this being done by some theme custom header ? Which you no longer want, can you turn it off ?
Of course once you get the image resizing you will then change the height of the header, etc.
I can see what you mean. I have also added the same css to the main css file for the style (I have created a child theme to play with.)
This is also being overridden.
If I leave the css in the custom css plugin it gets overridden twice.
I just can’t find the php code that decides to render the header that overrides my resized headers. I assume I could edit this so that it is not called.
I can’t seem to find the get_header() function and to be honest I am not sure I should be editing this function anyway.
I just can’t find the php code that decides to render the header that overrides my resized headers. I assume I could edit this so that it is not called.
Have you checked in the theme options ? Where you can customise the header image ?
Is it worth asking in the theme forum here:
http://wordpress.org/support/theme/twentythirteen
I share your reservations on hacking the “get_header()” function, have you looked for a hook function that can override this ?
Hi Ross.
I have checked the theme settings out. I can change the header image or make it random in the settings but that’s about it. I think this will require some “code” fix somewhere. Not sure if it’s css or php. I assume I can fix it in the theme files though, rather than hacking at WP it’s self, which I really don’t want to do.
As I have created a child theme this should not be a problem. I just don’t know enough about themes or WP to work out how as yet.
Not sure about hooks. I think I know what they are for, but now sure how or where to use them.
I ahve stated to decode WP, starting with index.php and working my way down the includes but I have a list of 23 included files so far and as yet nothing has been output to the browser. It may take some time to trace and understand the code I think :).
I will take a look at the forum as you suggest.
Thanks for your help.
Rob.
Found it.
Twentythirteen theme
DASHBOARD > Appearance > Header
Half way down the page is a caption on the left: “Remove Image”
And a button “Remove Header Image”, this button will stop the bad css from being put into the header, your customised css can still do its job.
This button “Remove Header Image” is really about removing the theme managed banner image, your image is not of this type.
I have tried this, but unfortunately it seems to remove too much code. Not only is the header removed, but also the space for a header. As such the added css seems to have now where to go and is not shown.
How about renaming the class “.site-header” in your child theme “header.php” file, and in your css, then the code that the theme wants to put out will be ignored.
This is where you would change the class name:
header.php: <header id="masthead" class="site-header"
You will need to copy these into your style.css and use the new name:
css/ie.css:.site-header .home-link {
css/ie.css:.site-header .search-form [type="search"],
css/ie.css:.site-header .search-form [type="text"] {
css/ie.css:.ie7 .site-header {
css/ie.css:.ie7 .site-header .search-form [type="search"],
css/ie.css:.ie7 .site-header .search-form [type="text"] {
role="banner">
inc/custom-header.php: .site-header {
inc/custom-header.php: .site-header .home-link {
rtl.css:.site-header > a:first-child {
rtl.css:.site-header .search-field {
You will need to copy and customise these:
style.css:.site-header {
style.css:.site-header .home-link {
style.css:.site-header .site-title:hover {
style.css:.site-header .search-form {
style.css:.site-header .search-field {
style.css:.site-header .search-field:focus {
style.css: .site-header .search-field {
style.css: .site-header {
style.css: .site-header .home-link {
The tactic here is that if you can’t go through you might be able to go around.
Ross,
Thank you so much. That has cracked it. I just need to sort out the header heights and I think I’m up and running.
I would never have got this far without your help.
Thank you so much.
