Vertical Center in Widgets

  • Candi

    #4992

    I need to center images vertically on the widgets but cannot figure out how to do so. I am not HTML literate and cannot find where to go in the editor to add the top 50% bottom 50% or whatever I need to do. I have centered horizontally fine. Here is the site so you can see the issue. This client is adamant that it be centered.

    http://american-hit-tek.com

    Candi

    #30191

    Oops.. it is http://american-hi-tek.com

    Also can you recommend an easy plugin that will allow pictures to be enlarged when clicked on but do not take you to another page. I have a thickbox I am using but then I cannot have the thumbnails different on each page.

    Josh

    #30192
    Quote:
    I need to center images vertically

    You can wrap the image in a class and define it’s CSS attributes:

    HTML

    <div class="vertical_align">
    <img src="PATH TO YOUR IMAGE" />
    </div>

    CSS

    .vertical_align {
    padding-top: 10px;
    padding-bottom: 10px;
    }

    Then just change the amount to your liking.

    Quote:
    an easy plugin that will allow pictures to be enlarged when clicked

    Thickbox:

    http://wordpress.org/extend/plugins/auto-thickbox-plus/

    Shadowbox:

    http://wordpress.org/extend/plugins/shadowbox-js/

    Candi

    #30193
    <DIV ALIGN=CENTER><nsbp><a href="http://american-hi-tek.com/bumper-step/"><div class="vertical_align">
    <img src="http://american-hi-tek.com/wp-content/uploads/2012/06/American-Hi-Tek-Xtreme-Bumper-Step-1-Lg.jpg" alt="America Hi Tek Extreme Bumper Step" /></DIV></a>

    So is this correct for the html in the widget?

    I have no idea where to put the css part. When I go to editor there are multiple choices on the bottom that have css:

    Stylesheet

    (style.css)

    Visual Editor RTL Stylesheet

    (editor-style-rtl.css)

    Visual Editor Stylesheet

    (editor-style.css)

    RTL Stylesheet

    (rtl.css)

    style-bbpress.css

    style-light.css

    style-print.css

    Which do I go to and where in it do I go.

    Candi

    #30194

    Well that did not work to send you, lets try again:

    This is what I have

    <DIV ALIGN=CENTER><nsbp><a href="http://american-hi-tek.com/bumper-step/"><img src="http://name of the img location" alt="America Hi Tek Extreme Bumper Step" /></DIV></a>

    Is this what I need?

    <DIV ALIGN=CENTER><nsbp><a href="http://american-hi-tek.com/bumper-step/"><div class="vertical_align">
    <img src="PATH TO YOUR IMAGE" /></div>" width="195" height="195" alt="America Hi Tek Extreme Bumper Step" border="0"/></DIV></a>

    I have no idea where to put the css part. When I go to editor there are multiple choices on the bottom that have css:

    Stylesheet

    (style.css)

    Visual Editor RTL Stylesheet

    (editor-style-rtl.css)

    Visual Editor Stylesheet

    (editor-style.css)

    RTL Stylesheet

    (rtl.css)

    style-bbpress.css

    style-light.css

    style-print.css

    Which do I go to and where in it do I go.

    Mod

    Kenneth John Odle

    #30195

    Put code in between backtick (

    Code:
    `

    ) characters. It’s usually located above the Tab key on your keyboard. http://bit.ly/backtick

    If you don’t enclose code in backticks, the forum software parses the code, causing the issue you had above. I have fixed this for you.

    You have improperly nested elements. Your tag structure is:

    <div>
    <a>
    </div>
    </a>

    It should look like this:

    <div>
    <a>
    </a>
    </div>

    I recommend you look at some of the HTML lessons at http://www.w3schools.com/html/default.asp if you need more information on this. They have good information on CSS and PHP, as well.

    Quote:
    I have no idea where to put the css part. When I go to editor there are multiple choices on the bottom that have css:

    If you are not using a child theme, put this code in Graphene’s Custom CSS Option: Graphene Options >> Display Options >> Custom CSS (all the way to the bottom).

    Candi

    #30196

    The above works in the first sidebar but when I add it to the second sidebar it sends the content and the first sidebar to the bottom of the page. Any ideas?

    I have the following layout:

    sidebar 2 – content – sidebar 1

    Josh

    #30197

    If your widget area gets shifter to the bottom of the page… it’s usually because of a stray div tag.

    Go back to each widget and make sure for every opening <div> tag… there is it’s corresponding closing </div> tag.

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

You must be logged in to reply to this topic.