Forum Support

Shape 5
March 29, 2024, 08:19:49 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News: Shape 5 Forum
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Opacity of Highlight Colour 1  (Read 885 times)
susa
Jr. Member
**
Offline Offline

Posts: 14



« 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
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #1 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

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
susa
Jr. Member
**
Offline Offline

Posts: 14



« Reply #2 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
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #3 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

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
susa
Jr. Member
**
Offline Offline

Posts: 14



« Reply #4 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
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #5 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

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
susa
Jr. Member
**
Offline Offline

Posts: 14



« Reply #6 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
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #7 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

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
susa
Jr. Member
**
Offline Offline

Posts: 14



« Reply #8 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
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #9 on: July 01, 2015, 06:06:22 PM »

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

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2013, Simple Machines
Joomla Bridge by JoomlaHacks.com
Valid XHTML 1.0! Valid CSS!
Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $89 for access to all of our themes.
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.