Start a new topic
Answered

CSS Classes to set font style

Enjoying getting everything configured.  In the Price Menu page, I noticed the font style change by changing the class between "Price", "subprice", "sub-price" and "feature" which is fantastic.  One item I wanted to do in the Pricing Menu is set the background color of one of the "Features" so I set out to find out how to make my own CSS Class, e.g. FeatureHighlight, with a font definition.   I searched the Admin Console and then the Help areas but did not see anything obvious.  Is there a way I can make my own CSS Classes so I can define preset font styles like "price" and "subprice"?  Also, in searching for how to do this there was a semi-related comment about using "one of the Classes" but I was unable to find a list of the ones available.  Is there a list I can review?


Thanks for the guidance in advance!

-P


Best Answer

Hi Philip,


Thank you for your message. 

I'll be more than happy to assist you. 


The easiest way to do it will be adding the IDs in the CSS code.

This is the code to change the background only on these columns.


#link157, #link232, #link158, #link234, #link185, #link172 {

  background-color: #FCFF72;

}


How did you get the code? 


Please go to your pricing page and right click on the first row you want to edit. 

**For example: "Appear in up to 5 States".  

And select the option: "Inspect Element".

As you can see in the screenshot below there is ID for that row, so please copy it.

**For example: "link234".

When you will use an ID in CSS you need to a "#" at the beginning of the ID like this: #link234.

Then do the same with all the rows you want to edit, please do not forget to use commas between the IDs. 

**For example: 


#link234#link157, #link232, #link158, #link185, #link172 {

  background-color: #FCFF72;

}


And just change the background color to the color you want to use. 

Here's a long list of HTML colors may want to check. 




Please let me know if you have any question.


Thanks! :) 



1 person has this question

Hi Philip, 


Thank you for your questions. 

There is not a list of variables yet. Our Team is working on the documentation


You can use the existing classes and you just modify the CSS. However if you want to use your own classes you need to modify the widgets. 

I'll recommend you to use the existing classes and change the fonts, background, etc. 

If you share more information about what you want to do with a screenshot I'll be more than happy to assist you. 


.Thanks! :) 

Thanks Luana,


I attached an edited screenshot which I hope is helpful.  I am familiar with HTML but a CSS novice.



Thanks for your help in advance!

-P

jpg
Answer

Hi Philip,


Thank you for your message. 

I'll be more than happy to assist you. 


The easiest way to do it will be adding the IDs in the CSS code.

This is the code to change the background only on these columns.


#link157, #link232, #link158, #link234, #link185, #link172 {

  background-color: #FCFF72;

}


How did you get the code? 


Please go to your pricing page and right click on the first row you want to edit. 

**For example: "Appear in up to 5 States".  

And select the option: "Inspect Element".

As you can see in the screenshot below there is ID for that row, so please copy it.

**For example: "link234".

When you will use an ID in CSS you need to a "#" at the beginning of the ID like this: #link234.

Then do the same with all the rows you want to edit, please do not forget to use commas between the IDs. 

**For example: 


#link234#link157, #link232, #link158, #link185, #link172 {

  background-color: #FCFF72;

}


And just change the background color to the color you want to use. 

Here's a long list of HTML colors may want to check. 




Please let me know if you have any question.


Thanks! :) 


Worked perfect!  Thanks for the explanation!


-P

My pleasure! :)