Forum Support

 
Advanced Search


[1]

Offline susa
Free Member
Posts: 14
Posted on: 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
Logged

Offline mikenicoll
Free Member
Posts: 20162 WWW
Posted on: 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.

Code:
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;
}
Logged

Offline susa
Free Member
Posts: 14
Posted on: 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
Logged

Offline mikenicoll
Free Member
Posts: 20162 WWW
Posted on: 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:

Code:
background: #f8f8f8 none repeat scroll 0 0;

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

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

Offline susa
Free Member
Posts: 14
Posted on: 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
Logged

Offline mikenicoll
Free Member
Posts: 20162 WWW
Posted on: 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,
Logged

Offline susa
Free Member
Posts: 14
Posted on: 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
 
Logged

Offline mikenicoll
Free Member
Posts: 20162 WWW
Posted on: 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,
Code:
.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:

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

Regards,
Logged

Offline susa
Free Member
Posts: 14
Posted on: 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
Logged

Offline mikenicoll
Free Member
Posts: 20162 WWW
Posted on: July 01, 2015, 06:06:22 PM

Alright sounds good. Let us know if you have any further questions.
Logged
[1]

Jump to:  


Powered by SMF | SMF © 2013, Simple Machines
Joomla Bridge by JoomlaHacks.com
Page created in 0.025 seconds with 23 queries.
Need some help getting your site up and running? Be sure to check out our tutorials area, post on the forum or hire us
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.