Home Page Widget Fonts and Text Color

Shapely
1

Hi Support,

I’ve been searching for the answers in the forum posts, and can’t locate. Though, I am confident that you’ve addressed them before.

On the home page, what is the CSS Code to change the font type, font size and text color?

Thanks!

Bo

2

Hi Bo,

I hope you are well today and thank you for your question.

Could you please tell me specifically of what section on home page you wan to change the font type, font size and text color and also share me your site URL where it is displaying so that i can help you?

Kind Regards,
Movin

3

Hi Movin,

Thanks for your help. My URL is bolockwood.com, but you can’t see the homepage yet because the site is still in draft mode.

Therefore, I have attached screenshots for you to review.

  1. I want to enlarge the font size on the Awakening Inspiration screenshot for both the title and the subtitle.

  2. I want to change font color to white on the My Purpose screenshot for both the title and the text.

  3. I want to change the font color to white on the As Seen On screenshot, which has the slider of logos.

  4. I want to change the font color to white on the Recent Posts screenshot.

Thanks much! Bo

4

Thank you for your reply but your shared site is displaying Coming Soon message.

Could you please temporary disable it or would you mind if i log in to your site and access it? If this is ok then could you please share me your site log in details privately by checking the option “Set as private reply” when replying to this topic?

5

Hi Movin,

Thanks for your help.

I set up a user for you to login:

Username: Colorlib
PW: Bo2017

Bo

6

Thank you for sharing the site details.

1. I want to enlarge the font size on the Awakening Inspiration screenshot for both the title and the subtitle.

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Shapely Options -> Other

#shapely_home_parallax-1 .top-parallax-section h1 {
    font-size: 60px;
}
#shapely_home_parallax-1 .top-parallax-section p.mb32 {
    font-size: 20px;
}

Please change the font size in the above code to whatever you want to set.

2. I want to change font color to white on the My Purpose screenshot for both the title and the text.

Use the below CSS code to achieve this.

#shapely_home_parallax-2 h3, #shapely_home_parallax-2 p {
    color: #fff;
}
3. I want to change the font color to white on the As Seen On screenshot, which has the slider of logos.

Use the below CSS code to achieve this.

#shapely_home_clients-7 h3 {
    color: #fff;
}
4. I want to change the font color to white on the Recent Posts screenshot.

Use the below CSS code to achieve this.

.shapely-recent-posts .widget-title {
    color: #fff;
}
7

Thank you so much, Movin. You’re wonderful.

Bo

8

You are most welcome here :slight_smile:

9

Hi again, Movin.

I’ve embedded the css code above, and all is well.

I would also like to change the text size for shapely_home_parallax-3, 4 & 5, to match the text size on parallax 1 & 2, which is set at 21.

Will you please provide to css code to achieve this?

Thanks! Bo

10

@bolockwood To help us keep support thread separates could you please create new thread for each of your other questions here https://colorlibsupport.com/c/shapely/ instead of asking them in your single thread as it makes the thread messy and hard to read.

If you want to you can also add reference of this thread in your newly created thread.

We would be more than happy to help you on your new thread.