Solved Templates

Tuber

Asked by Tilen Harc 7 months ago Last activity 7 months ago

Hi guys!
I am building a webpage, using TUBER template. I has everything working, but I do not know where I made a mistake, that the look of this segment is not correct:
The DEMO:
https://ibb.co/ds71dbvF
My PAGE (https://lex-pixel.si/mi2new2026/index.php/zgodba):
https://ibb.co/6c63rhdG

I tried to change this:

.fun-fact:after {
    content: "";
    position: absolute;
    width: 60px;
    height: 60px;
    bottom: 0px;
    right: -60px;
    border-radius: 45%;
    box-shadow: -20px 20px 0px var(--sppb-bg-primary);
    border-bottom-right-radius: 0;
    border-top-left-radius: 0px;
    z-index: -1;
}

so that the color of the box-shadow is black - so I changed only this value:
box-shadow: -20px 20px 0px var(--sppb-color-primary);

And it worked fine - but after that the nice curve edge is gone... Can someone point me in the right direction? Also I think that the custom.css is not called up... I have it it "/templates/tuber/css/custom.css"

Accepted answer

Marked as the solution

Ziaul Kabir Staff

7 months ago

Hello Tilen,

Thanks for reaching out to us.

Issues is that, the fun-fact class is misisng in style -> class, please add this class.
for example: https://prnt.sc/3dOJ-yZmgxUe

Please, let me know the update.

Thanks

1 more reply

Tilen Harc Asked this

7 months ago

Hi, yes - you are correct. That was the problem.
But I still have an ongoing problem with the custom.css file.
If you see the photo: https://ibb.co/LDbJdDdh you will see that there is the code for the border radius applied, but it does not show up.
A similar problem is seen on this photo: https://ibb.co/b5fLgMLK --> I added the code:

.no-cap {
  text-transform: none !important;
}

to the custom.css file, but the css style is loaded only if the code (snippet) is also pasted in the Custom CSS box - why is it not enought to have it in the custom.css and just add the CSS class? Is t here a problem with loading the custom.css? I also tried with the override.css (on your page) and notjing changed...

Please, help is really appreciated.

Ziaul Kabir Staff

7 months ago

For border radius, you applied background color on column, so use this css:

div#column-id-06d67511-b2af-4dd4-b7f3-476a98a00a36{
border-top-right-radius: 30px;
}
.fun-fact:after {
    box-shadow: -20px 20px 0px #000000;
}

Also for text transform use this

#addonId .no-cap {
  text-transform: none !important;
}

#addonId will take no-cap class parent dynamic id and placed into it.

Thanks

Tilen Harc Asked this

7 months ago

You are a true master. After removing the background color of the column, I need only to add this code:

.fun-fact:after {
    box-shadow: -20px 20px 0px #000000;
}

Thank you!!!!

Ziaul Kabir Staff

7 months ago

You are welcome. We greatly value your opinion and would love to hear your feedback about SP Page Builder. If you could spare a moment, it would mean a lot to us!

You can share your review here:

Joomla Extensions Directory

Trustpilot

In the docs