-
Posts
-
Hello. I have to use a short separator on different pages, with different colors: on the home page I will use it white
http://www.brunocover.it/CMS/wordpress/trikego/ but in other pages I have to use it with other colors. For example, on another page, it must be blue
Would you be kind enough to show me the solution? To be able to completely customize all the short separator (horizontal line and dot in its center), and to have different classes to use to have a white, a blue and other color separator, different depending on the page or the background color of its container . As always thank you for your support. Best regards. Bruno
For example, on this page I would like to have it not white, but blue http://www.brunocover.it/CMS/wordpress/trikego/?page_id=62 for this I would like to understand how to make different css for different separator lines
Hi Bruno,
You can use page id class to change the separator color on different pages.
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
.page-id-143 #av_section_5 .hr-short .hr-inner, .page-id-143 #av_section_5 .hr-short .hr-inner-style { background-color: navy; }If you need further assistance please let us know.
Best regards,
VictoriaI tried as you suggest but nothing changes. Let me explain: for the example, the page is
http://www.brunocover.it/CMS/wordpress/trikego/?page_id=2864
The ID PAGE is 2864 ? And the css
.page-id-2864 #av_section_5 .hr-short .hr-inner,
.page-id-2864 #av_section_5 .hr-short .hr-inner-style {
background-color: #2c335d;
}or
.page-id-2864 #av_section_5 .hr-short .hr-inner,
.page-id-2864 #av_section_5 .hr-short .hr-inner-style {
background-color: #2c335d !important;
}but nothing changes, it remains white. If instead I use
.page-id-2864 .main_color .hr-short .hr-inner-style, .main_color .hr-short .hr-inner {
background-color: navy !important;
}The color from white change in navy, but on all pages, not only in that page ID 2864. Where am I wrong? Other solutions please? Thanks a lot. Best regards. Bruno
Hi Bruno,
Try to remove #av_section_5 so the code should be:
.page-id-2864 .hr-short .hr-inner, .page-id-2864 .hr-short .hr-inner-style { background-color: #2c335d; }Best regards,
NikkoYes. Please, I would like to be able to use a class instead of using PAGE ID. I would like to use the separator by customizing the color. I am currently using the css with page id on http://www.brunocover.it/CMS/wordpress/trikego/?page_id=62 and on http://www.brunocover.it/CMS/wordpress/trikego/?page_id=2864
/*** ID 62 Pagina CARGO BIKE ***/
.page-id-62 .hr-short .hr-inner,
.page-id-62 .hr-short .hr-inner-style {
background-color: #2c335d;
}
/*** ID 2864 Pagina PREZZI ***/
.page-id-2864 .hr-short .hr-inner,
.page-id-2864 .hr-short .hr-inner-style {
background-color: #2c335d;
}I would like to make a unique class, to be used on some separators, using a custom css class in Developer Settings, for example Blu2c335d
.Blu2c335d .hr-short .hr-inner,
.Blu2c335d .hr-short .hr-inner-style {
background-color: #2c335d !important;
}I tried but it doesn’t change, so I’m wrong https://ibb.co/tQBc6S0
http://www.brunocover.it/CMS/wordpress/trikego/?page_id=3129
Would you be kind enough to show me the solution? Thanks a lot. Best regards. Bruno
Hi Bruno,
We apologize for the delay.
You can do that by applying the class to a Color Section or any Column in the layout elements.
The CSS you put is correct the only missing requirement is to add Blu2c335d to the Custom CSS Class in the Color Section/Columns.
Hope this helps :)Best regards,
Nikko
- The topic ‘Custom CSS to use short separator with different styles’ is closed to new replies.