WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] [closed] Catch Box Theme- how do you change the size of header image (36 posts)

  1. tjditty
    Member
    Posted 1 year ago #

    I want to increase the size of the header image. I adjusted the code in the functions.php file but do not see the change. Am I missing some code change?

    Thanks for your help.

  2. Catch Themes
    Member
    Posted 1 year ago #

    Hi Tjditty,

    Can you post the Site URI so that I can check in what you are trying to do?

    Regards,
    Sakin

  3. tjditty
    Member
    Posted 1 year ago #

    I figured out how to get the header image adjusted. What I really need now how to reduce the height of the header to eliminate some of the white space. Thanks much!
    http://stopcommoncore.com/

    Tanya

  4. meck4
    Member
    Posted 1 year ago #

    Hi - I was wondering how to do the same thing...

    What file did you modify in the theme?

    Thanks,
    Marc

  5. tjditty
    Member
    Posted 1 year ago #

    Marc,
    I found this code and placed it in the Custom CSS Styles box.
    remove_filter( 'HEADER_IMAGE_WIDTH', ' catchbox_header_image_width' );
    remove_filter( 'HEADER_IMAGE_HEIGHT', ' catchbox_header_image_height' );

    define( 'HEADER_IMAGE_WIDTH', apply_filters( 'catchbox_header_image_width', 840 ) );
    define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'catchbox_header_image_height', 100 ) );

  6. meck4
    Member
    Posted 1 year ago #

    Thank you!

  7. Catch Themes
    Member
    Posted 1 year ago #

    Hi Tiditty,

    You did a great job. That is one of the best way to do it.

    Either, you add the code in the Custom CSS box or build a child theme and do the customization.

    For height/spacing adjustment in ht header. You can use the following css and adjust accordingly:
    /* For Top Spacing Padding */
    #branding hgroup {
    padding-top: 1.5em; /* You can increase or decrease it as per your need */
    }
    /* For Bottom Spacing Padding */
    #site-logo {
    padding-bottom: 2.5em; /* You can increase or decrease it as per your need */
    }

    Regards,
    Sakin

  8. tjditty
    Member
    Posted 1 year ago #

    Sakin,
    I am very new to WordPress and haven't ventured far enough out to make a child theme! I added the code for the header to the custom css box. I adjusted to .50 and do not see any change.

    Any additional help is very appreciated.
    Tanya

  9. Catch Themes
    Member
    Posted 1 year ago #

    Hi Tanya,

    Can you send me your wordpress access through our contact form in http://catchthemes.com and mention about the changes and then I will look in details.

    Regards,
    Sakin

  10. webmaster1105
    Member
    Posted 1 year ago #

    hi tjditty

    I did it here on http://osplugs.com/.

    go to header.php.

    find <h1 id="site-logo">

    change it to <h1 id="site-logo" style="padding-bottom : 0.5em;">.

  11. tjditty
    Member
    Posted 1 year ago #

    Thanks much for your help Sakin.
    Tanya

  12. moeFilm
    Member
    Posted 1 year ago #

    This was a very helpful thread. How about this... I notice the margin below my logo is different on the homepage and other pages. Othervpages seem to be pulling from a different template/php page. Even tjdiddy's site does this.

    Can you help?
    My site is http://www.thefilmcircuit.com/TFC

    Thx

  13. Catch Themes
    Member
    Posted 1 year ago #

    Hi moeFlim,

    Please upgrade your theme to the latest version and it will be fixed.
    See this http://wordpress.org/support/topic/theme-catch-box-version-update?replies=10

    Regards,
    Sakin

  14. MCnewBiz
    Member
    Posted 1 year ago #

    Hi there,
    I am building a blog site using Catch Box (love it). However, my header image is 700 x 192. I tried inserting the code below into the css table as per above, but I'm apparently doing something wrong. When I try to upload the image, it's still forcing a crop to 300x100. How do I get around it?

    Site: http://bit.ly/OKdyaH

    REALLY appreciate your help!
    - M

    Code used: remove_filter( 'HEADER_IMAGE_WIDTH', ' catchbox_header_image_width' );
    remove_filter( 'HEADER_IMAGE_HEIGHT', ' catchbox_header_image_height' );

    define( 'HEADER_IMAGE_WIDTH', apply_filters( 'catchbox_header_image_width', 700 ) );
    define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'catchbox_header_image_height', 192 ) );

  15. Catch Themes
    Member
    Posted 1 year ago #

    Hi MCnewBiz,

    You don't need to edit or customize any code. Just use the latest version of Catch Box .

    Regards,
    Sakin

  16. Zentana
    Member
    Posted 1 year ago #

    Thank Sakin (Catch Themes) for help

    I use catch theme and develop website.

    My site :http://downloadhoo.com

  17. MissTechie
    Member
    Posted 1 year ago #

    Hi,

    I am trying to use the suggestions here to upload a bigger header image than 300 x125 px.

    I am using catch box 1.5.1 (latest version to date).
    Under 'Theme Option', as suggested here,I have pasted in the custom css box:


    remove_filter( 'HEADER_IMAGE_WIDTH', ' catchbox_header_image_width' );
    remove_filter( 'HEADER_IMAGE_HEIGHT', ' catchbox_header_image_height' );

    define( 'HEADER_IMAGE_WIDTH', apply_filters( 'catchbox_header_image_width', 900 ) );
    define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'catchbox_header_image_height', 405 ) );

    My image is 900 x 405. I can use a smaller one but 300 x 125 is too small.

    However, when I upload the image via the 'Header' menu, it is still cropping to 300 x125 px

    Have I missed something?

    many thanks for your help.

    MT

  18. Catch Themes
    Member
    Posted 1 year ago #

    Hi MT,

    Don't edit anything in the latest version. Latest Version of Catch Box supports flexible header image size. Our recommended width is 300 pixels and height is 125 pixels but you can setup with any size.

    As soon as you upload the header image from the Appearance -> Header. You will go to Crop Header Image Screen. Where you can extend the height and width with the help of your mouse drag. After you get the size you want. Then click on "Crop and Publish" button. That's it.

    Regard,
    Sakin

  19. MissTechie
    Member
    Posted 1 year ago #

    thanks Sakin.
    for some reason, this seems to work today.
    yesterday I was doing what you suggest, ie just load the image, and it was not showing the full blown image but cropping for me.

  20. shirley55
    Member
    Posted 1 year ago #

    You all seem to be able to upload images so could any one help me please. I've upload an image into the right folder and can see it in the C panel but cannot access it or see it in the header image on live preview.

  21. yorgo67
    Member
    Posted 1 year ago #

    Hi Sakin,

    I followed your suggestion to MT about not changing the code and instead Crop the Header Image Screen. My image size is 525 px x 228 px and it STILL shrunk it down to fit the 300x100. Is there a way to maintain the original size from 525 x 228?

  22. Catch Themes
    Member
    Posted 1 year ago #

    @yorgo67: After you upload the image. You need to crop the portion you want. If you just do the save then it will crop it down to 300x100. That is why you need to select the full portion of the image that you’d like to use for the header, then click Crop and Publish.

  23. Nailah Ali
    Member
    Posted 1 year ago #

    Sakin,

    When you say "crop" do you mean scale the image to the size you want? I'm totally confused on how to resize my image. :/

  24. Catch Themes
    Member
    Posted 1 year ago #

    Hi Nailah,

    You can check this http://en.support.wordpress.com/themes/custom-header-image/ . It's just using your mouse to crop the image of the size you want.

  25. Aazoff
    Member
    Posted 1 year ago #

    @Sakin, I also am trying to adjust the header so there is no white space around my image. I tried the CSS code you mentioned above and played with the values but I don't see any change. I also tried webmaster1105's code for the header file, also no change. The result I'm looking for is my current header image with no white space, so the header block takes up less space above the fold in my blog: http://heartsleevesblog.com. Thanks in advance! It's a great theme!

    Ariel

  26. Catch Themes
    Member
    Posted 1 year ago #

    @Aazoff: Hi Ariel, I look at you site and you should add the following css in "Custom CSS" box

    #branding hgroup {
        margin: 0;
        padding: 0;
    }

    and then upload the larger header image.

  27. Aazoff
    Member
    Posted 1 year ago #

    Thanks for the quick reply! I just pasted that in, but to clarify: do I add that to the CSS I had before or is that all I need? Will the header space then just conform to whatever image size I use?

    A related issue: when I've been editing the Catch Box theme today and just now when I made this change, the server seems to cut out because nothing but the front dashboard panel will load - everything else brings up a "no data received" error. Is that a problem with my host or the theme?

    Thanks!
    Ariel

  28. Catch Themes
    Member
    Posted 1 year ago #

    @Aazoff: This css has nothing to do with the server issue. It's just a design modification. So, check your site. Yes, you can just remove the other custom css and add the one I gave in.

  29. Aazoff
    Member
    Posted 1 year ago #

    Thanks! That worked. Can you tell me the exact dimensions I'll need to get rid of all of the white space? Sorry I'm very new at this. Is it possible to adjust the height so it's even shorter?

    Thanks again.

  30. Catch Themes
    Member
    Posted 1 year ago #

    @Aazoff: It's total width is 1000px. Yes you can upload the image of any height.

Topic Closed

This topic has been closed to new replies.

About this Topic