Solved SP Page Builder

video with round corners with css

Asked by eierkopf 4 years ago Last activity 4 years ago

Hello,
I want to display a video (addon raw-html) with round corners.
If I type "border-radius:10px" at the 'element' in the browser in the dev tools, then this works.
Where do I enter this code in the SPPB? Under "Style / Custom CSS" this does not work.
Thank You.

Addendum:
A cumbersome solution could be: Image Settings / Advanced "Custom Addon Width" = 75.
However, the image cannot be centered then...

Accepted answer

Marked as the solution

Paul Frankowski Senior Staff

4 years ago · edited

About H3, this will work for only that addon

10 more replies

Mehtaz Afsana Borsha Staff

4 years ago

Thanks for contacting us.

Custom css for Joomla 3
Note: Path towards custom CSS: Extensions>Templates>Styles> Click on your current default template name then choose Template Options. Then find custom CSS within the custom code.

Custom css for Joomla 4
Go to system--> https://prnt.sc/tDbSUJh6LiGu --> Default template-->Template options--> https://prnt.sc/A5nlsBvCQsqs And add your CSS there.

-Regards.

eierkopf Asked this

4 years ago

Hello,
Ok - but

What is "Style / Custom CSS" for?
When I type 'video {border-radius:10px;} in custom.css, then all videos are displayed round. But I want to be able to set this for each video. I thought the SPPB did that.

Paul Frankowski Senior Staff

4 years ago · edited

if I may....
Each addon has unique ID check it in HTML source preview or add Custom unique class name for addon then define in template Custom CSS file.

Have you ever worked with custom class names for modules in the past? It works in this same way.

Paul Frankowski Senior Staff

4 years ago · edited

For example, if you would use class name round-video

the correct CSS syntax will be

.round-video video {border-radius:10px !important;}

Do you see it now?

eierkopf Asked this

4 years ago

Thank you for pointing this out. That helps me.
However, I still don't know what I can enter in the addon under "Style / Custom CSS".

Paul Frankowski Senior Staff

4 years ago · edited

Each Page has Custom CSS section, use it :)

eierkopf Asked this

4 years ago · edited

Thank you for your answer.
But that doesn't work for me. Maybe you can help me:
I have an addon function box. There the title has the tag <h3>.
If I switch to 'Style / Custom CSS' and enter

h3.style {
   font-size:100px
}

nothing changes.
The dev tools display:

#sppb-addon-1626457463941 .sppb-addon-title {
    font size: 24px;
    Line-height: 24px;
}

Paul Frankowski Senior Staff

4 years ago · edited

As you know we are not here to teach CSS. For those you have local teacher in your city / country.

About:

h3.style { }

from where you took "style" class name ??

If addon Title have value 24px, maybe easier would be to change inside addon settings?

If you want to override this value in whole page, this may help:

.sppb-addon-title {font-size: 100px !important}

but it will be used also in mobile view.

eierkopf Asked this

4 years ago

It's not about teaching me CSS.
The SPPB offers the entry "Custom CSS" for each addon in the "Style" tab. I want to know how I can take advantage of this opportunity.
I don't want to change all headings <h3>, but only this only one as in the picture.

https://www.dropbox.com/s/m9yi0schitodlr2/h3%20in%2050px.JPG?dl=0

Paul Frankowski Senior Staff

4 years ago · edited

.round-video video {border-radius:10px;}

Is not for youtube/vimeo clips, I hope you know why. If not, becuase they use iframe for clips, not html5 video tag.

Different CSS is needed

iframe.sppb-embed-responsive-item {border-radius: 10px !important;}

In my demo site, this helped for mp4 video without poster image

.round-video video {
  border-radius: 10px !important;
  object-fit: cover;
}