Lodestar theme By Automattic: Modifications of header, footer, sidebar, contents and documentations

Lodestar by Automattic

Lodestar is a trendy one-page theme designed with startups and small business ventures in mind.  Designed by Mel Choyce, Lodestar is perfect for your small business or organization’s website. The theme allows you to create a one-page website, showcasing all your company’s information in one spot, interspersed with full-sized featured images. It is almost similar to WordPress Twenty Seventeen Theme . Here i am sharing you some CSS code to style your Lodestar theme, which will help you to give your Lodestar theme a diffrent look of your own.

Download Lodestar theme By Automattic  if you want to use it in your own hosting.

Download Loadstar theme by Automattic Child theme  to do any sort of theme file editing.

So You can use my shared code and ask question in the comments section.

Or can take my personal help.
1. How to change top navigation menu background color in Lodestar theme?

Answer:  use this css code to do this

.header-top {
background-color: darkred !important;
}

2. How to change menu hover background color and drop down menu  hover background color in Lodestar theme?

Answer : Try this css code

#top-menu li a:hover {
background: grey !important;
}

Theme Lodestar top header menu section modification

3. How to change drop down menu black background color in Lodestar theme?

Answer:  Use this css code

ul.sub-menu {
background: darkred !important;
}

 

4. How to change the “Call For Estimate” font color, size and font family to make it stand out?

.site-top-content span {
font-family: cursive !important;
font-size: 18px !important;
color: white !important;
}

5. How to change the Navigation menu font color, size and font size to give the menus a new style

.main-navigation a {
padding: 1em 1.25em;
font-family: cursive !important;
color: white !important;
font-size: 13px !important;
}

6. How to change Homepage panel’s font color, size and font family

.panel-content .entry-title {
color: darkred !important;
text-align: center;
font-size: 23px !important;
font-family: cursive !important;
}

theme lodestar single post big header image remove

7. If you don’t want to show  big header image in single post page in Lodestar theme?

.single-post .custom-header {
display: none !important;
}

.site-content {
padding: 7.5em 0 0 !important;
}

 

Theme Lodestar footer social icons background color change

8.How to change footer light grey social icons background color ?

.site-footer .jetpack-social-navigation a::before {
background: darkred !important;
}

Theme Lodestar single post modifications

9. How to change single post page title’s font family color and font size

.entry-header .entry-title {
margin-bottom: 0.25em;
font-size: 28px !important;
color: darkred !important;
font-family: cursive !important;
}

10. I don’t want to show post date and  author in single post page?

.entry-meta {
display: none !important;
}

11. How to change the font color, font size and font family of contents of single post?

.entry-content, .entry-content p {
font-size: 17px !important;
font-family: cursive !important;
color: black;
}

 

 

 

12. How to change sidebar and footer widget title’s font color, font size and font family in Lodestar theme

h2.widget-title {
font-size: 18px;
font-size: 1.125rem;
font-family: cursive !important;
color: darkred !important;
}

theme-lodestar-widget-title-and-widget-list-modification

13. How to change list border color 

.widget ul li {
border-bottom: 1px solid darkred !important;
border-top: 1px solid darkred !important;
padding: 0.5em 0;
}

14.  To change Widget list font family, font size and color 

.widget_categories li a {
color: darkred !important;
font-size: 14px !important;
font-family: cursive !important;
}

15. To change footer widget background area

.site-footer .widget-area {
background-color: green !important;
}

 

theme lodestar blog page posts modifications

16.  How to change  Continuous Reading font family, font size and color in blog page?

a.more-link {
color: darkred !important;
font-size: 18px !important;
font-family: cursive !important;
}

17. How to  reduce gap between blog posts in Lodestar theme?

.blog article {
padding-bottom: 2em !important;
}

Theme Lodestar Single Post Full width

18. How to make Single post page to be full width in Lodestar theme?

.single-post aside#secondary {
display: none !important;
}

.single-post div#primary {
width: 100% !important;
max-width: 100% !important;
}

19. If you want to remove footer site info ( blog at wordpress.com) in Lodestar theme

.site-info {
display: none !important;
}

theme lodestar blockquote modification

20. How to change Blockquote font family, border, color, font size in Lodestar theme

blockquote, q {
font-family: cursive !important;
color: darkblue !important;
font-size: 16px !important;
border-left: 4px solid darkblue !important;
}

If you have any issue feel free to ask me question here in comments section

OR

Want me to help you personally for CSS Issue?CLICK HERE….

