WordPress Tricks

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

allaboutbasic

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.

You can take my personal help in skype : om2000_cuet
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

<div class="site-info">
	<div class="wrap">
 		© Copyright 2018, Your Company name and messages here
	</div><!-- .wrap -->
</div><!-- .site-info -->



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. 

  2. Add a Featured Image to the page. The image should be at least 2000 pixels in wide and 1200pixels tall.
    3. 

  3. Navigate to Appearance > Customize > Theme Options. Then from the drop-down, select the page you’d like to appear in the panel.
    4. 

  4. For each panel, you also have the option to display the page’s content in one or two columns.
    5. 





Photo Credit : WordPress.com


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


OR


You can take my personal help in skype : om2000_cuet

Published by allaboutbasic

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

    Liked by 3 people

    Reply

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

        Like

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

        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

    Reply

      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.

        Like

      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 !

        Like

      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

        Liked by 1 person

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

        Like

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

        Like

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

    Reply

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

    Reply

  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

    Reply

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

    Reply

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

    Reply

      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 🙂

        Like

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

    Liked by 1 person

    Reply

  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,

    Liked by 1 person

    Reply

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

        Like

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

    Reply

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

        Like

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

    Reply

      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?

        Like

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

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

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

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

    Reply

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

        Like

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

        Like

    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

      Like

      Reply

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

    Reply

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

        Like

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

        Like

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

    Reply

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

    Reply

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

    Like

    Reply

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

        Like

      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

        Like

  32. 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/

    Like

    Reply

      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?

        Like

      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

        Like

      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?

        Like

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

        Like

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

    Like

    Reply

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

    Like

    Reply

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

        Like

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

    Like

    Reply

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

    Like

    Reply

    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

      Like

      Reply

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

    Like

    Reply

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

    Like

    Reply

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

        François

        Like

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

    Like

    Reply

  41. Hi Om,

    You are unbeatable. The CSS code works very well.

    So for a specific page we have:

    .page-id-500 aside#secondary {
    display: none !important;
    }

    .page-id-500 div#primary {
    width: 100% !important;
    max-width: 100% !important;
    }

    On the internet I found all kinds of solutions but none with only CSS code. All solutions were far more complex.

    I will not forget you offer services for more complex jobs. By the way, how a Gig works on Fiverr ? What we have for one Gig ?

    Thanks a lot,

    François

    Like

    Reply

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

      Like

      Reply

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

        Like

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

        Like

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

    Like

    Reply

  47. 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. 😊

    Like

    Reply

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

    Like

    Reply

  51. 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/

    Like

    Reply

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

    Like

    Reply

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

    Like

    Reply

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

    Like

    Reply

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

    Like

    Reply

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

        Like

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

    Like

    Reply

    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

      Like

      Reply

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

    Like

    Reply

    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

      Like

      Reply

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

        Like

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

    Like

    Reply

    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

      Like

      Reply

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

    Liked by 1 person

    Reply

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

        Liked by 1 person

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

    Like

    Reply

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

        Like

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

    Like

    Reply

    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

      Like

      Reply

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

        Like

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

        Like

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

        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

        Like

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

        Like

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

        Like

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

        Like

      1. Hi Annette
        in such case put this

        <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

        in your header.php file ( i am not using any plugins) just before 

        < /head>

        and then
        using the css selector (where u want to show the font family) you can play with it

        Om

        Like

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

        Like

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

        Like

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

    Like

    Reply

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

    Like

    Reply

      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

        Like

      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.

        Like

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

        Like

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

    Like

    Reply

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

    Like

    Reply

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

        Like

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

    Like

    Reply

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

    Like

    Reply

    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

      Like

      Reply

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

        Like

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

    Like

    Reply

    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

      Like

      Reply

      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.

        Like

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

        Like

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

    Like

    Reply

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

    Like

    Reply

      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

        Like

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

    Like

    Reply

    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

      Like

      Reply

      1. Om, now is correct only in home page. If choose other menu stay the same. same thing for the menu.

        Like

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

        Like

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

    Like

    Reply

      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 !

        Like

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

    Like

    Reply

      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 ?

        Like

      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?

        Like

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

        Like

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

    Like

    Reply

    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

      Like

      Reply

      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.

        Like

      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

        Like

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

        Like

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

        Like

      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!

        Like

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

    Like

    Reply

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

    Like

    Reply

      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.

        Like

  90. 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/

    Like

    Reply

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

      Like

      Reply

      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😅

        Like

      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

        Like

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

        Like

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

    Like

    Reply

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

    Like

    Reply

    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

      Like

      Reply

      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.

        Like

      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

        Like

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

    Like

    Reply

    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

      Like

      Reply

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

    Like

    Reply

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

    Like

    Reply

    1. Hi Scott
      you contacted to domain provider or hosting provider? actually you need to contact to your hosting support to check that first.
      and share me what they reply in my Skype om2000_cuet.

      Regards
      Om

      Like

      Reply

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

        Like

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

    Like

    Reply

Leave a comment