texified

[Note: I often change the blog them about, so I may not be currently using Autumn Almanac]               I’ve been fiddling around with my blog theme.  This particular theme is called Autumn Almanac by the Cloisters (Mina).  I love everything he does, all his themes and layouts fit my likes and dislikes very closely.  I really like the Autumn Almanac theme, but I just wanted to change the photograph at the top of the pages and use one of my own photographs.  Since I am ignorant about such things, it has taken me a while to figure the danged thing out.

It was very simple of course once you knew what to do  (isn’t everything?).

1. First I had to find out where in the code this was controlled.  I found by a process of elimination that it was located in the Stylesheet (style.css).  When I clicked on Editor under the Appearance section on the dashboard, it automatically opened up to the Stylesheet (style.css).
2. Next I had to scroll down to the Header section (/***** HEADER *****/).
3. The very first part under the Header section has the pertinent area; it looks something like this:   #header { float: left; width: 1000px; height: 250px; background: #e0dcc5 url(images/header.jpg) no-repeat; padding: 0; margin: 0 auto 0 auto; }
4. The photograph for the header is shown in this location: url(images/header.jpg).  I guess that I could have uploaded the photograph that I wanted to put in the header to the directory, but I just did the following
5. I uploaded the photo that I wanted to put in the header by clicking on Add New under Media in the Dashboard and followed the directions (very simple) on how to upload a photo.  I thought that by putting the photo here, it would make it more convenient to use it in different themes.  If I had put the photos in the theme directory, I think that I would have to reload the photos each time I changed themes.
6. Then I copied the position of the photograph (highlighted and ctrl-c’d, or even better right click and click copy photo location), and then I pasted the position into the area between the parentheses: “url(images/header.jpg),”  so that it now shows this: “url(http://texafied.com/blog/wp-content/uploads/autumnleaves.jpg).”  If you right click on the photo in the library and copy the location, you should delete the pixel dimensions of the thumbnail; otherwise the photo in the banner will be just the thumbnail dimension.
7. In other words you put the position of the photograph that you want to display in the header between the parentheses.

So now the photograph at the top of this page is one of my own that I took last autumn.  I modified my photograph with a simple photo editor before uploading to my site.  I made it long and narrow, about 1000 by 250 pixels.  If you don’t do this, when you put it into the banner position there will be only a small area of the original photograph that is displayed. As you can see by the code above (width: 1000px; height: 250px), you can modify the size of the photograph in the header.

Once I inserted my own photograph, I found that my font on the header blended in with the back ground, so I had to change the font color.  You will find this controlled by the following in the same header section:    #header h1 a { text-decoration: none; color: #ddd7cd; }.  So I found a darker color that I liked by googling Html color code and finding a dark brown color: #610B0B, which I inserted in place of the above code.  This did the trick.

I assume this procedure that I have outlined is similar for other themes, and I look forward to changing the themes around to fit my preferences.

NOTE: I HAVE FURTHER MODIFIED THE ABOVE SO EVERY TIME YOU CLICK ON A DIFFERENT PAGE OR REFRESH, IT WILL LOAD A NEW PHOTOGRAPH.