![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
Tagged: custom.css, Short Separator
-
AuthorPosts
-
February 15, 2020 at 3:24 pm #1184749
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
February 15, 2020 at 8:26 pm #1184812For 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
February 15, 2020 at 8:47 pm #1184829Hi 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,
VictoriaFebruary 16, 2020 at 12:46 am #1184890I 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
February 17, 2020 at 5:02 am #1185073Hi 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,
NikkoFebruary 17, 2020 at 11:17 pm #1185457Thanks a lot Nikko, it works ^__^ Best regards. Bruno
February 18, 2020 at 2:43 am #1185491Hi,
Did you need additional help or shall we close this topic?
Best regards,
Jordan ShannonFebruary 27, 2020 at 1:28 am #1188312Yes. 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
-
This reply was modified 4 years, 6 months ago by
Bruno.
February 28, 2020 at 5:47 am #1188716Hi 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,
NikkoFebruary 28, 2020 at 5:28 pm #1188866Hi Nikko. Your clarification solved my inability. Now is perfect. Thanks a lot. Best regards. Bruno
February 28, 2020 at 6:13 pm #1188875Hi,
Did you need additional help or shall we close this topic?
Best regards,
Jordan ShannonFebruary 29, 2020 at 1:06 pm #1189015Hi Jordan. You can close this topic. thanks a lot. Best regards. Bruno
March 1, 2020 at 8:08 am #1189172 -
This reply was modified 4 years, 6 months ago by
-
AuthorPosts
- The topic ‘Custom CSS to use short separator with different styles’ is closed to new replies.