[MarceloParticipant]

Hi,

I want to give a style to a Widget. The style is for this widget only. I’m trying to paste this CSS code in the CSS Custom but it’s not working.

.widget ul, .widget ol {
overflow: hidden;
margin-left: 0;
border: 1px solid #ddd;
border: 1px solid rgba(0, 0, 0, 0.16);
list-style: none;
border-radius: 6px;
background-color: white;
box-shadow: 0 1px 1px rgba(36, 36, 36, 0.95);
}

.smart-post-list-main img {
float: left;
margin-right: 5px;
padding: 0 10px 0 0;
}

a.smart-post-list-title, a.smart-post-list-title:active, a.smart-post-list-title:visited {
font-size: 20px;
line-height: 27px;
color: #b10000;
}

Many thanks for your help and attention! 🙂

[MarceloParticipant]

This reply has been marked as private.

[RupokMember]

Hi There,

Thanks for writing in! Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

[MarceloParticipant]

Hi

It’s quite simple. I placed this element widget in my home page:

And I want to give it CSS styles so it look nice.

The styles I want to use are:

.widget ul, .widget ol {
overflow: hidden;
margin-left: 0;
border: 1px solid #ddd;
border: 1px solid rgba(0, 0, 0, 0.16);
list-style: none;
border-radius: 6px;
background-color: white;
box-shadow: 0 1px 1px rgba(36, 36, 36, 0.95);
}

.smart-post-list-main img {
float: left;
margin-right: 5px;
padding: 0 10px 0 0;
}

a.smart-post-list-title, a.smart-post-list-title:active, a.smart-post-list-title:visited {
font-size: 20px;
line-height: 27px;
color: #b10000;
}

P.S. I copied these styles from Google Chrome when I was using the developer tool.

If you need more clarification please let me know.

Thanks!

[MarceloParticipant]

Hi Team,

The CSS Code Worked when I placed it in Custom CSS but it is changing all the Widgets in my theme. How can I make the CSS change only the style of this Widget in my Home page?

Do I have to use an ID? Can you please help me!

CSS is changing the widget styles of the widgets in my blog post. As you may know the widget style of integrity is not this one below. The CSS code I placed on the Custom CSS is changing the Widget global style.

See the image below

Thanks!

[NicoModerator]

Hi There,

Thanks for updating.

You can try adding .home in your custom code.

For example:

.home .widget ul, .widget ol {
overflow: hidden;
margin-left: 0;
border: 1px solid #ddd;
border: 1px solid rgba(0, 0, 0, 0.16);
list-style: none;
border-radius: 6px;
background-color: white;
box-shadow: 0 1px 1px rgba(36, 36, 36, 0.95);
}

As you can see there is a class home at the first, It means all change for widgets is for home only. if you want to change for other pages, you could try adding the class page id.

https://community.theme.co//kb/how-to-locate-post-ids/ – guide to locate ID.

Hope it helps.

Thanks.

[MarceloParticipant]

Hi thank you for your reply 🙂

I’ve added the code in Custom CSS but it still changes the styles of widgets in all pages not only the home page. A’m I missing something?

Thanks!

[ThaiModerator]

Hi There,

Please update the previous CSS a bit:

.home .widget ul, 
.home .widget ol {
overflow: hidden;
margin-left: 0;
border: 1px solid #ddd;
border: 1px solid rgba(0, 0, 0, 0.16);
list-style: none;
border-radius: 6px;
background-color: white;
box-shadow: 0 1px 1px rgba(36, 36, 36, 0.95);
}

Hope it helps.

[MarceloParticipant]

Hi there!

Thank you again for your time but unfortunately the CSS provided did not change the Widget CSS Style of just the home page, it changed the CSS Style of the widget of all pages.

Can you please help me please?

Many thanks again!

[LelyModerator]

Hello There,

Upon checking you’ve added that code in Cornerstone Page CSS. Then you have the following code in Appearance > Customize > Custom > CSS:

.widget ul, .widget ol {
overflow: hidden;
margin-left: 0;
border: 1px solid #ddd;
border: 1px solid rgba(0, 0, 0, 0.16);
list-style: none;
border-radius: 6px;
background-color: white;
box-shadow: 0 1px 1px rgba(36, 36, 36, 0.95);
}

Above code in Customizer overwrite what you have in Cornerstone. Please remove that.

Hope this helps.

[MarceloParticipant]

Hi there,

I have removed the code and it worked. To be honest I don’t know how to code
was placed there 😉

Great work team! 🙂

[LelyModerator]

You’re welcome.

Cheers!
X

[Author]

Posts