Change the opacity of mini content box while keep the text unchanged « Support Forum | Kriesi.at

Support Forum » Flashlight

Change the opacity of mini content box while keep the text unchanged

15 posts from 6 voices

Started 11 months ago by huzidesign
Latest reply from Ismael
This topic is closed
This topic is resolved

Tags:

huzidesign
Member

Hello everyone,

I am trying to change the opacity of the mini content box on the right bottom, but the text inside changes accordingly.

Can I set the opacity separately? I want to lower the opacity of the mini content box while keep the text inside unchanged.

There you can find my test website. The opacity is 90% now.

http://202.134.88.252/

Thank you so much for your help!

huzi

Posted 11 months ago #
Dude
Dude

Hi!

You can apply a rgba background color: http://www.css3.info/introduction-opacity-rgba/

Regards,
Peter

Posted 11 months ago #
fitzpatrick512
Member

You could alternately use a transparent .png background image.

Posted 11 months ago #
Devin
Moderator

It looks like you've got the rgba value in there and its working great :)

Just make sure to remove the main opacity (.9) so that the text doesn't have any.

Regards,

Devin

Posted 11 months ago #
pulpbyte
Member

Hi there,
After reading this post, I've managed to change the size in the Quick CSS but not the opacity and colours.
This is what i have put in:
.entry-mini {
width: 400px; background-color: rgb(114,131,141); opacity: 0.5;
}
But the colour didn't change and the opacity reduced including the text.
How do I change them without affecting the text and images?
Where is the custom CSS folder? In the ftp or my dashboard?
pulpbyte

Posted 11 months ago #
Dude
Dude
Try following code instead:
```
.entry-mini {
width: 400px; background-color: rgba(114,131,141, 0.5);
}
```
Yes you need to use ftp to access the flashlight/css folder. However you can also use the quick css field in the theme option panel.
Posted 11 months ago #
huzidesign
Member

Thank you so much you guys coz it helps me a lot!

There are two things I can’t figure out.

1. Can I change the text “English” and “中文” to two icons?
2. In the page, SHOP ONLINE, it’s the same problem actually, can I keep the opacity of all elements here remains unchanged while the opacity of the box underneath changes?

Here is the test website: http://202.134.88.252
The SHOP ONLINE page: http://202.134.88.252/shop-online/

Appreciate if you can help me to solve these problems.

Thanks,

huzi

Posted 10 months ago #
huzidesign
Member

And 1 more question:

3. Can I decrease the height of the box – “English, 中文” and the box that shows the icons of social media channels?

Posted 10 months ago #
Ismael
Moderator

Hey,

You can target ul.qtrans_language_chooser li.lang-en a span to create a button. This link might help you produce a css button http://css-tricks.com/examples/ButtonMaker/.

Regards,
Ismael

Posted 10 months ago #
huzidesign
Member

Thank you so much Ismael! I can finally change it to a buttom. ;-) but can I arrange the icon in the same line instead of two lines?

Thanks

huzi

Posted 10 months ago #
Ismael
Moderator
Hi huzidesign,

Use this css code:
```
#qtranslate-3-chooser li {
   display: inline-block !important;
}
```
Hope this helps. :)

Regards,
Ismael
Posted 10 months ago #
huzidesign
Member

Hi Ismael,

Perfect!!! You are so helpful! Thank you so much!!!

Can you please also tell me how to decrease the height of the white box that contains the "English" and "中文" icon as well as the white box that contains the social media icons?

Appreciate if you can help me! ;-)

Thanks,

huzi

Posted 10 months ago #

Ismael
Moderator

Hi huzi,

Try to add this on your code:

.widget_qtranslate {
   padding: 10px 20px 0 !important;
}

#qtranslate-3 ul {
   margin: 0 !important;
}

#socket {
   padding: 10px 15px !important;
}

//This will hide the copyright
.hide_content_wrap {
   display: none !important;
}

Just adjust the padding size. :)

Hope this helps. :)

Regards,
Ismael

Posted 10 months ago #

huzidesign
Member

Hi Ismael,

It works perfect! Love the theme!

Thanks,

huzi

Posted 10 months ago #
Ismael
Moderator

Hi huzi,

Glad that we could help you. :)

Cheers,
Ismael

Posted 10 months ago #