47 Responses to Lodestar theme By Automattic: Modifications of header, footer, sidebar, contents and documentations

  1. bradsayers says:

    Thanks for these tips!

    As for point 19, I do not want to remove the footer, but I would like to replace the PROUDLY POWERED BY WORDPRESS | THEME: LODESTAR BY AUTOMATTIC with my own line.

    How can I do this while keeping everything else the same?

    Liked by 1 person

  2. Hi, I have changed the background color on all pages to a medium blue, and the body text to white following your examples above. However, the “static home page” defaults to a grey text that is larger (and not white!). How do I access that to make changes to its appearance using CSS code?

    Like

  3. Hello ! Could you help me about reducing the height of the big header image ?
    Thanks in advance !

    Like

    • Hi
      are you talking about the homepage header image?
      let me know
      OM

      Like

      • Hi, Yes I do.
        I tried to modify the properties in the css editor “.custom-header-image .lodestar-front-page” and “.custom-header”, but nothing happens…
        Thanks in advance !

        Like

      • Thanks,
        sorry for the late response
        would u mind to try this code please?

        .custom-header {
        height: 255px;
        max-height: 50%;
        }
        .custom-header-image, .custom-header-image * {
        height: auto !important;
        padding: 0px !important;
        width: auto !important;
        }
        please let me know if it works for you?
        Om

        Like

      • Gateway says:

        Nevermind! I just managed I think. Sorry for all the confusion. Used this code:

        .custom-header-image, .custom-header-image * {
        margin-top: 20px;
        height: auto !important;
        padding-top: 0 !important;
        padding-bottom: 120px;
        width: auto !important;
        }

        Like

      • Thanks a lot for the code
        🙂
        Om

        Like

  4. Thanks a lot for your answer ! It’s a kind of working, but it displays a big space between the image and the content below…
    So, instead of 255px, I can put any other value ?

    Like

  5. Well, I’ve tried to modify some codes…. and it seems to work perfectly !!!
    Thanks again !!!!

    Like

  6. Hi, If I don’t want to show big header image in the page contact us in Lodestar theme, can you help me? thanks!

    Like

  7. http://letsfixitinpost.com/ , now I had fixit the problem with the top bar, thanks!

    Like

  8. dega says:

    Hello, i want to remove the big header on another page. but i cant. tried to put on custom css. and still cant. and what does #7 mean? how to use it? thanks!

    Like

  9. heinohund says:

    Hi how do I get the image from the post in the blog on the frontpage?
    Br Henrik

    Like

  10. heinohund says:

    Karmarkbusiness.dk

    In the frontpage i have the blog in one of the panels. In the frontpage there is no image with the, but under the blog in the menu there are image in the post.

    H

    Like

  11. Hi Sir,

    Thank you for your guidance that allows newbies like me to enjoy using WP. To change only the Site Title font, which is your tip to use? I tried using No. 6 but there was no affect to the Site Title font.

    Much appreciated.

    Like

  12. Jeremy says:

    How di I add my logo right above the large lodestar text on front page. Also, I would like part of the “lode” to be a different color than the “star” text. How do I do this? This is for the homepage. Thank!

    Like

  13. webhdc says:

    Hello, PLease, could yo help me? I want to remove header images in new pages that i made. Is possible?

    Like

  14. Gateway. ISR says:

    hi there, could you help me with my header – it seems to not want to do what i would like! i would like 1) the header to be smaller (the code you posted above makes my header smaller but also makes the images disappear) and 2) I would like for my parent pages not to have headers. could you help? 🙂

    im currently working on my local server but i have a basic version that i will upload my local version to. the url is gatewaytogermany.nl

    thank you!

    Like

    • Gateway. ISR says:

      oh and i would also like to suppress the parallax scroll in all images – header and panel!

      Like

      • Hi
        thanks
        sorry for the late response
        would u mind to tell which code you used to make the header smaller?
        i will check it and will correct it
        Om

        Like

      • Gateway says:

        I managed to fix it 🙂 – if you wanna delete my comment underneath. cant figure it out myself. or at least that you know you dont need to answer it anymore 🙂

        Like

      • HI
        would you mind to share the code here which you used to fix?
        sorry i could not reply you due to some other work

        OM

        Like

      • Gateway says:

        I didnt fix it afterall…. I am still frustrated by the code for the header… Do you have any idea what code I could use? This one:
        @media screen and (min-width: 60em) {
        .lodestar-front-page .custom-header-image {
        height: 400px;
        }
        }
        I tried but its not small enough for the intro text (the one above panel one – just for clarification 🙂 )to show and that is essential. Reducing the height to say 300px does not change the layout at all.. Im out of options. Oh and I dont want to reduce the padding of the intro text to achieve the look if possible. Do you have any idea?

        Like

  15. Gateway. ISR says:

    Hi… oh gosh.. If only I knew… because it only worked temporary I didnt think i used the right code.. the only added code I have in my theme is:

    body:not(.no-header-image) .custom-header-image::before, .lodestar-front-page .custom-header-image::before {
    background: rgba(0,0,0,0.05);
    bottom: 0;
    content: “”;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    }

    but thats just to regulate the overlay… This doesnt help you, does it?

    Like

  16. Hi ! I had to modify one item (link) in the main navigation, and a new problem appeared : now the last item (link) goes underneath the others. So the navigation is now displayed on 2 lines, and not 1 line as before… Even if I delete every links in le menu, and re-add them, there is still the same problem, as if the width of the main navigation had been reduced…).
    Could you know how to solve it ??
    Thanks in advance !
    Regards,

    Like

  17. You are the best ! 🙂 Thanks a lot !

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: