Ready to get started?Download WordPress


[resolved] How to twentytwelve wide frontpage image? (9 posts)

  1. Kaplaink
    Posted 9 months ago #

    Hey guys

    Maybe my search terminology is not correct but I can’t find threads explaining how I can widen the frontpage main image to go all the way across the widget area i.e. pushing the widget area down to start below the image (almost like the twenty eleven).

    My only silly attempt has been to increase the width of the image but it remains with the same fixed width (and the side widget remains to the left of it.

    This also highlights my current skills in WP 

    Thanks in advance!

  2. WPyogi
    Volunteer Moderator
    Posted 9 months ago #

    You would need make a child theme and then make modifications to one or more theme files - not sure where you want this image to be. Do you mean the featured image? Or header image?

    In any case, start with:


  3. Kaplaink
    Posted 9 months ago #

    (I'm so happy someone replied!)

    I have already created a twenty twelve child theme folder that works.

    What I wish to achieve is this: http://inspiredm.com/wp-content/uploads/2013/02/2-Header-Image.jpg
    I.e. widen the main image on my home page > and have the text area and side widget start immediately below.

    This is my page, where the image is not able to expand across as it's "blocked" by the side widget http://www.wuyesouxunzhe.com/

  4. Aymoon
    Posted 9 months ago #

    The auto size is 960x250 px but as I see that you have to make changes in styling with CSS . You have to change the padding or margins of the "header-image" class to fit the header.

  5. Kaplaink
    Posted 9 months ago #

    sorry to be thick-headed but can you advice in a bit more details (please)?

    Do you know where exactly it is I need to change it?

    Also what about widget are, don't I need to specify that this area should be "moved down"?

  6. esmi
    Theme Diva & Forum Moderator
    Posted 9 months ago #

    Try using Firefox with the Firebug add-on for this kind of CSS troubleshooting. Or use whatever developer tool is available in your web browser.

  7. Kaplaink
    Posted 9 months ago #

    Dammit :) I thought this would be a simple change of some dimension in a couple of templates, as I see quite a few twenty twelve sites using this full width image and with text and widget below

  8. Kaplaink
    Posted 9 months ago #

    I'm struggling guys! please help :)

    I have installed firrbug and when hovering over the sidebar area I can see it belongs to the secondary widgit (last line) in below html.

    My question is, where do I find this in my php files and what should I amend to actually move it down?

    <body class="home page page-id-346 page-template-default custom-background styles custom-font-enabled single-author">
    <iframe id="WEIBO_STK_LOGIN_IFRAME" name="WEIBO_STK_LOGIN_IFRAME" src="http://widget.weibo.com/public/login_Proxy.html" style="display: none;">
    <div style="position: absolute;">
    <iframe id="sina_anywhere_iframe" style="display: none;">
    <div id="_GPL_e6a00_parent_div" style="position: absolute; top: 0px; left: 0px; width: 1px; height: 1px; z-index: 2147483647;">
    <div id="page" class="hfeed site">
    <header id="masthead" class="site-header" role="banner">
    <div id="main" class="wrapper">
    <div id="primary" class="site-content">
    <div id="secondary" class="widget-area" role="complementary">

    [Please post code & markup between backticks or use the code button. Your posted code may now have been permanently damaged by the forum's parser.]

  9. Kaplaink
    Posted 8 months ago #

    Sorry I was stupid. I just had to insert a header image. That did the job, lol.

    I thought the header image was going to be inserted above the menus and not below.


You must log in to post.

About this Topic