Need help? Check out our Support site, then


Custom Header Image height for Isola Theme

  1. Customizing the default header image height for the Isola theme. I want to use this area to display the ArtSquare logo. However the default height is much much to big, and I'd like to reduce by half at least. I'm not sure how to find out how the header image is declared, or how to edit the default height. Please help :)

    The blog I need help with is blog.artsquare.com.

  2. Hi artsquareapp,

    I just took a quick look, but I think if add something like this in your Custom CSS it might do what you are looking for.

    .site-header-image div {
      height: 50% !important;
    }

    Let me know if that doesn't do it and I'll look further.

  3. That did the trick! If you clear your cache and look at blog.artsquare.com you'll see the difference. The only complaint I have is that the actual blog posts don't move up any. I think the actual container for the header isn't altered.
    I'm really wanting the content of the blog to display for like 50-70% of the content above the fold.
    Does that make sense?

  4. That does.
    This is a little bit more involved, hopefully it will do what you're looking for.

    .hentry {
      padding: 2em 0 !important;
    }
    .site-header-image {
      height: 50% !important;
      max-height: 200px !important;
      padding-top: 40px !important;
    }
    .site-header-image div {
      background-repeat: no-repeat !important;
      -webkit-background-size: contain !important;
      -moz-background-size: contain !important;
      -o-background-size: contain !important;
      background-size: contain !important;
      background-color: #e6e6e7 !important;
    }

    Let me know if not and I'll have a look later tonight.

  5. Thanks! It works pretty good on full-size, although the header is reduced a bit smaller than I would like- I think as a result of the .site-header-image div. As I reduce the window size to medium- or small- the header image disappears entirely- same effect on mobile as well, unfortunately.

    Would it be simplest to just have a transparent png of the logo uploaded? I had to adjust the logo, put in a grey background and set specific size for the export to fit the demands of the isola theme.

    Also, for your help, I'd love to hook you up with an art print. Let me know if you want anything :)

  6. What if we wrap the whole thing in a media query and only display it for larger screens and then let the default behavior for smaller screens?

    @media only screen and (min-width: 960px) {
      .hentry {
        padding: 1em 0 !important;
      }
      .site-header-image {
        height: 50% !important;
        max-height: 200px !important;
        padding-top: 40px !important;
      }
      .site-header-image div {
        background-repeat: no-repeat !important;
        -webkit-background-size: contain !important;
        -moz-background-size: contain !important;
        -o-background-size: contain !important;
        background-size: contain !important;
        background-color: #e6e6e7 !important;
      }
    }

    I did some quick testing with this and I think it looked good across screen sizes. Let me know what you think though.

    Thanks for the offer for the art, that is very kind but not necessary.

  7. I went ahead and uploaded a transparent png file at 2000x500px. This ensures that any background color changes don't require re-uploading an edited header image. I took out the background color declaration. This looks great at full size, but it's not collapsing properly at medium, small, mobile sizes. At these sizes, the logo is overflowing well beyond the size of the screen.
    Thoughts? Again, 100,000,001 thanks for your help on this!

  8. No worries, I like trying to get things like this working right.

    Let's try this and see if it works. I think it was looking with the testing I did.

    .hentry {
        padding: 0 !important;
      }
      .site-header-image {
        height: 100px;
      }
      .site-header-image div {
        max-height: 100px;
        max-width: 90%;
        margin: 0 auto;
        background-position: center !important;
        background-repeat: no-repeat !important;
        -webkit-background-size: contain !important;
        -moz-background-size: contain !important;
        -o-background-size: contain !important;
        background-size: contain !important;
      }
    
      #content.site-content {
        padding-top: 0;
      }
    
    @media only screen and (min-width: 960px) {
    
      .site-header-image {
        height: 40% !important;
        max-height: 200px !important;
        padding-top: 40px !important;
        padding-bottom: 0;
        margin-bottom: 0;
      }
      .site-header-image div {
        max-height: 150px !important;
      }
    }
  9. Works perfectly! Thanks so much.
    Now to get the logo to snap to the menu bar on scroll down...

    Thanks for all your help my friend!

  10. Glad it's working for you.

    If you want the logo to stay at the top like the menu bar when you scroll, you'll need to look at doing something like this.

    Not a lot of changes to what we had there already.

    .hentry {
        padding: 0 !important;
      }
      .site-header-image {
        height: 100px;
      }
      .site-header-image div {
        max-height: 100px;
        max-width: 90%;
        margin: 0 auto;
        background-position: center !important;
        background-repeat: no-repeat !important;
        -webkit-background-size: contain !important;
        -moz-background-size: contain !important;
        -o-background-size: contain !important;
        background-size: contain !important;
      }
    
      #content.site-content {
        padding-top: 0;
      }
    
    @media only screen and (min-width: 960px) {
    
      .site-header-image {
        height: 40% !important;
        max-height: 200px !important;
        padding-top: 40px !important;
        padding-bottom: 20px;
        margin-bottom: 0;
    background-color: #ededed;
    width: 100%;
    position: fixed;
      }
      .site-header-image div {
        max-height: 150px !important;
      }
    }
  11. That works great to pin it to the top. I'm thinking more along the lines of condensing it and snapping it to the blue menu bar, similar to how WordPress.com's menu looks. Does that make sense? That feels like it would be much more complicated.

  12. Actually, for the previous edit

    .hentry {
        padding: 0 !important;
      }
      .site-header-image {
        height: 100px;
      }
      .site-header-image div {
        max-height: 100px;
        max-width: 90%;
        margin: 0 auto;
        background-position: center !important;
        background-repeat: no-repeat !important;
        -webkit-background-size: contain !important;
        -moz-background-size: contain !important;
        -o-background-size: contain !important;
        background-size: contain !important;
      }
    
      #content.site-content {
        padding-top: 0;
      }
    
    @media only screen and (min-width: 960px) {
    
      .site-header-image {
        height: 40% !important;
        max-height: 200px !important;
        padding-top: 40px !important;
        padding-bottom: 0;
        margin-bottom: 0;
      }
      .site-header-image div {
        max-height: 150px !important;
      }
    }

    It works great on safari- like perfectly. For firefox and chrome, for some reason it's loading the logo quite large, that it's overflowing the window.

  13. Ah I understand what you mean now.

    I'm not sure you could move that on scroll without using JavaScript. I don't think it could be done with just CSS.

    I don't know of anyway with CSS to detect if the page has been scrolled, which is what I think you want to do.

  14. Ooohhh. That's a bummer! No worries though- I'm sure we'll eventually invest in a self-hosted site where we can make legitimate js changes. Any thoughts on why Chrome and Firefox aren't loading the changes correctly, but Safari is?

  15. I do see what's wrong and I don't think it is something I can fix.
    I'm going to explain what's happening and then tag staff so they can have a look and hopefully fix it up.

    Your blog is being served over https (SSL) so it is secure.
    The custom css file which is generated is being sent over straight http.

    Firefox and Chrome consider that insecure and mixed content so they are blocking that css file from being used.

    Hopefully staff can change the way that works so that it can be used.

  16. In the mean time here is an article for Firefox and links to other browsers to show you how to allow mixed content.
    http://wiki.sln.suny.edu/display/SLNKB/Enabling+mixed+content+in+Mozilla+Firefox

    This way you can test if the css code is at least working.

  17. Okay great. The CSS is correct for what I'm wanting. Please keep me in the loop for any updates from staff. Thanks you!

  18. Hi there! It looks like you decided to delete your WordPress.com site and move it over to a self-hosted WordPress site. Please let me know if I'm mistaken about that!

    If you'd like more help customizing your self-hosted site, I'd recommend posting in the WordPress.org Themes and Templates forum here:

    http://wordpress.org/support/forum/themes-and-templates

    Just let me know if I can do anything more to help. :)

You must log in to post.

About this Topic