WordPress.org

Forums

Cakifo
[resolved] How to adjust height of header and footer? (12 posts)

  1. tylerbarabas
    Member
    Posted 1 year ago #

    I created a child theme called Cakifo-child, and now I want to adjust the height of the header and footer to be a bit smaller.

    I've tried both adjusting the parent css file, as well as copying the header section of it to the new child css file and editing that. I've tried changing all of the values in the "Layout: header" section, namely in #branding, #site-title, and .flexbox. Changing these values seems to have no effect on the way the browser displays the page.

    Any help?

  2. Tara
    Volunteer Moderator
    Posted 1 year ago #

    - Try using, for example, a tool like Firefox with the Firebug add-on for this kind of CSS work. http://getfirebug.com/ . Help info on Firebug https://getfirebug.com/faq/
    - Newer IE and Chrome also have similar tools
    - Also, check this plugin: http://wordpress.org/plugins/custom-css-manager-plugin/

  3. Jesper Johansen (jayjdk)
    Member
    Theme Author

    Posted 1 year ago #

    Hello,

    Try this:

    // default values - increase or decrease them
    #branding {
       padding-top: 60px
       padding-bottom: 50px;
    }
    
    #footer {
       padding-top: 40px
       padding-bottom: 40px;
    }

    Hope that helps you. If not, feel free to write again.

    If you have any question beside this one, I recommend that you sign-up for Theme support on Theme Hybrid. You'll find a section called "Cakifo" on the support forum.

    - Jesper

  4. tylerbarabas
    Member
    Posted 1 year ago #

    I put that in to my child theme's style.css, but changing these values still has no effect. I even tried setting them to extremely high & low values, but no change. Please let me know if you have any other suggestions. This theme is perfect for my needs besides this one tiny adjustment. :/

  5. Andrew
    Nuh uh moderator
    Posted 1 year ago #

    @tylerbarabas, Any chance of linking your site?

  6. tylerbarabas
    Member
    Posted 1 year ago #

    Thanks to Tara for suggesting FireBug. What a great utility!

    Using it I was able to pin down that #branding and #footer are in fact the correct properties to adjust. But I was not able to get any change from editing style.css. Instead I had to edit these properties in the style.min.css in the child theme. I am still pretty unclear as to why there exists a style.css if the browser is reading from style.min.css (which is much tougher for me to read lol). EIther way this seems to work.

    Thanks!

  7. Jesper Johansen (jayjdk)
    Member
    Theme Author

    Posted 1 year ago #

    You should not edit style.min.css directly. You should be able to overwrite the styles in your child theme.

    Could you please link to your site?

  8. Tara
    Volunteer Moderator
    Posted 1 year ago #

    Glad you got it resolved :-)

  9. CottageGalStyle
    Member
    Posted 1 year ago #

    Can anyone help me? I need to adjust the header on my theme. It is way too tall and won't let me set the header all the way across. Please just tell me what code I need to adjust.

    Version 3.6.1

  10. WPyogi
    Forum Moderator
    Posted 1 year ago #

    @VintageGalStyle - please start your own thread - this one is resolved - and you also need to post in the sub-forum specific to the theme you are using.

  11. larsdirchsorensen
    Member
    Posted 1 year ago #

    This topic is resolved but for (at least) one of the lesser wordpress minds the solution dont stand so clear to me.
    It seems the solution was to edit style.min.css directly but the author of the theme dont not condone this.
    So ... what is the right solution then?
    I have tried to overwrite in the style.css file in section .site-header as well as adding a section #branding. Neither of these edits seem to work.

    Edit 1: Changed padding to 10px:
    .site-header
    {
    padding: 10px 0 10px;
    }

    Edit 2: Changed padding-top and -bottom to 1px (just to provoke some action):
    /* Tilføjet #branding */
    #branding {
    padding-top: 1px
    padding-bottom: 1px;
    }

    Site: danmarkssamfundet.dk (currently down at the minute of writing due to the blessings of my provider surftown :-) )

  12. Andrew
    Nuh uh moderator
    Posted 1 year ago #

    Sorry, but this thread was written in the context of the original poster's situation. The original poster created a Child Theme and was familiar with CSS.

    Please try to create your own thread to discuss your own issue, as you can see a solution for one person may not be a solution for another.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic