Opacity of Text boxes on Sliders in Tempera Theme

Hello,

From what i can see from their demo site, you might try using another class i found that the slider is using to create an opacity.

I saw this

.nivo-caption {
background-color: rgba(0,0,0,0.7);
}

change it directly or even easier, just override it by adding this css to your custom css file

.nivo-caption {
background-color: rgba(0,0,0,0.2) !important;
}

Seems to work in firebug without affecting the text. By using background-color and an rbga color code that includes alpha transparency as the last value, you get the opacity effect without the whole box changing to invisible.

Danny ??

Hi Dan,

Very cool!
I did not notice that value was rgb(A). Even if I had, I was not aware you could use an RGB color value ending in a transparency. It’s literally right below the value I was messing with in the CSS block.

You suggested marking it as !important. Is that necessary every time you enter Custom CSS or just good practice.
This is my second attempt at using WordPress. The first time I had a lot of custom CSS because the theme wasn’t nearly as “change friendly” so I made a child theme and I didn’t use the !important value at all.

Was I living dangerously?

I guess I should get a little deeper into my CSS textbook.

Thank you very much Dan

It’s actually not good practice to use !important except in very limited situations –

https://coding.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it/

https://james.padolsey.com/usability/dont-use-important/

Hi Folks

Just a question if I might, without completely turning this into a discussion about the !important declaration:

In my case the CSS code that declares the RGBA comes after the Opacity entry. So it would naturally carry more weight and therefore not need the !important added on?

Thanks for the links WPyogi.

In general, try it without the !important – does it work?

Hi WPyogi,

Yes it appears to work just fine. Entering the above CSS without the important declaration removes the box completely from all slides and leaves the text intact.

There is a line remaining that is the length of the now invisible text box between the two rows of text that I would like to shorten so it is only as long as the two rows of text but I think that might have to be the subject of another post if I cant figure it out. Or maybe just add on to this one if I find a quick fix.

Thank you very much for your prompt and helpful replies.

Mongoid

Without seeing your site, no way to help with a CSS issue like this. If that’s not possible, I’d suggest posting on the sub-forum for your theme:

https://www.ads-software.com/support/theme/tempera#postform

Or you may get a faster reply on the dedicated forum here:

https://www.cryoutcreations.eu/forums/f/wordpress/tempera

Well the site is not finished (waiting for real logo from printer,text and color adjutments etc) but I can put up a link so you can see what I’m talking about if you don’t mind having a look.

MyWebPage

I just wanted the line on the slider to follow the top row of text.

Thanks

Hello Mongoid,

Those are great questions. And with all things coding, I’d say it depends on the circumstances. For a great article to read about the balance, check this one out that did a good job explaining. Smashing Magazine !important Article Link

In short the answer is that in general it’s to be avoided where possible. Since it’s such a powerful declaration, it can make things harder for ‘end users’ of templates to make changes easily and predictably.

So far a theme maker, to use them could make life a nightmare when an end-user tries to modify a theme.

How about for the end-user or the person attempting to customize it without reselling it for others to develop? Ideally, it would be great to follow the inheritance rules and avoid it where possible. Thankfully WordPress not only follows these rules, but also has a css file heirarchy that also does. So a child theme css stylesheet will override (in most cases) the parent or main theme css. So will css placed in most custom css plugin editors. Child themes are nice in that you can easily track what changes you make as an end-user if something goes awry after you add custom css.

However, sometimes there could be inheritance issues with how a theme was setup, various browser display issues – mobile’s included, etc. Also, some saas based systems, cms’s and custom websites might not have child theme capability easily built in. In such cases, making lots of changes to 4 or 5 different stylesheets where anyone could get overwritten with upgrades could become a nightmare to redo, fix, troubleshoot, etc. And again, this does not necessarily apply to wordpress. But it can be typical of other types of systems you might later encounter in your design career. !important statements can help you in such cases to separate final customization in a way you can track and ‘rinse-and-repeat’ on any similar theming system later. In the case of recommendations i make, it can be hard for some beginners to know where to put things, and I don’t know whether they’ve done child themes, etc. So I’ll usually give them the code with !important in it so that the change takes effect. Often on here i’ve been reading how a person seems to actually have the right code, but it isn’t working-which means it’s either in the wrong place or something else. FOr those persons understanding css like yourself better, if you can do it without the !important in a way you can track your changes, avoid get overwritten on theme updates, and respect inheritance issues then that would be preferrable. But in a lot of cases you are the end-user, usually !important in a child theme isn’t going to cause you much confusion or issues anyways since they’re all in one place and you know where they are ??

Danny ??

Thanks Danny,

For both the previous post and the original answer to my question…now if I can just figure out where to adjust that remaining line in the text box…….I’ll still have a bunch more to do ??

Happy New Year!

Cheers