Customizing a WordPress Theme is becoming very popular. Inserting images, text formatting and style change make a blog more suited to your purposes. I am using Template Monster’s WordPress Theme #11732 here as the example.

Goal: Replace the picture situated in the centre above in WordPress Theme #11732. Move the background image to the centre box, change the color of the main text, links and headlines in accordance with design changes.

The Image Replacement

1) The picture under the headline in this template is not a separate element, to replace it you must open the file webbl.psd located in template_11732_d3tG1IGD00A8411CN6Vq\sources_UWq1EGL4DS\sources\psd\ using graphical editor Adobe Photoshop webbl.psd, and edit it in the following way: Insert a different picture under the headline and increase the height of the whole upper template part in accordance with sizes of the picture; - save «slice» header (header.jpg), increasing its dimensions in accordance with what is necessary.

2) Making corrections in style.css: The height of the blocks Top and Header should be corrected in file style.css (template_11732_d3tG1IGD00A8411CN6Vq\theme85\ style.css) since representation of the upper template part is defined by the blocks Top and Header in header.php (template_11732_d3tG1IGD00A8411CN6Vq\theme85\header.php), and because new picture sizes have been increased: .top {
background-color:#250B1E;
vertical-align:top;
width:100%;
height:324px; /*new block height*/
/*height:292px;*/ /* previous block height */
}
.header {
background:url(images/header.jpg) left top no-repeat;
vertical-align:top;
width:766px;
height:324px; /* new block height */
/*height:292px;*/ /* previous block height*/
text-align:left;
}

3) Text color and text positioning should be changed in accordance with design changes.
We should change positioning for “title� in file style.css:
.co_name {
vertical-align:top;
padding:55px 165px 0px 235px; /*new arrangement*/
/*padding:8px 165px 0px 192px;*/ /*previous arrangement*/
}
Change print color for “title�:
.co_name a {
color:#FFFFFF; /*new color */
/*color:#000300;*/ /*previous color*/
text-decoration:none;
line-height:53px;
}
.co_name a:hover {
color:#FFFFFF; /*new color*/
/*color:#000300;*/ /* previous color */
text-decoration:none;
}
Change print color for “subtitle�:
.slogan {
color:#FFFFFF; /* new color */
/*color:#A41B93;*/ /* previous color */
padding:0px 0px 0px 0px;
}

Background Image Addition

The background image for the center box of the template will be the same picture that we have inserted into the upper template part, but we will make this picture in Adobe Photoshop almost gauzy. We should write for the class “cent� in the file style.css

(template_11732_d3tG1IGD00A8411CN6Vq\theme85\ style.css) the following:
.cent {
vertical-align:top;
min-height:100%;
display:table-cell;
width:438px;
background-image:url(images/apache2.jpg); /*background image*/
background-repeat:repeat; /*iteration and arrangement of the background image*/
}

In connection with the background changes in the center box from white to colored, graphical design elements in this box should be transformed in Adobe Photoshop to gif image format on the gauzy background. Image head_bg.jpg has been changed to
head_bg.gif, image li_bg2.jpg to li_bg2.gif, and image hr3.jpg to hr3.gif. We should change the names of both pictures first to new names accordingly in the archive.php files, (template_11732_d3tG1IGD00A8411CN6Vq\theme85\ archive.php), index.php

(template_11732_d3tG1IGD00A8411CN6Vq\theme85\ index.php), and in file style.css
.content_txt li {
list-style:none;
padding:0px 0px 0px 9px;
margin:0px 0px 0px 0px;
/* background:url(images/li_bg2.jpg) left top no-repeat; */
background:url(images/li_bg2.gif) left top no-repeat; /*changed li_bg2.jpg �½�°

li_bg2.gif */
vertical-align:top;
line-height:18px;
/*color:#444D63;*/
color:#000000;
}

We can change the grey color of the decorative bands/ledges to a color corresponding to the new background image: in file tyle.css .left2{
vertical-align:top;
display:table-cell;
width:266px;
background-color:#C79DC2; /*new color*/
/*background-color:#F5F5F5;*/ ; /*previous color*/

}
.line2 {
vertical-align:top;
/*background-color:#D7D7D7;*/ /* previous color */
background-color:#C79DC2; /* new color */
line-height:2px;
border:0px;
}
.line1 {
vertical-align:top;
/*background-color:#ECECEC;*/ /* previous color */
background-color:#C79DC2; /* new color */
line-height:5px;
border:0px;
}

We can change the print color to something more suitable: in the file style.css For classes «body», «. body», «a», «a:hover», «.head», «.head strong», «.comment», «.comment a», «.comment a:hover », «.content_txt a », «.content_txt a:hover »,
«.content_txt li», «.content_txt ul li a», «.content_txt li a:hover», «h3» write color
(color:#000000;) instead of the current one; write color:#7F2F75 for class «.head a» and
«.head a:hover»..

The elements of the background images that represent two vertical bands with shadow should be removed from the lower template part to preserve design integrity (but without removing them from the right and left boxes). To do this you can write in a white background color in file style.css for the class “footer�:

.footer {
vertical-align:top;
width:766px;
height:40px;
background-color:#FFFFFF; /*white background color*/
}

Done

Jerkin’ Your Chain,
Arthur Browning