WordPress.org

Ready to get started?Download WordPress

Forums

Tonic
Header image resize not working (16 posts)

  1. gombroo
    Member
    Posted 11 months ago #

    Hello,

    is it possible to set my header image responsive on home page and other pages?

    And second question - how can I use widgetized areas? When I put some widgets inside "Home Page Top Area" and "Second Sidebar" areas, nothing really happens...

    Is this theme compatibile with WP 3.6 version?

    Thanks in advance!

  2. c.bavota
    Member
    Theme Author

    Posted 11 months ago #

    The header image is responsive. If you resize your browser window on the demo you will see what I mean:

    http://demos.bavotasan.com/tonic/

    You need to make sure that both of those widgetized areas are actually being displayed. The Home Page Top Area has a checkbox under the Theme Options => Layout panel. The second sidebar will only appear if you have selected a layout with two sidebars.

  3. gombroo
    Member
    Posted 11 months ago #

    Hi,

    the problem is that header image is responsive on every page besides the front one. Even on your demo site the box with "jumbo headline" is flexible but not the image behind it.

    On static pages it works very well like here:
    http://demos.bavotasan.com/tonic/about/page-image-alignment/

    And as for the widgetized area - is it possible to display "image with text" widgets on static pages below the page content?

  4. c.bavota
    Member
    Theme Author

    Posted 11 months ago #

    It responds the same way on every page. You can just see less of it on the inner pages. The background image uses the CSS3 style background-size: cover which will fit the image into the header and shrink/grow accordingly as the the browser window resizes.

    There are no widgetized areas below the page content in Tonic. Though Tonic Pro does have an extended widgetized footer.

  5. gombroo
    Member
    Posted 11 months ago #

    Thank you for the reply!

    It's a little bit confusing or I don't know how to explain it.
    Please take a look:
    http://deviceponsive.com/?url=http%3A%2F%2Fdemos.bavotasan.com%2Ftonic%2F#

    On the first device with full reseolution you can see the whole image. On the smaller ones you can see only a small part of it. It's not responsive,isn't it?

  6. hedgehogsue
    Member
    Posted 11 months ago #

    Hello, I have installed the Tonic theme, and think it looks great, but I have one issue.

    I am trying to change the header image, but only seem to have the option to use no image or the default image. I can't find any way of uploading my own image. If I install another theme I am able to do this using the default WP theme customisation.

    Hope you can help!

  7. c.bavota
    Member
    Theme Author

    Posted 11 months ago #

    @gombroo
    The image is responsive, the problem is that if it would shrink down so that you can see all of it, it would not be tall enough to cover the area it needs to. Hence why it stays so large even on a smaller device.

    @hedgehogsue
    You can't upload a new header image under the Theme Options customizer. This is a WordPress core function and you are required to go to the Header admin page (under the Appearance menu) to upload a new image.

  8. latristesse
    Member
    Posted 11 months ago #

    I want to make the header image the same size on the home page as it is on the secondary pages - how do I do that? The size seems to be hardcoded into index.php but I'm not sure where.

  9. Meghoulihan
    Member
    Posted 11 months ago #

    I'm looking for a similar answer as Latristesse... I have a header on my front page that is a collage of pictures, on interior pages you only see the tops of people's heads....

  10. pamela86
    Member
    Posted 11 months ago #

    I am looking for a similar answer as Meghoullhan. The header is not the same on the interior pages. Can you please change this? This is very very frustrating. I have a headshot as well on the front page. Do I need to upgrade to pro in order for the header image to be the same on all pages? Thanks for your immediate help!!!

  11. ksmith64
    Member
    Posted 9 months ago #

    I have been checking in on this answer as well. I love this theme but I am having the same issue with the header image. I did upgrade to the tonic pro hoping that would resolve the issue but it didnt. The header is not the same on the interior pages when viewed on desktop. But ironically, when viewable on mobile, it is the homepage that is not responsive and the interior pages work.

    I see this similar thread/topic repeated. what are we all doing wrong?? Please HELP!!!!

  12. c.bavota
    Member
    Theme Author

    Posted 9 months ago #

    This will keep the header image full height:

    #header-wrap {
       height: 550px;
    }
  13. pickengrass
    Member
    Posted 8 months ago #

    Can you tell me exactly where I place this?
    #header-wrap {
    height: 550px;
    }
    I am having the same problem. This is my first attempt at a website. I found where it looks like I should do this under Editor>Edit Themes but I see more than 1 location that contains header-wrap.

    thanks

  14. pickengrass
    Member
    Posted 8 months ago #

    Found it. I'm ok for now.

  15. varunluthra
    Member
    Posted 8 months ago #

    I tried creating a page but it's not displaying on the website. Can you tell me a way to show my page that I created without showing Responsive and Twitter tools you put in. Thanks for your help.

  16. shangrila
    Member
    Posted 5 months ago #

    ok, I"m not as tech-savvy as the rest of you fine people...I'd like to have the full size header image but only get the cropped image...please help...in plain english! thank you!

Reply

You must log in to post.

About this Theme

About this Topic