Metric Theme Middle Image Home Page

Community Forums Forums Design Tips and Tricks Metric Theme Middle Image Home Page

This topic is: not resolved

This topic contains 9 replies, has 2 voices, and was last updated by  julesonline 1 year ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #34693

    julesonline
    Participant
    Post count: 24

    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

    #34863

    Doak Heggeness
    Participant
    Post count: 140

    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

    #34865

    Doak Heggeness
    Participant
    Post count: 140

    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

    #34921

    julesonline
    Participant
    Post count: 24

    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

    #34924

    julesonline
    Participant
    Post count: 24

    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

    #35105

    Doak Heggeness
    Participant
    Post count: 140

    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

    #35107

    julesonline
    Participant
    Post count: 24

    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

    #35395

    Doak Heggeness
    Participant
    Post count: 140

    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

    #35479

    julesonline
    Participant
    Post count: 24

    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

    #35506

    julesonline
    Participant
    Post count: 24

    WOO HOOO finally got it to work!!! I fell across this in the forum http://www.studiopress.com/forums/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 :)

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.