Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #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

    https://ibb.co/4RRYpmj

    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

    #1184812

    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

    #1184829

    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,
    Victoria

    #1184890

    I 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

    #1185073

    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,
    Nikko

    #1185457

    Thanks a lot Nikko, it works ^__^ Best regards. Bruno

    #1185491

    Hi,

    Did you need additional help or shall we close this topic?

    Best regards,
    Jordan Shannon

    #1188312

    Yes. 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

    https://ibb.co/tzn22hF

    .Blu2c335d .hr-short .hr-inner,
    .Blu2c335d .hr-short .hr-inner-style {
    background-color: #2c335d !important;
    }

    https://ibb.co/frGdMWW

    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, 3 months ago by Bruno.
    #1188716

    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

    #1188866

    Hi Nikko. Your clarification solved my inability. Now is perfect. Thanks a lot. Best regards. Bruno

    #1188875

    Hi,

    Did you need additional help or shall we close this topic?

    Best regards,
    Jordan Shannon

    #1189015

    Hi Jordan. You can close this topic. thanks a lot. Best regards. Bruno

    #1189172

    Hi Bruno,

    Thanks for letting us know, I’ll close this thread for now then. Please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘Custom CSS to use short separator with different styles’ is closed to new replies.