Announcement

Collapse
No announcement yet.

site-logo header-edit-box white space

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • andyleighton
    replied
    Brilliant! thanks Omnibus, that works great with the !important added

    Much appreciated! and thanks also Wayne for your help over the last week,

    cheers

    Leave a comment:


  • In Omnibus
    replied
    Your default CSS is this:

    div.site-logo.header-edit-box {
    padding: 22px 10px 26px 10px;
    }

    It is the 26px bottom-padding that is causing the issue.

    You can adjust that number to any value using either the full CSS above or

    div.site-logo.header-edit-box {
    padding-bottom: 26px;
    }

    You may or may not have to use !important to override the default CSS. I didn't in my testing.

    If you do, then use

    div.site-logo.header-edit-box {
    padding-bottom: 26px !important;
    }

    Leave a comment:


  • andyleighton
    replied
    All I can guess is that some other CSS in your site is overriding this change.
    I think you might be right if the code I tried works for you
    Site is https://tokyoposts.com

    (just as a side query, while looking for other css thats overriding the new code , I see there is various css code in the additional.css of the different themes, I didnt put it in there, I guess that is a default for some themes?)

    Leave a comment:


  • Wayne Luke
    replied
    Unfortunately, your cropped image shows nothing that would help us solve your problem. What is the computed CSS for the logo and what is the computed CSS for the header element?

    Heck, even a link to the site with the problem would help. Probably the most useful.

    This code works for me:
    Code:
    #header .site-logo {
        padding: 22px 10px 8px 10px;
        background: transparent;
        position: relative;
        text-align: left;
    }
    All I can guess is that some other CSS in your site is overriding this change.
    Last edited by Wayne Luke; Thu 27 Feb '20, 9:09am.

    Leave a comment:


  • In Omnibus
    replied
    Originally posted by andyleighton View Post
    Still cant get it to do anything, hard to believe its so difficult to adjust the green padding under the logo image.

    this is the code I tried from 'Chrome Insert' in css_additional.css: ( the 8px is the new adjustment)

    #header .site-logo {
    padding: 22px 10px 8px 10px;
    }



    Any final code possibilities to reduce the green padding between the logo and menubar?

    Cheers!

    Are you positive the image itself doesn't have transparent white space? I'm asking this because I just tested a header logo image with 0 padding and it has no padding on the bottom between it and the navigation toolbar.

    Leave a comment:


  • andyleighton
    replied
    Still cant get it to do anything, hard to believe its so difficult to adjust the green padding under the logo image.

    this is the code I tried from 'Chrome Insert' in css_additional.css: ( the 8px is the new adjustment)

    #header .site-logo {
    padding: 22px 10px 8px 10px;
    }



    Any final code possibilities to reduce the green padding between the logo and menubar?

    Cheers!


    Leave a comment:


  • Wayne Luke
    replied
    CSS is very very specific.. It is completely designed around specificity. What is the exact CSS that you're applying to the element?

    For example the code in the first post is incorrect. There is no element in the system with both the #header ID and the .site-logo class. One is actually the child of the other. So this is broken:

    Code:
    #header.site-logo{padding:22px 10px 7px 10px;background:transparent;position:relative;text-align:left}
    Instead, you need to find the element with the #header ID and then the child of that element with the .site-logo class. That code would look like this:

    Code:
    #header .site-logo{padding:22px 10px 7px 10px;background:transparent;position:relative;text-align:left}
    Note the space between the #header and .site-logo. That space is very important in the scheme of things.

    Leave a comment:


  • In Omnibus
    replied
    I'm just speculating here but most browsers have a default CSS of their own which is why CSS resets were created. I don't use Chrome regularly but I think Wayne Luke does so he could probably answer that question for you.

    Leave a comment:


  • andyleighton
    replied
    Thanks Omnibus, but that didnt change anything either unfortunately

    By using Chrome 'inspect' I managed to change the padding px in site-logo header-edit-box, and it worked perfectly ...

    but when I put the same altered code from Chrome 'inspect' into css_additional.css the default padding stays the same.

    #header .site-logo {
    padding: 22px 10px 10px 10px;
    background: transparent;
    position: relative;
    text-align: left;


    Click image for larger version

Name:	Capture.JPG
Views:	86
Size:	42.3 KB
ID:	4435564


    Any ideas why the same Chrome 'inspect' code that changes the site-logo padding doesnt work in css_additional.css? (could be why the previous suggestions didnt work either)


    Attached Files

    Leave a comment:


  • In Omnibus
    replied
    The logo itself has no margin or padding by default. You may achieve the desired results by adjusting the header cell.

    #header .header-cell {
    margin: 0;
    padding: 0;
    }

    You will obviously not want the values to be zero. Adjust them as necessary.

    Leave a comment:


  • andyleighton
    replied
    mmmm neither of those two suggestions altered the height of the header,( increase or decrease) maybe its the padding in green I need to reduce the height of?

    Click image for larger version

Name:	Capture.JPG
Views:	134
Size:	17.9 KB
ID:	4435538

    Leave a comment:


  • In Omnibus
    replied
    Originally posted by andyleighton View Post
    where can I find the header_height style variable in the AdminCP, it didn't come up when I searched in templates?

    cheers
    You can find it in the Style Manager under Edit Stylevars in the Drop-Down Menu for each style.

    Or you can use CSS.

    #header {
    height: 104px !important;
    }

    Leave a comment:


  • andyleighton
    replied
    where can I find the header_height style variable in the AdminCP, it didn't come up when I searched in templates?

    cheers

    Leave a comment:


  • Wayne Luke
    replied
    The header has a minimum height of 104 pixels specified as well. You can change this with the header_height style variable in the AdminCP.

    Leave a comment:


  • andyleighton
    started a topic site-logo header-edit-box white space

    site-logo header-edit-box white space

    Hi,

    There is too much white space between my site logo and the menu bar, what code would I use in the additional.css file to reduce this?

    I did try this:
    #header.site-logo{padding:22px 10px 7px 10px;background:transparent;position:relative;text-align:left}

    but didnt seem to do anything!

Related Topics

Collapse

Working...
X