Blogging Your Church with WordPress:– Tweaking a theme
This is the latest in a series on Blogging your church with WordPress. If you are following, then I’m jumping a few steps, but I have been getting a regular stream of requests from WP newbies about how to customize and edit my WordPress themes.
All themes are slightly different but the principles are the same. So by way of example, lets take my latest theme EPSILON and customize it.
Before you start
Before you start it is worth making sure you have a backup copy of your theme. All themes are found in the wp-content/themes/ folder on your host. To upload new themes or files you will need to use an ftp client or your host’s file manger.
You might also want to consider doing this on a test installation of WP if your site is already live and receiving lots of visitors.
Editing a theme
The only file we are going to edit in this tutorial is the style.css file. All themes use a style.css file to define how the theme will look.
You can make changes to this file either on your own computer using notepad or a more fancy text/code editor. Or you can edit the file directly online using the Theme Editor in the dashboard.
Changing the picture – easy way
The picture of the pathway is located at images/headerpicture.jpg in the theme’s folder. It is 470 pixels wide and 285 pixels high. So grab your favourite photo and use your photo editing software to crop and re-size an image to fit these dimensions. Save as headerpicture.jpg, and upload to the images folder.
Refresh your browser and view the site with your customized image.
Changing the picture – smart way
Now of course the easy way means you loose the old picture. You could instead change one line in the CSS file to point the theme at a different image.
Save your new image as headerpic2.jpg and upload to the images directory.
In the Theme Editor, find the line that refers to the headerpicture image:
div#extra{
height:285px;
background: url(images/headerpicture.jpg) no-repeat left;
margin-left: 7px;
clear:both;
margin-right: 7px;}
and change the background line to:
background: url(images/headerpic2.jpg) no-repeat left;
Click the Update File button to save these changes and View Site.
Changing the logo
A similar process is involved in changing the logo image. This time the image file is continerbgtop.jpg. And it looks like this:
You can edit this image in your photo editor, replacing just the logo part of the image. You must make sure the edges and dimensions of the image are preserved to keep the look of the theme.
Something like:
The line in the CSS file that uses this image is:
div#header{
height: 110px;
position:relative;
background: url(images/continerbgtop.jpg) no-repeat top;}
Upload your new image to the images folder using the same name or edit the css.
Changing title text properties
Now lets change the properties of the blog title header.
This is defined by this statement in the CSS file:
h1 {
font-size: 2.6em;
line-height: 1.3em;
color: #666;
font-family: Georgia, serif, Times, “Times New Roman”;
text-transform: capitalize;
letter-spacing: -1px;}
h1 a{
color: #666;
border-bottom: 0em none;
display: block;}
The two properties you may want to change are color and font-size. Try changing color to #3366CC (blue) and font-size to 3em. You must change the color in the h1 a{..} statement since the title is an anchor too.
You might like to play around with colors here.
Changing other heading text properties
General settings for all headers are define in this statement:
h1, h2, h3, h4, h5, h6 {
font-family: “Trebuchet MS”, Trebuchet, Verdana, Arial, Helvetica, sans-serif;
font-size: 1.6em;
font-weight: normal;
padding: 0em 0em 0em 0px;
margin-top: 0.8em;
margin-bottom: 0.5em;
color: #d44944;
text-transform: uppercase;
}
All headings apart from the title are in uppercase. If you don’t like this you can remove the line:
text-transform: uppercase;
Update File and refresh your browser to view your customized design. It should look something like this:
If you want to go further with editing CSS or even to try producing your own theme from scratch the following book is simply the best book on CSS.
More posts in this series:
- Blogging Your Church with WordPress:– Getting Started
- Blogging Your Church with WordPress:– Posts and Pages
- Blogging Your Church with WordPress:– Tweaking a theme
- Blogging Your Church with WordPress:– Managing images and photos
- Blogging Your Church with WordPress:– Choosing a Theme
- Blogging Your Church with WordPress:– Calendars & Events
- Blogging Your Church with WordPress:– Podcasting your sermons
- Blogging Your Church with WordPress:– Adding a map
What a great tutorial!
I’m using Epsilon at http://www.hollisbible.morningstarmedia.org/wordpress and have enjoyed tweaking it. I have a question about the use of static front page with the theme. For some reason, when I set it up for my home page as static front, and the blog (news) page, the formatting changes on the news page. Nothing has changed… any ideas?
If you are referring to the weird fonts, it is because your posts are full of font tags. This has nothing to do with the theme and often happens if you cu and paste from Word or similar. You need to paste raw text, without formatting.
Cool, thanks Tim, I did correct these.
My header picture went missing for some reason! Gotta figure that out next.
The new site is at:
http://www.hollisbible.org/wordpress
Thanks again!
Hi, I went a little more complicated here … changed some colors and logo image … (needs some adjusting, obviously). … need to fit the website name a little better there as well. I’m trying to change the images and captions on the images/gallery on Upsilon … using Firefox CSS editing tools, I see stylesheets, that I can’t find under theme editor however … without a clue as to handle this gallery, although it is very neat. I did change the 3 images that are there, simply by replacing the ones named. Any advice? I’ve been to smoothgallery site, and it didn’t compute. Advice on the rotating images and captions? Thanks!
Sorry about that. I found all the code entries mentioned at smoothgallery’s site, but not “myGallery”, namely:
Item 1 Title
Item 1 Description
Item 2 Title
Item 2 Description
So I can’t change the elements. Also the captions or the links are specified where? as when you show carousel and arrows, you have your edited captions in there. I have tried to turn off captions (carousel or links) and retain the timed slideshow to no avail.
function startGallery() {
var myGallery = new gallery($(’myGallery’), {
timed: true,
showArrows: false,
showCarousel: false
});
}
window.onDomReady(startGallery);
Arggh! Here, I’ll try again!
div id=”myGallery”
div class=”imageElement”
Item 1 Title
Item 1 Description
a href=”mypage1.html” title=”open image” class=”open”
img src=”images/brugges2006/1.jpg” class=”full” /
img src=”images/brugges2006/1-mini.jpg” class=”thumbnail” /
div class=”imageElement”
Item 2 Title
Item 2 Description
a href=”mypage2.html” title=”open image” class=”open”
img src=”images/brugges2006/2.jpg” class=”full” /
img src=”images/brugges2006/2-mini.jpg” class=”thumbnail” /
Done! (Although I do have a problem with editing out certain text, but worked around it!)
Hi Tim, I know it’s off topic, so feel free to delete this, but I’ve searched the Wordpress Support Forum and can’t find how I can set a theme to display this Comment form ‘Leave a reply’ after each post, ie. an open box like this you have inviting comments? I think it’s very inviting and encourages interaction. Any suggestions please? Thanks, Andrew
PS. the site is at http://www.anamchara.org.uk/andrew
It is but it all themes do this and actually your site does have a comments field at the end of the post. You must be on your posts single page (not home). It can be turned off in the Dashboard, but by default comments are on.
OK, I get it thanks - what I want to do then is have the front (home) page as a post single page of the latest entry so that Comments Form appears underneath. How do I do that please? Andrew
Actually what you need to do is edit the index.php file in the theme you are using and add the code that inserts the coments stuff. It is probably just one line of code that calls the comments template. Copy and paste from your single.php file.
Is there a way of locking the header buttons to one size in Upsilon rather than according to word length?
You probably just need to set width to some value for element in question. But, be careful of the IE box model. If you give something width, don’t use padding.
Hi Tim,
I’m attempting to setup a site using Alpha. Is there an easy explanation on how to change the width of the main menu buttons? Currently, my buttons are appearing on two lines and overlapping each other. Everything I’ve tried seems to make it worse.
I’m a relative novice at editing css code. Thanks for your help.