Support » Theme: Storefront » FONT TYPEAND FONT SIZE FOR STOREFRONT THEME

  • Resolved bintmahfudh

    (@bintmahfudh)


    Hi!

    I have been trying so many ways to edit my blog posts font type and font size but i failed.
    i am using STOREFRONT theme for my site: https://theislamicreflections.com/

    All options show that i go to customize and then check on fonts but my theme has no option for fonts in the customize page.
    Kindly guide the way forward or please fix this issue.
    i want ALL my blog posts content to be using TIMES NEW ROMAN AND FONT SIZE 16

    Secondly i have been trying to change the background my blog posts has but i also dont know how to do it.
    it is currently using a transparent background kindly make ALL blog posts have a white background.
    Thanks

    The page I need help with: [log in to see the link]

Viewing 11 replies - 1 through 11 (of 11 total)
  • You should be able to add both of these into the Appearance->Customize->Addtional CSS section

    .single .post .entry-content {
      font-size: 16px;
      font-family: Times New Roman;
    }
    
    .single .content-area {
      background-color: white;
    }
    Thread Starter bintmahfudh

    (@bintmahfudh)

    Thanks a lot I have added the codes and saw the changes but the font size still seems small also if you check on the posts although yes the background is white but still it looks compressed
    I want to have some spaces on both right and left sides of the blog posts white background
    Have a look at this https://theislamicreflections.com/2019/04/rekindling-the-romance-in-marriage/

    Also I wanted the posts displaying in the categories to have white background on each excerpt displayed
    See this https://theislamicreflections.com/category/researched-articles/

    As you can see all the posts words are on a transparent background. I want it to have sort of boxed white background where each post is identifiable
    Thanks

    Thread Starter bintmahfudh

    (@bintmahfudh)

    Hi! Can I get a reply for this please.
    Thanks

    Hi @bintmahfudh,

    Let’s take a look at these for you.

    I want to have some spaces on both right and left sides of the blog posts white background

    You can add this CSS to give a bit of space all around the post. Feel free to adjust the 30px to have a different amount.

    
    article.post {
        padding: 30px;
    }
    

    Also I wanted the posts displaying in the categories to have white background on each excerpt displayed

    Considering this, why don’t we combine some styles from earlier to take care of all of this:

    
    article.post {
        padding: 30px;
        background-color: #fff;
        font-size: 20px;
        font-family: Times New Roman;
    }
    

    I believe that will give you a white background, padding around the edges, Times New Roman and also allow you to set the font-size with the 20px above.

    See if that works for you. Let me know if you run into trouble.

    Best,

    Thread Starter bintmahfudh

    (@bintmahfudh)

    Thanks so much.. It worked!
    Hey, I discovered something.
    My likes and comments are not showing in my posts.

    Please could you let me know how to make them visible in my posts.
    @3sonsdevelopment

    Thanks a lot.

    Hi @bintmahfudh,

    I’m glad to hear that worked 😀

    For the comments and likes, I would try disconnecting the Jetpack plugin. Take a look and see if the comments appear normally. If they do then reconnect the site again and see what happens. The likes are part of Jetpack so those won’t appear while the plugin is disconnected.

    Let me know what you find out.

    Thread Starter bintmahfudh

    (@bintmahfudh)

    okay i did check
    did you reconnect it again?
    i believe i saw jetpack still working.
    my apologies for late reply.
    i simply have one last question:
    i tried removing the search our products button in the site by using this code:
    /* remove search box */
    .site-header .widget_product_search , .site-search{
    display: none;
    }

    it only removed the search button in the desktop view
    our viewers are complaining because the search our products button still appears in the mobile view and tablet view.

    i now want to change the search for our products to be search the website.

    so that people could search the website.

    please help

    Job

    (@jobthomas)

    Automattic Happiness Engineer

    Hi @bintmahfudh sorry for the slow responses here. Have you been able to connect?

    I’ve had a quick look at the mobile search option.

    This can be fixed with some custom CSS. Under Customize > Additional CSS, you can add the following code:
     

    /* Hide search option on mobile */
     
    .storefront-handheld-footer-bar ul li:nth-child(2) {
        display: none;
    }
    
    .storefront-handheld-footer-bar ul li > a {
        border-color: transparent;
    }
    
    .storefront-handheld-footer-bar ul li:nth-child(3) {
        float: right;
    }

     
    If you’d like to learn more about CSS, I highly recommend using the free tutorials at w3schools. Here, you can find the basics of selectors (how to target the right element on the page), and properties (how to change the element on the page).

    Job

    (@jobthomas)

    Automattic Happiness Engineer

    We haven’t heard back from you in a while, so I’m going to mark this as resolved – if you have any further questions, you can start a new thread.

    rene-rene

    (@rene-rene)

    Hi,
    I have changed font-size along the lines explain in this forum, including main menu font- size, except that small piece of text about the number of productos in the cart: I have found no way of enlarge it.
    Thanks.

    Hey @rene-rene,

    Thanks for reaching out. Please open up a new thread about this.

    Cheers!

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘FONT TYPEAND FONT SIZE FOR STOREFRONT THEME’ is closed to new replies.