Placeholder header image – Lodestar Theme

  • Unknown's avatar
    nextleapipo · Member ·

    Hi. I just changed the theme.
    I’ve found ways to resize the header image.

    First of all, the theme offers to add panels at the front page.
    My problem is that the featured images for the pages (at the front page) appears too big.

    Please advise me on how to resize the featured images and/or reduce the height of the featured images on the panels (whichever looks better).

    Secondly, the size of Site Title also too big. Please advise me how to change the size?
    But I would prefer if the Site Title and Tagline can be put at the upper left of the website (if possible, please advise).

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    otpidusprime · Member ·

    Hi @nextleapipo,
    I am assuming that by featured images you mean the fixed image panel that appears while scrolling.
    So right now it is set to 100vh like this: 

    .panel-image {
    height: 100vh;
}

    which means it takes the height of the entire browser window, so to reduce it’s height you can give it a fixed height in pixels with a smaller value like this: 

    .panel-image {
    height: 500px;   // change this value according to your need.
}

    You can reduce the size of the site-title text using this CSS: 

    .site-title {
    font-size: 2em;   // change this value according to your need.
}

    (This is a CSS solution but you can also use the site customizer, if you want to reduce the font size. Go to My Site → Customize, this opens the customizer. On the sidebar of the customizer click on Fonts and then change the header font size).

    Moving the title and the tagline to the left corner is a bit tricky, but it can be done. Here’ how it can be done:

    1. First move the menu from center to the right to make space for the title and tagline on the left: 

    .main-navigation ul.nav-menu {
    float: right;
}

    2. Reduce the menu font-size to make up some space for the title and tagline on the left: 

    ul#top-menu {
    font-size: 16px;
}

    3. Reduce the padding between the menu texts to make up some more space for the title and tagline on the left: 

    .main-navigation a {
    padding: 1.4em 0.5em;
}

    4. Reduce the font-size of the title: 

    .site-title {
    font-size: 2em;   // change this value according to your need.
}

    5. Reduce the font-size of the tagline: 

    .site-description {
    font-size: 1rem;
}

    6. Change the color of the tagline from grey to white so that it’s visible over the yellow background: 

    body .site-description, body .site-description a {
    color: #fff;
}

    7. Now use absolute positioning to pull the title and tagline to the top-left position: 

    .site-branding {
    position: absolute;
    top: -92px;
    z-index: 9;
}

    8. Finally, remove the header which previously contained the title and the tagline: 

    .custom-header {
    height: 0px;
}

    Hope this helps :)

  • Unknown's avatar
    nextleapipo · Member ·

    Hi @otpidusprime ,

    Thank you for your kind assistance.

    For panel image, I have done it. It’s working. I love it.

    But I got problem with moving the title and the tagline to the upper left corner. It wasn’t fits well. I want to maintain the header image there. Just move the title and tagline to the upper left. I have tried, but it wasn’t fits well.

    Kindly advise.

    Thank you.

  • Unknown's avatar
    otpidusprime · Member ·

    Use this CSS to move the title to the upper left corner: 

    .site-branding {
    position: absolute;
    top: -200px;
    z-index: 99;
}

    And then use the codes to move the menu to the right and to hide the header i gave above.

    Hope this helps :)

  • The topic ‘Placeholder header image – Lodestar Theme’ is closed to new replies.