How can I change CSS for RENEW?

[Kowalczyk]

Hi,

I’m new in X environment and I have a problem - how can I change CSS for particular pages in RENEW stack?

For example - I would like to change a color in pricing table (featured column color - blue one)

Thank you for your help.
Tom

[paul.r]

Hi Tom,

To change it, you can add the code below in Theme Options > CSS

.x-pricing-column.featured h2 {
        background-color: red;
}

For future reference I was able to came up with that code using chrome dev tools.

[Kowalczyk]

Thank You

Could you tell me, where can I find entire structure of CSS?

[nico]

Hi @Kowalczyk,

You could find the CSS of the theme here:

framework\legacy\cranium\dist\css\site 

But I suggest not to touch or change any in your parent theme and use child theme style.css to change CSS or update CSS.

Child Themes | Themeco Docs

For more guide: Check the link below.

Best Practices | Themeco Docs

Hope it helps.

Let us know how it goes.

Thanks.

[Kowalczyk]

Ok, it will be next step in my journey…

Currently I would like to do some minor changes, perhaps using CSS section in theme options, and because of that I would like to know how can I find particular classes for visual objects.

For example - how can I find a class responsible for text color in the paragraph (gray one in attached picture)?

[nico]

Hi @Kowalczyk,

As mentioned by Paul above, you could use the browser developer tools to identify the class then add changes in your Custom CSS.

Share us the link where the image you share is located. I could suggest you the class to use for it will changed using CSS.

Thanks.

[Kowalczyk]

Here you can find a link: http://pmdojo.eu/o-projekcie/

I will try to use dev tools - good idea

Thank you in advance for your help.

[christopher]

Hi Tomasz,

With the same tool that my colleague mentioned I checked the code and found out that it is used the Text element:

Now there are options available in X > Theme Options > Renew and X > Theem Options > Typography to set the characteristics of overal text.

But each element used can have a separate color and stuff. So please check the Text element article to know more on how to change the color of the text without CSS.

I suggest that you Bookmark this page which is our Knowledgebase and lists all the helpful content, try to start from the getting started section.

I also encourage you to read the Cornerstone/Content Builder section which will give you an idea about how to lay stuff on the page.

So generally what I am asking is that you first take your time and do the research and learn different stuff and then if you need our help we will be more than happy to help.

Thank you.