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….

100 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!

    Liked by 1 person

  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

  18. dionbarb says:

    Hi, how do we keep the header image but remove the grey screen over the header images?
    https://abovethefoldcanada.ca/

    Like

  19. dionbarb says:

    Do you know why the homepage banner is bigger than the other banners? I’d like them all to be the same size as the secondary pages.

    Like

  20. CA says:

    Hi, I have transferred my Lodestar site from WP.com to WP.org. I downloaded and uploaded your wonderful theme to my new site location, but I find the Site Identity Customiser no longer allows me to upload a logo.

    In my wordpress.com site (https://pixelperfectdesign51614475.wordpress.com) I used a logo instead of a site title, because I like the fancy font (which I can’t find on any of the major font sites like google fonts, fontsquirrel, fonts.com or Typekit). I would like to do the same in my WP.org site (www.pixelperfectdesign.org) but I’m struggling.

    Am I missing something? Many thanks for your kind help in advance!

    Colette

    Like

    • HI Colette
      i found both of your wordpress.com and wordpress.org site looking same?
      no logo is showing there?

      please let me know
      OM

      Like

      • CA says:

        Hi, thanks so much for your prompt reply. Since I posted yesterday, I have discovered how to upload the font I used on my WP.com site (Mom’s Diner), but I’m afraid the quality is really poor and it doesn’t look so good on my WP.org site. I would prefer to upload a .png logo to retain the quality. Is that possible on the WP.org version of the theme?

        Like

      • HI
        i guess you can do that in your .org site
        🙂

        Om

        Like

      • CA says:

        Hi again

        In the .com site, it’s possible to insert a logo under Customize: Site Identity. In .org, there isn’t. Is there another way to upload a logo to where the site title is located, in the centre of the header image? Thanks, Colette

        Like

      • Hi Colette
        ok, in your wrodpress.org site you can modify the theme file…right?
        if yes, then there is a way to add logo by modifying the theme file
        (though i have not checked the dashboard till now, replying you on my experience)

        Om

        Like

      • CA says:

        Thanks so much. That sounds a little advanced for me … can you offer any advice as to how to go about that? Appreciate your kind help! Colette

        Like

      • it would better if you communicate me in my fiverr profile please
        Om

        Like

  21. CA says:

    Will do, thanks.

    Like

  22. cluthy86 says:

    Hi! Thanks for the tips on changing the navigation color. I am having an issue where I have a submenu and when I hover over items in the submenu, the main menu item is still the original black/gray from the theme. I’m unable to locate where/how to change this by inspecting the CSS in my browser and was wondering if anyone has any ideas? The issue is at color-sure.com for the “About Us” menu item and submenu. Thanks!

    Liked by 1 person

  23. dionbarb says:

    Hi, is there a way to link the header image to another page? IE Link the header image on my homepage (https://abovethefoldcanada.ca/) to this page (https://abovethefoldcanada.ca/free-online-assessment/)?

    Like

  24. Thanks for these awesome tips! Here’s a question for you: is there code for moving the logo to upper left, or at least top of page? I don’t want it over the header image. Thanks!
    http://www.trippcr8tive.com

    Like

  25. Logan Halsey says:

    How would i center the menu items after deleting the text in the upper right?

    Like

  26. petrarch1603 says:

    How do I change the font over the header-image?

    Like

    • Hi petrarch
      it depends on which plan of wordpress.com you are using
      in wordpress.com you can change it from your dashboard Appearance > Customize >Font section

      please let me know if it helps you

      Om

      Like

  27. Jim Wilcox says:

    Hey Om!
    love the template! i’m adding the text into the custom CSS field in the customizer and not getting any result. i’m trying to make the theme full with no side bars.

    code i used.
    .single-post aside#secondary {
    display: none !important;
    }
    .single-post div#primary {
    width: 100% !important;
    max-width: 100% !important;
    }

    tHanks again!

    Like

  28. davidcarls says:

    Hello OM,
    thank you for the template, I like it a lot. I would like to put a button on the top menu in place of the Call Me or phone number area. How might I do that? Thanks for any help, my site is davidcarls.com

    Like

  29. davidcarls says:

    Let me clarify, I have the code for a button already, I just need to know where to place the code into what template or ???.PHP file. Thanks

    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 )

Google+ photo

You are commenting using your Google+ 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 )

w

Connecting to %s

%d bloggers like this: