Metric Theme Middle Image Home Page

[julesonline]

Hi All 🙂

I would like to know please how i can place a 960px X 83px image on the front page of the Metric theme just above the three middle widgets.

Thank you so much!

Regards

Jules

[Doak Heggeness]

You need to:

1) Register a new 'widget area' in the functions.php file. Just replicate one that is there, but change the 'name' & 'id' to want ever you want...ie 'Home Full Image' for example.
2) Add the new widget to the home.php after .

Use in the text widget to reference your image.
3) Add the #home full image style to the Style.css. You can probably copy the #home top bg code as it is full width.

---

Doak Heggeness, WordPress Development | Website

[Doak Heggeness]

2) Add the new widget to the home.php after #home-top-bg div. Copy the 'Home Top Right' but rename it.

Use to add the image to the 'Text' widget.

For some reason I cannot include the code in this post.

---

Doak Heggeness, WordPress Development | Website

[julesonline]

Hi Doak,

Thank you so much! I am lost on the home.php which code and what part where please as I am sure i am going to pick the wrong coding pieces and place in all the wrong area 🙁

Regards

Julie

[julesonline]

Well after try try try again 🙂 have it there but for some reason it is hard right not centred http://smallbusinessmarketingfirm.com.au/  I have mucked up some coding somewhere but no idea where sorry.

Regards

Jules

[Doak Heggeness]

Well it appears the widget is there. You are almost there. It needs to be styled. Go to line #774? ( #home-middle ) in the style.css and use the same declarations for #home-full-image ( you need to add this div to the style.css file ). I assume you want the same width, margins...etc.

---

Doak Heggeness, WordPress Development | Website

[julesonline]

Yes Doak, wanted the middle image centered and will be 960x83px. Perhaps i placed the code in the wrong spot as well in style.css ?? I named it as you suggested 🙂 home full image

/***** Home Middle ********************/

#home-middle-bg {
background:;
padding: 20px 0 0 0;
}

#home-middle {
width: 960px;
margin: 0 auto 0;
padding: 0 0 5px 0;
overflow: hidden;
}

#home-middle a, #home-middle a:visited {
color: #7CA513;
text-decoration: none;
}

#home-middle a:hover {
color: #7CA513;
text-decoration: underline;
}

#home-middle p {
margin: 0;
padding: 0 0 10px 0;
}

#home-middle h2 {
color: #444444;
font-size: 16px;
font-family: Arial, Tahoma, Verdana;
font-weight: normal;
margin: 0 0 5px 0;
padding: 0;
text-decoration: none;
}

#home-middle h2 a, #home-middle h2 a:visited {
color: #444444;
text-decoration: none;
text-transform: none;
font-style: normal;
}

#home-middle h2 a:hover {
color: #0067A2;
text-decoration: none;
}

#home-middle h4 {
color: #444444;
font-size: 18px;
font-family: Arial, Tahoma, Verdana;
font-weight: normal;
margin: 0 0 15px 0;
padding: 0 0 10px 0;
border-bottom: 1px solid #DDDDDD;
}

#home-middle ul {
list-style-type: none;
margin: 0;
padding: 0;
}

#home-middle ul li {
list-style-type: none;
margin: 0 0 5px 0;
padding: 0 0 5px 0;
border-bottom: 1px solid #DDDDDD;
}

#home-middle ul ul {
list-style-type: none;
margin: 0;
padding: 0 0 10px 0;
}

#home-middle ul li ul li {
margin: 0;
padding: 5px 0 0 0;
}

#home-middle .widget {
margin: 0;
padding: 0 0 5px 0;
}

#home-middle .textwidget {
margin: 0;
padding: 0;
}

#home-middle .featuredpost .post, #home-middle .featuredpage .page {
clear: both;
}

#home-middle .featuredpost, #home-middle .featuredpage {
clear: both;
}

#home-middle .featuredpost img {
background: #FFFFFF;
margin: 0;
padding: 1px;
border: 4px solid #EEEEEE;
}

#home-middle .user-profile .avatar {
background: #FFFFFF;
margin: 0 0 -5px 0;
padding: 1px;
border: 4px solid #EEEEEE;
}
#home-full-image {
width: 920px;
color: #FFFFFF;
margin: 0 auto 0;
padding: 0 0 0px 0;
overflow: hidden;
}
.home-middle-1 {
float: left;
width: 305px;
margin: 0;
padding: 0 20px 0 0;
}

.home-middle-2 {
float: left;
width: 310px;
margin: 0;
padding: 0;
}

.home-middle-3 {
float: right;
width: 305px;
margin: 0;
padding: 0;
}

Regards

Jules

[Doak Heggeness]

You need to understand want you want to accomplish, instead of blindly copying something. You need to add a new set of selectors ( #home full image ) to your style.css file, since you created a new widget and . You probably want to copy the basic style from the three widgets below, since you probably want them to align the same?

#home-middle {
width: 960px;
margin: 0 auto 0;
padding: 0 0 5px 0;
overflow: hidden;
}

So you need to create...

#home-full-image {
width: 960px;
margin: 0 auto 0;
padding: 0 0 5px 0;
overflow: hidden;
}

You will probably have to adjust the padding to align them.
Any error in syntax and it will not work.

---

Doak Heggeness, WordPress Development | Website

[julesonline]

Hi Doak,

Thank you for popping back to answer. Not sure I understand by your "Copying Blindly" comment ? I do have this in the coding now

#home-full-image {
width: 960px;
color: #FFFFFF;
margin: 0 auto 0;
padding: 0 0 5px 0;
overflow: hidden;
}

So I take it i need to fiddle with the padding. Also and for the life of me I cannot recall how, but i was sure there was another way to add in a new widget or indeed use that area through a plugin (but could be wrong and thinking of something else)

Yes i want to align the new widget center above the 3 widgets home page in the Metric theme.  🙂

Thank you

[julesonline]

WOO HOOO finally got it to work!!! I fell across this in the forum http://www.studiopress.community/topic/how-do-you-create-a-new-widget-area-on-the-homepage/ from there i went to http://www.briangardner.com/welcome-text-widget/ Then copied the entire code in Step 4. Now i just have to alter it to suit what i am looking for 🙂

For anyone else looking at this thread for help, you could follow the same path that Doak has written out as i had the first steps correct but missing where and the entire code to use/place in the last step 🙂 totally missed what was being meant.

Thank you muchly to Doak for helping out and to the lovely anitac who helped out in the thread posted above.

Regards

Julie 🙂

[Author]

Posts