I was going to go and take a photo to replace the header image of the Twenty Thirteen WordPress 3.6 theme but I wasn’t quite happy with the size of the header image.
The header size of the theme just seemed too large, and too especially high when viewing with smaller width browsers and devices.
So, instead of going to take a photo, I spent the time going through the template files to find out how to reduce the height of the image.and how to move the site title and description text so that it centred when I reduced the height of the header image.
I also went through the code to find out how to move the site title and description text so that it centred when I reduced the height of the header image.
The first place I looked was in the style.css file where I discovered that the height of the theme header image and the position of the site title and description can be changed.
To Reduce The Height Of The Twenty Thirteen Theme Header:
The changes below to the style.css file will reduce the height of the theme header image from that of the default height.
So, download your style.css file from the /wordpress/wp-content/themes/twentythirteen directory, and make the following changes.
Change this:
.site-header .home-link {
color: #141412;
display: block;
margin: 0 auto;
max-width: 1080px;
min-height: 230px;
padding: 0 20px;
text-decoration: none;
width: 100%;
}
To:
.site-header .home-link {
color: #141412;
display: block;
margin: 0 auto;
max-width: 1080px;
min-height: 130px;
padding: 0 20px;
text-decoration: none;
width: 100%;
}
Note: the min-height value has been changed from 230px to 130px.
To Vertically Re-center The Title and Description:
Change this:
.site-title {
font-size: 60px;
font-weight: bold;
line-height: 1;
margin: 0;
padding: 58px 0 10px;
}
To:
.site-title {
font-size: 60px;
font-weight: bold;
line-height: 1;
margin: 0;
padding: 17px 0 10px;
}
Note: the padding values have been changed from 58px 0 10px to 17px 0 10px.
That should do it. Now save the style.css file and upload it back to the WordPress twentythirteen theme directory.
Leave a Reply