Shape 5

Joomla Templates => Zoka Transports - Club => : susa June 16, 2015, 03:41:20 AM



: Opacity of Highlight Colour 1
: susa June 16, 2015, 03:41:20 AM
Hi
How can I reduce the opacity of HIGHLIGHT COLOR 1?
It defines the Highligth color of the horizontal accordion.
Thanks
Michael


: Re: Opacity of Highlight Colour 1
: mikenicoll June 16, 2015, 11:16:52 PM
Hello,

You would need to manually adjust the coding used for this highlight color below by adding an opacity to the background call.

:
Template.CSS - Line 1049

.module_round_box-highlight1 {
    background: #f8f8f8 none repeat scroll 0 0;
    color: #000000;
    margin-bottom: 55px;
    margin-left: 12px;
    margin-right: 12px;
    padding: 40px;
    text-shadow: none;
}


: Re: Opacity of Highlight Colour 1
: susa June 18, 2015, 02:33:21 PM
Hi Mike, thanks for your replay!
I used the code you send, but it did not work.

Then I tried rgb:
.module_round_box-highlight1 { text-shadow:none; background:rgba(20,154,184, 0.6); color:#000000; padding: 40px; margin-bottom:55px; margin-left: 12px; margin-right: 12px;}
That did not work as well.

I found this:

.horzaccordion li:hover .image_title {
  background: rgba(20,154,184, 0.9)!important;

Might be, that the !important is the problem. But I do not know where to edit those lines.
What can I do?
Thanks for your support
Michael


: Re: Opacity of Highlight Colour 1
: mikenicoll June 19, 2015, 05:12:36 PM
Hello,

The coding I sent doesn't have an opacity value in it. You would use the coding location I gave you and modify this line:

:
background: #f8f8f8 none repeat scroll 0 0;

And include an RGBA instead with an opacity at the end.

:
 background: rgba(54, 25, 25, .5);


: Re: Opacity of Highlight Colour 1
: susa June 22, 2015, 04:01:19 PM
Hi Mike, thanks for your answer.
I added this code:
.module_round_box-highlight1 {
   text-shadow:none;
    background: rgba(20,154,184,0.3) none repeat scroll 0 0;
     color:#000000;
   padding: 40px;
   margin-bottom:55px;
   margin-left: 12px;
   margin-right: 12px;}   
   
But it did not work. I also tried some variations.
I think, that the problem is caused by the !important mentioned in my previous message.
Please have a look at the file attached.
Thanks for your support
Michael


: Re: Opacity of Highlight Colour 1
: mikenicoll June 22, 2015, 11:41:15 PM
Hello,

If you remove the !important call from the code and then add your own !important override in the custom.css does it work then?  I don't have a URL to reference off of so I am not quite sure where the override is coming from in this case.

Regards,


: Re: Opacity of Highlight Colour 1
: susa June 23, 2015, 04:01:58 AM
Hallo Mike,
it is this site: http://susa.prospere2e.de/
I sent you the access data some day ago.
What is the name of the file where I can find the !important?
Thanks
Michael
 


: Re: Opacity of Highlight Colour 1
: mikenicoll June 24, 2015, 03:46:39 PM
Hello,

This actually would involve some custom changes which isn't generally something we provide support for. I will explain the files below that you can change. The highlight_1 color is echoed to multiple elements in the index.php with the following block:


.button:hover, .s5_button:hover, .s5_highlight2, a.readon:hover, p.readmore a:hover, .s5_is_css_wrap_7 .s5_is_css_hidden a.darkcolor:hover, li.pagenav-prev a:hover, li.pagenav-next a:hover, .s5_ls_search_word, #s5_ls_outer_wrap .s5_ls_readmore:hover, #s5_accordion_menu h3:hover, .validate:hover, .pages_highlight_box, .module_round_box-highlight1, #s5_responsive_mobile_drop_down_wrap button:hover, #s5_responsive_mobile_drop_down_wrap .button:hover, .pager a:hover, .btn:hover,
:
.chzn-container .chzn-results li:hover, .icon_hover, .social_icon:hover, .ion-play-size:hover, .circle_table_icons:hover, .ac-container input:checked + label, .ac-container input:checked + label:hover, .ac-container2 input:checked + label, .ac-container2 input:checked + label:hover, .pager a:hover, .btn:hover, .chzn-container .chzn-results li:hover, .module_round_box-highlight_border:hover, .module_round_box-highlight_noborder:hover, .horzaccordion .image_title a.btn, .s5_pricetable_column.recommended, #myGallery a.readon, #searchForm button.btn, div.catItemCommentsLink a:hover, div.catItemReadMore a:hover {
    background-color: #fff000 !important;
}

The background color used above is echoed from the Template Manager highlight color choice but also has a !important tag so it cannot be overridden. You would need to go into the index.php file and find the code block above and change the PHP echo to something with an opacity. So instead of the #fff000 it would be something like so:

:
background-color: rgba(54, 25, 25, 0.5);
Where 0.5 is the opacity level.

Regards,


: Re: Opacity of Highlight Colour 1
: susa July 01, 2015, 02:21:01 AM
Hallo Mike,
in the end it worked by reducing the given opacity value in the index.php.
Regards
Michael


: Re: Opacity of Highlight Colour 1
: mikenicoll July 01, 2015, 06:06:22 PM
Alright sounds good. Let us know if you have any further questions.