Support Forums

Support Online : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Different rounded corners on each corner

Featured Lock Resolved Task
Hi

I am trying to have some of the text blocks with rounded corners at the top and straight corners at the bottom.

if I use custom css

.topbox {

border-width: 10px;
border-style: solid;
border-radius: 10px 10px 0px 0px;
}

and use it in the text block css class field the border is on the content part of the block not on the containing block.

I tried on the Style section without success; not sure what my syntax should be - what would be my selector? Is it possible?


Thanks.

11 Answers

Paul Frankowski - Staff

More than a month ago #Permalink
I think I know... indeed, you cannot add custom CSS class for first "box" of addon, it works only for lower box.

Anyway You have two options (at least):

1) Add "border-radius: 10px 10px 0px 0px !important;"
for each Addon separately, using addon unique ID
(+ Code Inspector from your browser)
for example #sppb-addon-1526155193778 for BESPOKE box.

OR

2) Forget about settings addons from settings and define styles in CSS, using class

----
Personally depends on project I use both solution in this same regularity.
Of course with different changes.

Attachments (1)

  • code_inspector.png
    code_inspector.png 41.7 KB

Paul Frankowski - Staff

More than a month ago #Permalink
Hi,
what about border-color, not forget ?
---
show me URL, I will check.

Haluk

More than a month ago #Permalink
Thanks, Paul

Url is https://danielhanson.co.uk/

The top boxes on the pages

https://danielhanson.co.uk/bespoke

https://danielhanson.co.uk/testimonials

has border specified via Pagemaker default – however my client wants only the top corners rounded and no visible border colour – I am experimenting on the

https://danielhanson.co.uk/history

page without success I need the top block with rounded corners only at the top.

Paul Frankowski - Staff

More than a month ago #Permalink
About text boxes in Timeline, please use


.sppb-addon-timeline .sppb-addon-timeline-wrapper .timeline-movement .timeline-item .timeline-panel
{ border-radius: 5px 5px 0 0 !important; }


You know in template custom CSS or Page > Options > CSS

Paul Frankowski - Staff

More than a month ago #Permalink
About "testimonials" and similar :

1) for each addon add class "topbox"
2) make small correction of custom CSS


.topbox {
border-width: 10px !important;
border-style: solid !important;
border-radius: 10px 10px 0px 0px !important;
}

Haluk

More than a month ago #Permalink
Yes, I did it like that first without the !important bits however – if i put the .topbox in to the css class it applies only to the content – please have a look at history section again. made the border 1 px and white to show you the effect. I need the box with rounded top and straight bottoms.

How can I style the box not the content? Am I missing something?

Paul Frankowski - Staff

More than a month ago #Permalink
I hope that in addon settings you add "topbox" without dot.
------
I gave you ready code for testimonial and you haven't use it. :(:(

Haluk

More than a month ago #Permalink
Sorry Paul, is this getting lost in translation?

here is the page I am using

https://danielhanson.co.uk/history

It is a live site so I cannot mess around on every page till I found a solution.

my custom.css file has

.topbox {
border-width: 1px !important;
border-color: #fff;
border-style: solid !important;
border-radius: 10px 10px 0px 0px !important;
}

made the width 1px and colour white to show you the result of the above css

my text block has – please see attached image – 

and you can see the result in the URL – what I need to do is to have the rounded corners with straight bottom on translucent block.





topbox.jpg

Attachments (1)

  • topbox.jpg
    topbox.jpg 10.3 KB

Paul Frankowski - Staff

More than a month ago #Permalink
Just read my last response. All should be clear now.

Probably I thought about different text areas before in Time Line addon. I thought about small white boxed with events.

Haluk

More than a month ago #Permalink
Yes, last one works, thanks. Bit cumbersome but luckily there aren't many boxes to do! Bit surprised that border declarations are not separate for each side. Maybe next version!

Thanks again.


There are no replies made for this post yet.
Be one of the first to reply to this post!

Leaderboard (30 days)

Sifat

Sifat

Total Accepted Answers: 146
Paul Frankowski

Paul Frankowski

Total Accepted Answers: 86
Toufiq

Toufiq

Total Accepted Answers: 25
Pavel

Pavel

Total Accepted Answers: 4
Al Mamun

Al Mamun

Total Accepted Answers: 3

113

Templates

289407

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us