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

19 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?

    Like

  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

  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

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: