Hi

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.

Hello, Ok - but

1. What is "Style / Custom CSS" for?
2. 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.

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.

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?

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

Each Page has Custom CSS section, use it :)

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;
}

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.

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

.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;
}