WordPress Tricks

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.

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

Answer:  use this css code to do this

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

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

Answer : Try this css code

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

Theme Lodestar top header menu section modification

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

Answer:  Use this css code

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

 

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

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

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

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

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

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

theme lodestar single post big header image remove

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

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

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

 

Theme Lodestar footer social icons background color change

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

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

Theme Lodestar single post modifications

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

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

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

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

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

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

 

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

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

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

13. How to change list border color 

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

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

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

15. To change footer widget background area

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

 

theme lodestar blog page posts modifications

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

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

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

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

Theme Lodestar Single Post Full width

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

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

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

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

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

theme lodestar blockquote modification

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

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

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

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

OR

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

266 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

      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

        Like

      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:

        Like

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

    Like

      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

        Like

      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

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

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

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

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

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

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

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

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

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

    Like

      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.

        Like

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

        Like

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

      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

      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

        Like

      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

        Like

      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

        Like

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

      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?

        Like

      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!

        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

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

      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

        Like

      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

        Like

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

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

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

    Like

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

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

      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

      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

        Like

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

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

      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

        Like

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

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

    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

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

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

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

        François

        Like

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

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

    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

      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

        Like

      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

        Like

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

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

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

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

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

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

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

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

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

        Like

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

    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

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

    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

      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

        Like

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

    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

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

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

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

      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

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

    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

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

        Like

      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

        Like

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

      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

        Like

      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.

        Like

      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

        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

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

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

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

      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

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

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

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

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

    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

      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

Leave a Reply to allaboutbasic Cancel reply

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

WordPress.com Logo

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

Google photo

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

Twitter picture

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

Facebook photo

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

Connecting to %s