Assigning Border CSS To Add On - Question | JoomShaper
Black Friday sale is live with flat 50% OFF. Sale ends soon! Grab your deal now!
Back to the questions

Assigning Border CSS To Add On

H

Haluk

SP Page Builder 2 years ago

Hi – I am using the heading and text block add-ons to create the boxes seen in the picture. It is a bit of a shame that borders cannot be individually styled at the moment. Anyway, I am using "border-radius: 10pt 10pt 0pt 0pt;" for the top boxes and "border-radius: 0pt 0pt 10pt 10pt;" for the bottom boxes.

However, I cannot work out how to assign these at the back end – meaning

.head {border-radius: 10pt 10pt 0pt 0pt;}

in the custom css file and having CSS class "head" for the heading addon is not working.

The only way I can make it work is to create the addons, get their ID via Web Inspector and then create CSS for each box – for example, for the picture shown 

#sppb-addon-cd9d55ce-23c7-4fc0-adf7-56992902b1bc {
  /***  CSS Rounded 1st box top Corners ***/
  border-radius: 10pt 10pt 0pt 0pt;
} 
#sppb-addon-e6136dcc-0f9d-46c4-bcb9-18631e3d317f {
 /***  CSS Rounded 1st box bottom Corners  ***/
 border-radius: 0pt 0pt 10pt 10pt;
}

etc.

This is extremely cumbersome to do for the entire site. Is there any other way of doing this? Or even to name the addons so it is not like this long line of characters cd9d55ce-23c7-4fc0-adf7-56992902b1bc but something more sensible like topbox etc?

0
7 Answers
Order by
Oldest Newest Votes
Pavel
Pavel
Accepted Answer
2 years ago #138701

Hi.

  1. pt not used in the web or at least only for font-size. Use px instead
  2. You should explore the code via DEV Tools to make the aimed selector

Two addons are not required for your goal, but only one. Remember optimization. The more addons you use, the more code you get at the output. Following your picture, it is enough to use only Text Addon.

Add class.

Added class and child classes that can be stylized using the parent class

The code will be like this:

.head-border .sppb-addon-title {
    display: block;
    background-color: #cf9d5f;
    text-align: center;
    padding: 1em 1rem;
    border-radius: 10px 10px 0 0;
}
.head-border .sppb-addon-content {
    background-color: #84ad76;
    padding: 1em ;
    border-radius: 0 0 10px 10px;
}

Now it’s enough for you to just add the head-border class to any other text addon and you will get the same appearance

0
H
Haluk
Accepted Answer
2 years ago #138693

Here is the picture ![https://prnt.sc/WpRBNff-KoRj]

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 2 years ago #138704

Hi Haluk,

Thanks for contacting us, you can follow Pavel's instructions. And thanks a lot Pavel for sharing the solution so nicely and clearly. Its really amazing to see that user's are helping each other. Haluk I hope it will help you.

-Regards.

0
H
Haluk
Accepted Answer
2 years ago #138710

That's brilliant thank you – but I seem to have a white space between the title and content – I copied your settings exactly which I will adjust in due course to fit with my design but I need to solve this gap problem before.

![https://prnt.sc/f-PmFqSq1DmK]

(PS Web Inspector is Safari equvilant of DevTools in Chrome)

0
H
Haluk
Accepted Answer
2 years ago #138715

OK found the culprit – bootstrap gives 0.5rem margin to H3.

Thank you very much, Pavel. It was very qucik and brillinat answer.

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 2 years ago #138719

Glad to know that you have found the solution. You can now close this post by accepting the answer.

0
Pavel
Pavel
Accepted Answer
2 years ago #138812

but I seem to have a white space between the title and content

Hi. Set all other things in addon settings. Text color, Title margin top / botton and ect. (Set Title margin botton to 0). Not need override Bootstrap CSS code

0