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

  1. Kaplaink
    Posted 3 years 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
    Forum Moderator
    Posted 3 years 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 3 years 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 3 years 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 3 years 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
    Forum Moderator
    Posted 3 years 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 3 years 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 3 years 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 3 years 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.

Topic Closed

This topic has been closed to new replies.

About this Topic