Okay
  Public Ticket #1591004
Dashed Border to Rows using Extra Class Name
Closed

Comments

  • Mike started the conversation
    May 29, 2018 at 2:50am

    Hi there, 

    How do you add a dashed line around elements in a row?

    e.g. i have a row with 1 title in the first section then under the title it has 3 columns each column has a fancy box (See attachment)

    I want to add a dashed border around these elements: 

    • Dashed lines
    • Grey colour
    • Rounded corners (20px)
    • responsive. 

    Can you help me do this. 

    e.g. can you provide the css/js code then provide me a "Extra Class Name" to add to this row. 

    note: it should be evenly spaced around the elements, im not sure how to do this. 


    Thank you.

  •  9,007
    Tahir replied
    May 29, 2018 at 10:07am

    Hey Again,

    Please provide the page url so that i can write up the custom css for whats possible.

    Thanks

    ThemeNectar Support Team 

  •   Mike replied privately
  •  3,032
    Andrew replied
    May 29, 2018 at 1:30pm

    Hey there,

    Thanks for reaching in,

    Please use this CSS in Salient > General Settings > CSS/Script Related > Custom CSS Code

    .wpb_wrapper { 
    border: 1px dotted #ccc!important;
    border-radius: 20px!important; 
            }

    Hope this helps,

    Regards

  • Mike replied
    May 29, 2018 at 2:42pm

    Thank you

    one quick question: how do you make it so that it is ONLY for specific sections? e.g. currently its added it to EVERY row/column on the website. 

    i only want to add it to 3 elements. 

    is there a way to use the "Extra Class Names"?

  •  9,007
    Tahir replied
    May 30, 2018 at 10:16am

    You can add it like this .

    Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):

    .extra-class .wpb_wrapper { 
    border: 1px dotted #ccc!important;
    border-radius: 20px!important; 
 }

    Thanks

    ThemeNectar Support Team