Web Development & WordPress

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.

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

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;
}

21. How to change footer copyright info, company info and Year in Lodestar theme wordpress

Answer: Go to dashboard, then Appearance > Editor (theme editor). Replace the Red Bordered are with the code i shared below

lodestar footer copyright and company info modification
[code type=”html”]
<div class="site-info">
<div class="wrap">
© Copyright 2018, Your Company name and messages here
</div><!– .wrap –>
</div><!– .site-info –>

[/code]
Adding Panels
If you want to add more content to your front or homepage you can do it easily using panels. Panel can be created from a static page on your site. Check the steps and screenshot below

Here are steps to add additional panels in your Front page:

  1. Create a page or open your page in page editor in wordpress
  2. Add a Featured Image to the page. The image should be at least 2000 pixels in wide and 1200pixels tall.
  3. Navigate to Appearance > Customize > Theme Options. Then from the drop-down, select the page you’d like to appear in the panel.
  4. For each panel, you also have the option to display the page’s content in one or two columns.


Photo Credit : WordPress.com

373 thoughts on “Lodestar theme By Automattic: Modifications of header, footer, sidebar, contents and documentations”

  1. 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?

      1. HI Brad
        for this you have to modify footer.php file ( to show your own footer info)

        *** i checked the lodestar theme to download..but didn’t get it to check the issue properly

        OM

      2. thanks for looking….

        I ended up using a plugin called ‘real-time find and replace’ to do the job.

        I wanted to edit the footer php file but couldn’t figure out how with this particular one. Still curious…Here is the footer code:

  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?

      1. OM, It’s been a while…

        I used some of your information several years ago to customize my site. I am trying to make some color changes this month and am stuck on one item: the dividers between the top navigation menu. I have gone from dark red to green for the background of the header, and changed the menu items themselves, but do not know the CSS command for the gaps on this theme.

        Any advice?

        I am editing the site https://hannschristmasfarm.com/ and have left it in the liminal state of color change.

      2. Hi Rich
        would you mind to try this please?

        #site-navigation #top-menu {
        background: red !important;
        }

        please let me know if that helps

        Regards
        Om

      1. 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 !

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

      3. 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;
        }

  3. 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 ?

    1. HI
      please check this
      .page-id-3 .custom-header-image {
      display: none;
      }
      .page-id-3 #content {
      padding-top: 97px !important;
      }
      let me know if it helps?
      Om

      1. Sorry Its work!!!…I have to change the Id to “-2”, thank you very much!!! Now I have this problem, when I scroll down the top bar its ok, but when I return to the top, the top bar its going up and disapear!, the same with the single post!…

  4. 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!

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

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

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

  8. 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!

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

      2. 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 :)

      3. 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?

  9. 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?

  10. 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,

      1. The grey screen dulls the header and banners on each page. Stops them from “popping” out. I only want to remove the grey screen or overlay – not any of the parts.

      2. try this

        body:not(.no-header-image) .custom-header-image::before, .lodestar-front-page .custom-header-image::before {
        background: none !important;
        }

      3. Yes it worked! Thanks so much. It is refreshing to actually be able to see your images clearly!!

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

      1. I did get this to work.
        .custom-header .custom-header-image {
        max-height:200px;
        }
        @media screen and (min-width: 30em) {
        .custom-header-image {
        padding: 17%;
        }
        }

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

      1. 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?

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

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

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

  13. 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!

      1. I do have one more question about the navigation on mobile. When I view the menu on a mobile device, the background is still black from the original theme, aside from the submenu. Do you know how I can change that as well?

      2. Thanks! With “background:none” the background on the submenu changed to transparent on desktop (although this was fine for mobile), so I changed it to the same color as the submenu and that worked. Thank you so much again for your help!

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

  14. 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!

      1. Hey! still having the issue. i need the theme to only have the head on the main front page if thats possible. otherwise this theme is working great!
        cheers

      1. Hi Jim
        sorry for the late response
        i think you are searching this to make your content section wider

        body:not(.lodestar-front-page) #primary {

        margin: auto;
        max-width: 90% !important;
        width: 90% !important;

        }

        please let me know if it helps

        Om

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

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

  17. How to increase the header title and tagline wording? Where the default “Lodestar” and description under. Is there a customizable code?

      1. priscilasatolab.com
        I would like Welcome and Sato laboratory in larger fonts
        Thanks

      2. Hi Priscila
        this is for “Welcome” text font size increase

        .site-title, .site-title a {
        font-size: 87px !important;
        }

        this is for “Sato Laboratory” for size increase

        .site-description {
        font-size: 40px !important;
        }
        let me know if it helps
        Om

  18. Can we add a text overlay to the feature image?

    For example, each page has it’s own feature image. I’d like the text overlay on the about page to be about us, and the text overlay on the contact page to be contact us.

    site is in demo but is http://corinneallen.com/home-2/

      1. Hi, in the header it is just the Site Title. I would like different text over lays in the header image. Can the over lay text be changed page to page?

      2. yes it can be done..but for this the theme file need to be modified (not only css issue)… would you mind to communicate me in my personal help profile please?
        Om

      3. Thanks. I wonder if it is easier then to hide the header and I will put a full width slider in place. How do I hide the header?

      4. Since each page needs a different image, different overlay text, etc I will have to play to determine what, if anything can work with the theme. Can the current header and text be hidden or am I better to switch themes?
        Tx

  19. Thank you very much for all the tips!!
    I just have a question: how can we change the background color of current menu item?
    Tx

  20. Hi,

    Lodestar Homepage displays smaller font size than other pages.

    It is a bit annoying since the menu falls on two lines on all my pages except the homepage !!

    I’d like to have the same font size as the homepage for my other pages.

    Is it possible and how ?

    Thanks,

    François

      1. Hi François
        for the content issue, try this code

        .entry-content p {
        font-size: 1.875rem !important;
        color: #808080 !important;
        }

        menu is ok in my end ( showing in a row) in all pages

        Om

  21. Hi Om,

    Thanks, but does not do the job !

    But it seems to be a Firefox issue.
    I looked at my site with Chrome and there is no problem

    Have you any idea ?

    Thanks a lot

  22. Hi,
    That’s right, the content font size and color code you provided didnt work
    As I mention, It seems to be a Firefox issue since all work well on Chrome and Edge !1

    Tanks anyway,

    Françcois

    1. Hi Françcois
      i checked in firefox (and using firefox too) and found my provided code worked well and font is showing changed like homepage
      i think you prefer to check by clearing the firefox browser cache in your end
      Om

  23. HI, Om

    I cleared the Firefox cache and restart Firefox, but the problem is still there.

    Are my menu bar is on one line with your Firefox ?

    I put your code in style.css file via the WordPress Editor in Appearance ?! Is that OK.

    And what is the color from your code ?

    Thanks,

    François

  24. Hi,

    Sorry, your code works well, but it change the “content” size and colour and not the menu items size.

    By the way, I tried Firefox on another computer and it works well. All pages display the menu on one line !!! Mystery.

    François

    1. HI François
      my code is only for contents …thats why it is working for content section
      my code is not for menu…so menu item should not change

      Om

      1. Hi Om,
        Thanks, I’ll reinstall Firefox. As I said, all work fine on other computer and with other browser.

        François

  25. Hi Om,
    I read your point “18. How to make Single post page to be full width in Lodestar theme?”.
    Is it possible to do the same but for specific pages ?
    Let’s say I would like some pages to be full width. For example, the page id = 758.
    Is it possible ?
    Thanks,
    François

  26. Hi François
    actually depending on your issues the gig amount varies, for example….as you have some idea of css, you can implement it by yourself. if you were unable, and want to pay me…then i could help u for $5 or $10 something like that…
    Om

      1. Try this

        .main-navigation ul li.current_page_item > a, .main-navigation ul li.current-menu-item > a, .main-navigation ul li.current_page_ancestor > a {
        background: red !important;
        }

        let me know if it helps
        Om

  27. Hi Om,

    How can we remove “posted on… by”.for selected posts ?

    Thanks,

    François Mauirce

      1. Hi Om,

        How can we add more than one author on a blog post ?

        I installed Co-Authoer Plus to add authors in the back-end but it seems that we have to tweak some PHP files to display those authors in the front end. I found this information on this page from WordPress.com:

        https://vip.wordpress.com/documentation/incorporate-co-authors-plus-template-tags-into-your-theme/

        Here’s a post from my blog:
        https://m3tascience.org/9/pour-un-discours-general-scientifique/

        As you can see, Lodestar theme display meta information after the title. It is in french in this case but I can translate in English:

        “Posted on 17 April, 2018 by François Maurice in Communiqué, Discours général, Métascience”

        I’d like to be able to display more than one author for each post but as it is mention from the WordPress.com documentation, it seems to theme specific !!

        If that necessitate a Gig just let me know.

        Thanks a lot,

        François Maurice

  28. Hi Om,

    I think I found the main file to modify. Here’s the address:

    /public_html/wp-content/themes/lodestar/inc/template-tags.php

    I hope that can help!

    thanks,

    François Maurice

  29. I can’t seem to change the background color of the social media footer. It should be black. Also, I have a horrible bar at the top of my page that only appears on the desktop version (where my logo is) and I can’t seem to make it match the header. Any assistance you can provide would be appreciated. 😊

      1. ok try this code

        .lodestar-front-page .custom-header-image::before {
        background: transparent !important;
        }
        let me know if it helps
        Om

      2. Also
        for social footer icons
        try this code

        .site-footer .jetpack-social-navigation a {
        background: black !important;
        }
        hope that helps
        Om

  30. Thanks so much, Om! Both of those worked perfectly! Did you happen to have the code to lighten the text on the pages? Its almost the same color as the background

  31. I think this is the last one. I inserted a transparent image that has a link and the theme added a horrible thick border around it. It goes away if I remove the hyperlink but I need to keep the link there. No other codes have worked yet. Can you help, please?

    Here is the page: http://celaiwest.com/the-ceo/

  32. Hallo,
    I am using Lodestar template and I would like to have a Private Policy page with no featured image, what should I do to have a simple page?
    Thanks

  33. Hi,

    I used trick number 7 which works nicely.

    Now, how can I do the same with the main blog page (not only for single post) ?

    And how can I do the same for a page ?

    thanks a lot,

    David

  34. Hi,

    Again about menu.

    I changed a menu item to italic, but all the sub-menus changed to italic also. Here’s the code I used:

    .menu-item-2520 {
    font-style: italic !important;
    }

    Is there a way not to changed the sub-menus but only a specific menu item?

    Thanks,

    François Maurice

  35. Is it somehow possible to create a page that then shows me a blog-like-view of all the articles i wrote? I can only see them like in the “Archive” but i am unable to create a site with a blog-like structure.

      1. When creating a site there is no such Template, only “Portfolio”, “Standard” and “Reccomendation”….

  36. Hi Om,
    first of all thank you very much for your free theme! I appreciate it.

    I have some issues with both menus:

    TOP MENU’
    1. The menu items are not anchored with the panels, how can I link correctly them and use the parallax function?
    2. Is the menu built automatically or should I specify its items and their order?
    3. How can I display a menu item selected and synchronize it with anchors? At the moment they are strangely all selected.

    SOCIAL MENU’
    How can I customize and show the social icons that you have implemented?

    Thank you in advance for your help and have a nice day!

    1. HI Igor
      actually i shared css customization of this theme…..but the theme is not developed by me..
      share me your site URL..i will check the issues you mentioned…
      if your site is in Maintenance mode..try to disable it
      Om

  37. Hi Om

    than you very much. The plugin mentioned in your post (Page Scroll to id) worked!
    It was very easy to set-up.

    Please ignore my second issue, I don’t need to fix it anymore.
    I changed my mind

    Thank you for your precious support!
    Have an amazing day! 😉

    Best,

    Igor

  38. Hello! Could you help me with the code to make my main menu at the top of the website smaller (in height)? Thanks :)

    1. Hi lligons
      try these code

      .site-footer .widget-area {
      padding-top: 25px !important;
      padding-bottom: 0px !important;
      }
      section#email-subscribers-5 {
      margin-bottom: 12px !important;
      padding-bottom: 0px !IMPORTANT;
      }

      let me know if it helps
      Om

      1. try this

        .site-footer .widget-column {
        display: block;
        float: none;
        margin-left: auto !important;
        margin-right: auto !important;
        width: 237px;
        text-align: center;
        }

        hope that helps
        Om

  39. Hello… great job on the theme. I am trying very hard to increase the font on the below url page for the forum area. I have tried several different things here and elsewhere to no luck. Can you give me step by step (novice here) as to how to get the bbpress forums a bigger font and the font color a bit darker. It is too hard for people to read.

    http://pog.the-joys.com/wp/forums/

    NavyChief

    1. Hi Eric
      would you mind to try these piece of code please
      ** To use these piece of code, go to your Dashboard then Appearance > Customize > Additional CSS and paste the codes there…or use Simple Custom CSS plugins.

      .bbp-body {
      font-size: 17px !important;
      }

      .bbp-body div, .bbp-body span, .bbp-body div a {
      font-size: 15px !important;
      line-height: 18px;
      }
      .bbp-forums-list, .bbp-forums-list * {
      font-size: 12px !important;
      line-height: 18px !important;
      }

      let me know if it helps

      Om

  40. The Lodestar theme is great but it seems to need much tweaking if used as a website as I have been trying to do here: https://bonneybombach.com/travel-writing/hawaii-2018/

    Is it possible to Justify text in a paragraph using CSS?
    I have tried the following code with no success.
    p {
    text-align: justify;
    text-justify: inter-character;
    }
    The Lodestar theme is great but it seems to need much tweaking if used as a website as I have been trying to do here: https://bonneybombach.com/travel-writing/hawaii-2018/
    Thanks for your help.

      1. HI Karanda
        thanks, sorry for the late response
        you mean..you want to implement the css only for selected pages? and not for all pages?
        please let me know
        Om

      2. Hi Karanda
        for specific page css, you have to use it this way

        .page-id-394 p {
        text-align: justify;
        text-justify: inter-character;
        }

        *** you will get the page id from page editor ( just mouse over your pointer to the Edit option )
        u got the point?
        please let me know
        Om

  41. Awesome info provided here…thank you so much. I’m using this theme for DeloresGarciaCoaching.com. How would I have that homepage image NOT become hidden by part of the top menu?

    I see it scrolling…is there a way to have that TOP menu not interfere with the image underneath it?

    NEF

      1. Thanks for taking the time… I ended up using a different picture with more space on the TOP in order for that top menu to not block. Seems the image used on the top floats up and down a bit…

        Was trying to figure out how to make the image that falls on the top NOT to slide/float or move at all relative to the TOP MENU

        NEF : )

  42. I have been trying without success to change some things on the Lodestar theme –
    1) change the footer to black background with white font ,
    2)to change the colour of the body text throughout to white, and
    3) page and post headers to white.
    Any direction you could provide would be appreciated. I am a novice so really need step by step directions if this is possible. The site is http://coolahnsw.com.au. Thanks in advance. Annette

    1. Hi Annette
      for issue 1 (footer black background with white text)

      footer#colophon .widget-area {
      background: black;
      }
      footer#colophon * {
      color: white !important;
      }

      For issue 2 ( body text to white)
      .entry-content {
      color: white !important;
      }

      Regarding issue 3
      are you talking about the menu container background color to be white?
      let me know
      OM

      1. HI Om, I still need help with issue 3 – changing all header text on pages and posts to change to white.
        and issue 4 – Is there a way to change the font style of text and headers throughout the site to something else? Eg. Open Sans ?

        Thank you, you are incredibly helpful!!!

      2. Hi Annette
        according to issue 3:
        by headers you mean h1,h2,h3 ? if yes

        body, a:hover, a:focus, a:active, .entry-title a, .entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6, .project-terms a.current-type, .panel-content .entry-title, .entry-meta, .lodestar-intro .entry-content, .lodestar-panel .jetpack-testimonial .entry-header h2, .widget-area .widget.woocommerce ul.product_list_widget li>a.remove, table.cart .product-remove a {
        color: #fff !important;
        opacity: 1 !important;
        }
        For issue 4 please try this
        .entry-content h1, .entry-content h2 {
        font-family: cursive !important;
        }
        please let me know
        Om

      3. Thanks Om, Issue 3 is now done thanks to you <3

        Issue 4 – didn't work though.
        To clarify
        I would like to change the font style in text and headers to something else less blocky – perhaps Open Sans font?

        And I forgot that I haven't solved Issue 5

        Which is: changing the URL for pages and posts to names rather than numbers eg. https://coolahnsw.com.au/?page_id=107, would be better called https://coolahnsw.com.au/eat-shop-stay . Is there for this to happen automatically and how can I rename the existing pages?

        Thank you!
        Annette

      4. Hi Om, Issue 5 resolved, thankyou!

        Issue 4 remains – changing the overall font.

        I went to the link you gave me and selected Roboto. I added this to the Additional CSS box:

        .css-selector {
        font-family: ‘Roboto’, sans-serif;
        }

        but it didn’t change the fonts?

        Did I do something wrong or do I have to do it in a different location?

        Thanks again,
        Annette

      5. Hi Om, I don’t have the option for fonts?

        My options under Appearance/Customise are:

        Site Identity
        Colour
        Header Image
        Background Image
        Menus
        Content Options
        Widgets
        Homepage Settings
        Portfolio
        Testimonials
        Theme Options
        Additional CSS.

        I can’t find anything to do with Fonts within any of these options.

      6. This is what is under each section in Appearance/Customize

        Content Options: Blog Display Choose between a full post or an excerpt for the blog and archive pages. Full post Post excerpt
        Author Bio
        Display on single posts
        Post Details
        Display date
        Display categories
        Display tags
        Display author
        Featured ImagesLearn more about Featured Images
        Display on blog and archives
        Display on single posts
        Display on pages

        Theme Options: header, panels 1-4, footer

        Homepage Setting : Your homepage displays Your latest posts A static page

        Widgets: sidebar footer 1-3

        Menus – menu options

        Background Image – just for image

        Header image – just for images

        Portfolio – portfolio archive

        Testimonials – testimonial archive

        Additional CSS – only has that box with the entries you have given me earlier.

        Thanks
        Annette

      1. Hi Om, I entered the code in header.php file as directed.
        I entered the code I tried the other day to the Additional CSS box:

        .css-selector {
        font-family: ‘Roboto’, sans-serif;
        }

        but it still didn’t change the fonts?

        Im not sure what you mean by play with it in the css selector. I wanted ALL the fonts everywhere (text, headers, footers etc) to change to the roboto?

        Sorry, I am not very technically minded.

      2. thanks
        i found you used this code

        .css-selector {
        font-family: ‘Roboto’, sans-serif;
        }
        that is wrong
        please use this code

        * {
        font-family: ‘Roboto’ !important;
        }

        the asterisk mark indicates All of the CSS Selector
        so just paste my code
        :)

        Om

  43. I have just entered into Additional CSS and it worked for 1 and 2 :) Yay!

    I notice it hasn’t changed the text colours of the widgets in the menus. I would like them also to be white – the text and headers?

    And adding another question

    (4) Is there a way to change the font style of text and headers throughout the site to something else? Eg. Open Sans ?

  44. Dear Om,
    you do a great job here! I wonder if you are able to help me with changing Site Title font. I have an Easy Google Fonts plugin and can easily change all fonts in a Lodestar theme except the Site Title. I’d like to change it to Exo 2 in #0066b2 color. Could you help me with that please?

    Best regards,
    Andrew

      1. Hello Om,

        I don’t want to show it to the whole world yet (I’m not ready for google indexing). May I send that url to you via email? If so, on which address?
        Andrew

      1. Thanks for the quick response.

        Please look there is a project type menu just under the heading that allows to sort the posts by type. I cannot figure out how to do that.

      2. Yes I did. It looks the same. You can check the ‘Test’ page is live now. I cannot figure out how to add the project type sorting.

  45. Hi,

    I’d like to fix the top menu to the web page. So, in practice, when I scroll down, the top menu has to go up with the page and not be visible until I return to top of the page.

    Is it possible ?

    Thanks,

    Jade

  46. Hi Om,
    First of all thank you for a fab theme :)
    I have recently been trying to set up WooCommerce rather than the WordPress Simple Shopping Cart, only because I want to set up international shipping options. The trouble I’m having is that WooCommerce uses the product image in the header for the product page, and I would rather it didn’t. I have created a custom template for all my other pages, which doesn’t use the “featured image” at all. I’m guessing WooCommerce uses the default template for the product page, while I would rather it use the custom template, or at least not put the product image in the header.
    I have tried using the following css, but to no avail…
    .woocommerce-page .custom-header-media img {
    display: none;
    }
    Any help would be greatly appreciated, Thank you.
    Rona

      1. Hi Om
        yes I think I have, thanks to the awesome people over at the wordpress.org forums :)
        Rona

  47. Hello Om,

    first and foremost many thanks for this outstanding niche website, of which i think the ad industry should take a good look at to learn how advertising transforms into purpose full information that is actually of help to many people.

    Would you know of how to change a specific panel or page from 1 or 2 columns to 3 or 4 columns?

    Any hint or code greatly appreciated.
    Thank you,
    Mark

  48. Dear Om,
    We use “Polylang” and i didn´t find a quick hint to load separate language pages into the front-page panels. Could we manage to load the translated page-content into panel 1, 2,… when switching the language?
    Thank you in advance!
    Til

    1. HI TIl
      sorry was busy last few days
      as i know when u use/ install the polylang plugins, it should show some flags in the top bar
      and also in the post or page editor u should see the translation option

      1. Thank you for you reply! Unfortunately, the translations are ignored inside the panel.
        I found a workaround:

        – write both contents in one page
        – wrap the text classified (and “germantext”)
        – in CSS then simply use
        :lang(en) > .germantext { display:none; }
        :lang(de) > .englishtext { display:none; }

  49. Hi Om,
    I am new to your Lodestar theme. It’s really a beautiful theme and it’s doing almost everything I need it to do, with a couple of exceptions.

    First, I would like to change the height of the parallax scrolling window. I would like the window to be shorter to show a bit of the scrollable text below it. Is there any additional css to accomplish this?
    I have tried both of these but neither has made a difference.
    .parallax {
    max-height: 50%;
    }
    .parallax {
    height: 300px;
    }

    Secondly, the feature images for my pages seem to be greyed out. Is this a setting I can change in the theme’s customization settings somewhere are with additional css?

    Thank you so much for your help. For your reference: http://www.lunesolairewines.net
    Sandy

    1. Hi Sandy
      would you mind to try this please?

      @media screen and (min-width: 60em){
      .lodestar-front-page .custom-header {
      margin-top: 0 !important;
      height: 75% !important;
      }
      .lodestar-front-page .custom-header-image {
      max-height: 100%;
      padding-top: 0% !important;
      }
      .site-header {
      background-color: #333;
      max-height: 30% !important;
      height: 448px !important;
      }

      }

      Regards
      Om

      1. Om,
        Thank you so much for your response.
        These settings below have successfully gotten me to the effect I want on the front page, YAY! But not subsequent pages.

        @media screen and (min-width: 60em)
        {
        .lodestar-front-page .custom-header {
        margin-top: 0 !important;
        height: 80% !important;
        }
        .lodestar-front-page .custom-header-image {
        max-height: 100%;
        padding-top: 5% !important;
        }
        .site-header {
        max-height: 30% !important;
        height: 600px !important;
        }
        }

        On subsequent pages, the top of the page is being cut off and the quote page is not working at all now. I appreciate any more help you may be able to provide.

      2. I received these settings from the WordPress forum, and they seemed to fix the subsequent pages:
        /* Parallax scrolling calculated height */
        .lodestar-front-page .custom-header-image {
        height: calc( 75vh – 200px );
        }
        /* Re-center site logo and title */
        .custom-header-image {
        padding-top: 6%
        }

        However, could you help me with the featured page images? They appear to be dimmed somewhat. Is there a custom theme setting I am missing or additional css that would help with that? I don’t want them to be transparent or dimmed. This page: https://lunesolairewines.net/wines is an example of that. The featured image should crisp.

        Again, thank you for your help. I appreciate it.

  50. Hi there!
    Excellent theme!

    Bit of a problem though, I’m wanting to change the heading in the top image to be the page title, rather than the site title. Is this possible?

  51. Hi Om,

    Thanks for your reply. Free wordpress.com? What are the other options? I’m currently signed up to WP hosting on a paid hosting plan. The host set me up with a wordpress login / user. I also made a free account about a year ago. Would this be what you’re talking about perhaps?

    Kind regards
    Simon

    1. Hi Om,

      Thanks for your help / generosity.

      Another question: Can I ad an ALT TAG to my header log? The text being: Centre Frequency Consulting logo

      Kind regards
      Simon

  52. Hi Om,
    I wanted to ask you another help for two things for the site imprendisonno.com (the site is hosted on Automattic). I’m not good at css programming, I try but sometimes I can’t solve the problems. :-(
    Here are the details:
    1) If you see the PC header images they are complete and large. They are not seen well on smartphones and tablets. Can something be done?
    2) The home page menu is small. If you go to other menus it gets bigger. Is it possible to make it uniform?

    Thank you if you can help me.
    Fabio

    1. Hi Fabio
      can u try this please?

      @media (min-width: 320px) and (max-width: 668px) {
      .home .custom-header-image {
      background-size: 100% !IMPORTANT;
      position: relative;
      height: 224px !important;
      object-fit: cover !IMPORTANT;
      background-position: bottom center;
      background-repeat: no-repeat;
      padding-top: 0px !IMPORTANT;
      margin-top: 0px !IMPORTANT;
      }
      .main-navigation a {
      font-size: 16px !important;
      }

      }

      Regards
      Om

      1. Hi Fabio
        here is the modified code, replace my previous code with this

        @media (min-width: 320px) and (max-width: 668px) {
        .custom-header-image {
        background-size: 100% !IMPORTANT;
        position: relative;
        height: 224px !important;
        object-fit: cover !IMPORTANT;
        background-position: bottom center;
        background-repeat: no-repeat;
        padding-top: 0px !IMPORTANT;
        margin-top: 0px !IMPORTANT;
        }
        .main-navigation a {
        font-size: 16px !important;
        }

        }

        Regards
        Om

  53. Hi Om !
    i’ve been recently using Lodestar to make my website and there is something that i’d like to do but i think that i’m not good enough so here i am asking for your help !

    There is like a big part of text that i’d like to “reduce” into some kind of link just like in that page : https://www.made.agascar-callcenter.com/prestations-developpement-informatique.
    As you can when i click on “Création de site internet “vitrine”” a bunch of text appear beneath.
    So here i am , is there a possibility to do something similar ?
    Thanks in advance and i really appreciate what u did it really helped me.

      1. Oh yeah you are right it’s not working… I don’t really get why… I’ll put another link

        https://www.madagascar-callcenter.com/prestations-developpement-informatique

        but i don’t think that it’ll work. If it doesn’t work let me explain you what i’m trying to do.

        What i’m trying to have is like you know on some website, you see a catchphrase and if you click on it you will see a bunch of text appear under it and if u click once again on that now “zone” of texte it will just go back to show you the catchphrase only.

        Do you know how i can get something similar ?

        Thanks for answering !

  54. Hi ! It’s me , once again. This time I am contacting you to ask if you how can i change the background color of the footer ?
    I tried to write : .site-footer {
    background-color: blue !important;
    }
    in the additional css but it doesn’t work… Any idea ? Thanks in advance

      1. Since i installed WordPress locally and i’m making my website there. To have an url so you can see my website i need to put it online , right ? Or i’m doing wrong ?

      2. ok are u searching this?
        footer#colophon .site-info {
        background: red !IMPORTANT;
        }

        it will change background of site info / company info section

      1. it should be a simple and understandable website where a person can read about the procedures – their cost and what courses he can sign up for (leave a request) and add a video to the home page. is it possible to do?

      1. ok you can try this
        .wp-block-button.is-style-fill-fixed a {
        width: 137px;
        }
        but better u create a class for the buttons and then use the css for that class with specific width

      2. please tell me how to arrange these buttons in width in the mobile version (now in the mobile version these buttons are located one above the other) thanks !!!!

      3. please use this code

        @media (min-width: 320px) and (max-width: 767px) {
        .wp-block-button.is-style-fill-fixed a {
        width: 131px !Important;
        }
        }

        and after use the code please clear the cache

  55. I left a reply but it looks like it was deleted. In any case, I’m trying to lighten my website (www.CelaiWest.com) and I need help with the following:
    1. There is a Black bar in my header that doesn’t show on the home page but appears behind my logo on all other pages. How do I remove?
    2. I can’t change “menu” and “Celai West” font from white on the mobile header. I’d like to have a white navigation bar but the text disappears.
    3. The background to the menu (mobile) is black and no code changes it
    4. How do I lift the black footer to something lighter?

    1. Thanks
      for your issue 3
      please try this

      @media (min-width: 320px) and (max-width: 767px) {
      .header-top {
      background-color: red !IMPORTANT;
      }}

      For your issue 1 —
      can u try this

      .custom-header, .custom-header div {
      background: white;
      }
      also i think if you reduce menu items so that they fit in 1 single row, the logo will be visible more

      1. Thank you! Your solution for issue 1 worked (sorta) but none of the others did. My pull down navigation bar is still black and I would like to lighten it asap. Once it’s lightened, I will then need to darken the text of my menu bar at the top and none of your solutions above have worked. Please let me know how I can get this fixed.

      2. Thanks
        are u searching to make the dropdown menu background color to be light?
        if yes
        please try this

        ul.sub-menu {
        background: #29292a !important;
        }

        let me know if it helps
        sorry for the late reply

        Regards
        Om

      3. I added the code and it did not work. I left it there so you can see. I’d like the background of the menu to be lighter because it’s black.

      4. ok
        please share me the url of your site where u r using the code please also
        can u share me screenshot which portion u want to turn light color please?

      5. Thanks, if u want to make the whole background to be lighten
        can u try this

        ul#top-menu {
        background: #29292a !important;
        }

        let me know if it helps

      6. Thank you! You are wesome! Now we are making progress! The entire pull down menu is now light (I had to change the color code to “white” because the other code wasn’t working).

        So finally, the top bar is still black with white words (https://www.dropbox.com/sh/sdmlpvtl1o3ygyw/AADKSWfUv7HOufo7wB_ZQstma?dl=0). I believe I was able to enter a code awhile back that made it white but the header words disappeared. Is there a way to make that bar white but change the words to dark grey?

        Also, is there a way I can donate to you for your time?

      7. i think you are searching this

        .header-top {
        background-color: white !important;
        color: grey !important;
        }
        .header-top * {
        color: grey !important;
        }

        let me know if it helps

        Regards
        Om

      1. Hi! I was about to update you!
        I managed with this CSS:

        a:hover, a:active {
        font-weight:bold
        }
        Now, the link/page gets bold when the mouse gets over it (as I wanted), but I’d also like the bold style to remain when the page is active. I can’t get rid of a black patch over it.
        Could you please help?
        Thank you!

  56. Sorry to bother you.
    I obtained the effect I was looking for by adding the following CSS:

    .main-navigation ul li.current_page_item > a,
    .main-navigation ul li.current-menu-item > a,
    .main-navigation ul li.current_page_ancestor > a
    {
    background: #ffffff;
    }

    It seems to work… I’ll test it on mobile. If you have any suggestion for a more polite and clean CSS, I’m all ears!
    Anyway, I’ve been using your tips for the Lodestar theme since the very beginning of my site building, thank you very much indeed for your help!

  57. First thank you a lot for your amazing work here!
    I love this theme, and I have a question for you. I need to translate my site in english but I don’t have access to plugins, so I could make new pages translated. Is there a way to duplicate the homepage and the menu? If it is not possibile, what do you suggest?
    Also, do you have a paypal link or similar where I can throw some money so I can offer you a beer? This page really saved me

      1. I have a premium plan. I didn’t know it is a plan feature; I just take a look at plans and I didn’t find it in any of them. I thought it was a website or theme issue.

      2. Thanks
        as per my understanding either you may need to install plugins / edit the theme file
        wordpress business plans may have such option
        Regards
        Om

  58. Hey I like your Template and with the time I gathered some thing that won’t do as i like, hope you can help me:

    1st, I can’t make the .site-header-fixed work that it’s always visible, when i scoll down and up to the top again, it fades away.

    2nd, the Slider is too big verticaly, how can I shorten it?
    The Pictures are short enough and i want the slider-box to be as tall as the pictures, so theres less free space to other elements.

    3rd, at the table with the 8 pictures, there is a grey background,… can’t find the right option/class to make it white…

    4th, is there an option to put a second logo vis a vis to the first on, so one right-top and one other left-top corner?

    Link: https://componet260811839.wordpress.com/

    1. Hi Component
      For issue 2 you can try this

      ul.wp-block-jetpack-slideshow_swiper-wrapper {
      height: 300px !important;
      }

      for issue 4, you can try to edit header.php by creating child theme to achieve that

      1. Thanks, it worked like a charm!

        And about number 4, i just used an unused predefined div, set the bg image and repositioned it :)

        Now I only need to know how to fix the header menu to be shown all the time😅

      2. I encountered that it behaves diffrent in each browser:
        Firefox: it behaves like i want it to (sticky)
        Edge/Chrome: disapperars when scrolling down and up
        IE: Disapperas, but to the left, when scrolling down and up

      3. componet260811839.wpcomstaging.com

        The issue is the menu on the top of the page, it disappears in most browsers, only in firefox it behaves like i want it to.

        Go to the site and scroll down and then up again, when you reach the top, the menu will disappear when using the Chrome-Broswer

      4. Damn, I just checked it on other PC’s.
        It only behaves like that on my computer,… Sorry, see it as solved :)

  59. Hey,
    thanks for all the nice tips. I just have a simple question. Is there a way to make the background of the text fields (white) a little more transparent, so that the background shines a little through it? Would be cool for the logo site….

  60. Good Morning, I’ve been searching all over regarding Lodestar theme and modifying the header image to appear on mobile the same as it does on computer/tablet. I’ve seen various CSS coding but not seem to work. Do you have suggestions? I’ve tried changing the theme and adding panels, different pages, etc., however can’t seem to find an easy fix. I’m also trying to reduce the size of the header where the menu items are so it doesn’t cut off the top of my name as much. Your help is needed, thank you!

    1. HI Scott
      i just checked votescottbooth.com in smaller screen, your header banner seems ok to me, your name is showing fine in smaller view,
      but in Desktop / laptop view your name “Scott” is cutting,
      so you want to fix the issue for desktop / laptop view?
      please let me know

      Regards
      Om

      1. Hi OM, What I did was resize the image way smaller to accommodate that. It’s not as clear of an image on the desktop/laptop but i wasn’t able to fix it with CSS code. Regarding the Scott cutting off, I would love to fix that. I’m also having difficulty fine tuning the menu bar, it seems large and the menus themselves I want to add my email as contact to from the contact me box in the menu.

      2. Hi Scott
        not sure but can you try this code please?
        this code will resize the header image you used
        .custom-header-image {
        background-size: 75% !IMPORTANT;
        }

        for menu bar, please use this code

        @media screen and (min-width: 60em){
        .header-top .wrap {
        padding-top: 0px !important;
        padding-bottom: 0px !IMPORTANT;
        }}

        Regards
        Om

  61. Hi OM, that worked for the desktop image but changed the mobile headers, you can see. Did the menu code change anything? I can’t tell. Do you know how to embed a email address or contact forum from my contact menu? The contact me check box is there.

    1. Hi Scott
      if you want to resize the header image only for desktop ( or bigger screen), then replace my previous code with this

      @media (min-width: 1024px) {
      .custom-header-image {
      background-size: 75% !IMPORTANT;
      }
      }
      Regarding the menu code
      ** if you remove my menu code and check again your site, u will notice that the menu bar top and bottom padding is reduced, that what my code did ( u can remove my code and can see the menu bar difference)— that code

      Regarding email address in menu
      ** i found you already added a Contact Me button which is going to https://votescottbooth.com/contact-me/, so you can add Contact Form 7 https://wordpress.org/plugins/contact-form-7/ there

      or if you want to show the mail address in the menu area, then it may need to modify the theme file

      Regards
      Om

  62. OM you have been so helpful, thank you!

    I was able to fix the contact form 7. I published the form and pasted the code into the page. Trying a test email I received an error. So, I tried to add my personal email in the email and it didn’t work as well. After much googling online, I’ve since added plugins for WP Mail SMTP to setup SMTP connection but don’t think that was the solutions, any ideas?

    1. Hi Scott
      at first you show the issue to your hosting, lets check what they do,
      i hope they will solve it, otherwise let me know, i will check

      Regards
      Om

  63. Hi Om, so I contacted my domain provider, they said to go back to wordpress, I can’t seem to get a live person contact at wordpress to assist, it’s all forums I’ve tried to read through!
    Below is the error code in wordpress when sending email. My domain provider seemed to think I don’t need all the additional plugins and just need the contact form 7, now the other two?

    Email Source: Contact Form 7
    Mailer: SendGrid
    from: The from address does not match a verified Sender Identity. Mail cannot be sent until this error is resolved. Visit https://sendgrid.com/docs/for-developers/sending-email/sender-identity/ to see the Sender Identity requirements

      1. thanks for letting me know – I just click and opened the link in another browser and you are correct – I have to as WP why this is
        thank you

      2. okay, apparently WP doesn’t tell you that you have to click a button in settings to “Launch” your site.

        Maybe I shouldn’t complain, I have always used the free sites, but it seems now that I have a paid site I am hit with buy this, pay for that. Even the “free” domain has strings attached. I will have to start looking for a site I am comfortable with. Though I think I am locked into this one for the next year.

        I think the plan I got just gets rid of ads, and since I haven’t had a new site since 2018 I am out of step with the changes they made to their software – I’m still using classic view.

        Also, I don’t think I can fix the problem mentioned above, since I do not have access to CSS editing under the plan I bought. Once I find a host/site I like, perhaps I can fix the problem then. Shame, cause I really like your theme. One step at a time I guess.

        Thank you

  64. Hi OM,

    Thank you for this useful guidance for the Lodestar theme. It helped me change the background colour of my footer area. However, I can’t figure out how to change the border color of the individual tags in the footer tag cloud widget. Any assistance much appreciated.

    My website in question is: https://mrulster.com

    Many thanks!
    Allan

  65. Hi Om,

    Is it possible to display the default variable font sizes in a tag cloud widget? Although this appears in the Widgets settings in the WordPress editor, your design of hyperlinked text blocks is applied.

    My site in question is here: https://mrulster.com

    Many thanks,
    Allan

    1. Hi Allan
      it seems some css is overriding the default variable font css of the tag cloud.
      so have u used any css code for the footer widget portion?
      let me know
      Regards
      Om

Leave a Reply