WordPress.org

Ready to get started?Download WordPress

Forums

Leaf
resize header image (25 posts)

  1. Hilding
    Member
    Posted 1 year ago #

    How can I do for resize the header image? I want to enlarge it.
    Actually I tried to change width and height parametres on custom-header.php but it doesn't work.
    I need the header image take all the header space.

    Thanks

    Hilding

  2. tizz
    Member
    Posted 1 year ago #

    Me, too. I've done exactly the same but it doesn't work.

  3. Jason Verdelli
    Member
    Posted 1 year ago #

    Please provide a link and I'll look into this further. Thanks :)

    Jason
    [link deleted - please stop posting that]

  4. tizz
    Member
    Posted 1 year ago #

    Thank you very much but, sorry, I can't provide a link because it's a test site and I don't want the URL to be public.
    In the end I managed to put the full width image in the header, adjusting via CSS, but the problem is that site title and description disappear.
    So, I've done a large image with the title and the description inside, near the logo image, but when I finally managed to position it as I wanted, and the result was good, I realized that the mobile version is cut, because the theme has a logo max 300px wide, not a full width one, so I had to remove everything again.
    I don't know what to do, if not create a logo that includes the title, description and image that fit all into 300px, but I haven't tested it at this time. It would be ugly anyway, 'cause in that way there's a lot of blank space on the right side.
    What a pity, it's an almost perfect theme for me, and the only one I found with nextgen slideshow and pictures lightbox visible also on mobile!
    I don't understand why the author has messed up so much with the header, and why he doesn't left the normal custom WordPress header.
    It seems divided by div and/or table and I can't find no way to clean it up.
    It would be easy and quick, instead of wasting so much time for a thing like that, the header, the first thing in a site. I've lost a lot of hours, yesterday.
    If you want and if you have time, I can provide you the demo theme link, header's CSS are the same I guess, so you can see the original one.
    Thanks for your attention

  5. tizz
    Member
    Posted 1 year ago #

    Solved with an image of 980x190 with custom CSS:
    .site-header {padding: 0.1rem;}
    .site-header img {padding: 0 0 0 70px;max-width:200%;float:left;}
    (float:left; in my case is only to keep the bottom of the image attached with the top border of menu).
    In that way is good on desktop site as before, but also in mobile one, with the difference that logo on the right isn't visible, but at this point I don't care, the important thing is that site title and description are visible.
    Maybe it's not ideal, and I don't know how is in a mobile smaller than Samsung II, or bigger, but that's it.
    If anyone has better solution pls let me know

  6. tizz
    Member
    Posted 1 year ago #

    Of course, values in padding and max-width can be changed according to the requirements
    Also, I noticed that you don't have to click on "skip cropping, etc.." but on "crop, etc..." selecting complete image if you want it wide as it is.

  7. lupi73
    Member
    Posted 1 year ago #

    hi,
    Have you indicated the image size percentage in CSS?

  8. tizz
    Member
    Posted 1 year ago #

    For my header image worked:

    .site-header {padding: 0.1rem;}
    .site-header img {padding: 0 0 0 40px;max-width:190%;float:left;}

    Now image is 909x176

  9. Caroline Ian
    Member
    Posted 1 year ago #

    I also need to change my header size using the same theme. Where exactly did you go? I can't seem to find .site-header.
    I do wish this developers would provide a quick how-to!

  10. Andrew
    Forum Moderator
    Posted 1 year ago #

    Put it in the "Custom CSS" section of the dashboard.
    If that doesn't exist, download and install this plugin http://wordpress.org/extend/plugins/custom-css-manager-plugin/ - Then use the Custom CSS Manager section of the dashboard.

  11. Caroline Ian
    Member
    Posted 1 year ago #

    Hi Andrew, thank you for such a quick response. I now have custom CSS but still no change. I have also gone via Appearance - Editor - custom header.php and changed width and height.
    What am I doing wrong? Ideally I would like my logo to stretch the full width.
    Thanks

  12. Andrew
    Forum Moderator
    Posted 1 year ago #

    I don't think you're editing the correct section of the dashboard, make sure you find a section named "Edit CSS" (from Jetpack plugin) or something like "Custom CSS".

  13. Caroline Ian
    Member
    Posted 1 year ago #

    :( hi, I now have a big nasty black bar across the top telling me to save or all will be lost. I have saved but nothing so deleted the code and saved again.
    I went to CSS stylesheet editor, deleted 'Welcome to Custom CSS' and added this:
    .site-header {padding: 0.1rem;}
    .site-header img {padding: 0 0 0 70px;max-width:200%;float:left;}
    . . . as suggested by Tizz
    Why and what to do?

  14. Andrew
    Forum Moderator
    Posted 1 year ago #

    Can you provide a link to the webpage with the issue?

  15. Caroline Ian
    Member
    Posted 1 year ago #

  16. tizz
    Member
    Posted 1 year ago #

    @ Caroline Ian
    You don't have to install a plugin. You must only go in Custom CSS in your Leaf Options in the backend and try a thing like this:

    .site-header {padding: 0.1rem;}
    .site-header img {padding: 0 0 0 50px;max-width:200%;}

    In this way you see your logo enlarged till more or less the start of your superior header menu
    The padding: 0.1rem is to limit height

    You can take a look on how it is on my website, and you can surely have help to further customization using a tool like Firebug.

  17. Caroline Ian
    Member
    Posted 1 year ago #

    Thank you for the reply but I'm now having even bigger issues with a 404 error on the home page! Hosts not helpful so I guess it's a reset? Do you happen to know what to do? I transferred from one theme to another and changed several pages etc. Host said it's either permalinks or how the site/home URL are configured! Could that be the case and if so where and how do I remedy that?
    I get a repeat in my sites URL when I click on Home (www.crazykindoflife.com/carazykindoflife)

  18. Andrew
    Forum Moderator
    Posted 1 year ago #

    You may need to create a new thread for this new issue.

  19. Eddieadel1234
    Member
    Posted 1 year ago #

    how to remove uploaded images to the header or to reduce their numbers,theme leaf..i have toomany and i need to remove possibly allof them, and upload fesh,new images....nusjournal.com

  20. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    @Eddieadel1234 - looks like you have your own thread on this already -

    http://wordpress.org/support/topic/how-to-remove-existing-images-from-the-header?replies=2

  21. Eddieadel1234
    Member
    Posted 1 year ago #

    No, i do not have it...i have too many,,the number of images,,not the size..it gotta be some way todelete an image..or to remove an image..it can be that if you upload 4 images .they stick there forever..beside if i used the option Random..i don't want some of the images to show on my header..so how i would get rid of them.look at my header now..i have it on Random..i want only Father day images..i have 3 images for Father day..the rest..i do not need to show..it must be a simple answer..delete an image..remove an image..it has to be more simple than ever..and i can't see it..or figure it out..come on u guys...theme leaf..header..too many images..need to remove or delete most or all and start fresh...help....happy father's day...eddie e

  22. easyimage
    Member
    Posted 1 year ago #

    i think you can change your images's width and heigt parameter in order to change your size. but you can also have a software to resize header images vb.net in batch or enlarge images for you.

  23. adiieeeee
    Member
    Posted 1 year ago #

    make sure you add this to your .header or #header:
    max-width: 100%;

    I had the same problem and I was adding this part of the code under my mobile css (@media). I added it to .header from my main css and it worked! :)

  24. Big T
    Member
    Posted 9 months ago #

    Can anyone help me please. I have a header image but I would like to double the header size but dont know how. Theme is HeatMap AdAptive
    http://www.evomxireland.co.uk

  25. youlink
    Member
    Posted 7 months ago #

    you can downsize you image by cropping or resizing or you can enlarge your image with scaling or zooming.
    the quality depends on which image software you choose.
    maybe try some free package first.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags

No tags yet.