Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #13413

    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

    #79143

    Hi!

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

    Regards,

    Peter

    #79144

    You could alternately use a transparent .png background image.

    #79145

    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

    #79146

    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

    #79147

    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.

    #79148

    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

    #79149

    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?

    #79150

    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

    #79151

    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

    #79152

    Hi huzidesign,

    Use this css code:

    #qtranslate-3-chooser li {
    display: inline-block !important;
    }

    Hope this helps. :)

    Regards,

    Ismael

    #79153

    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

    #79154

    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

    #79155

    Hi Ismael,

    It works perfect! Love the theme!

    Thanks,

    huzi

    #79156

    Hi huzi,

    Glad that we could help you. :)

    Cheers,

    Ismael

Viewing 15 posts - 1 through 15 (of 15 total)

The topic ‘Change the opacity of mini content box while keep the text unchanged’ is closed to new replies.