Forum Support

Shape 5
March 28, 2024, 11:50:30 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: Footer background colour  (Read 934 times)
sheldesign
Jr. Member
**
Offline Offline

Posts: 184



« on: September 14, 2015, 01:08:31 AM »

Hi

Where/how can I change the background of the footer?

thanks
Logged
bcoadmin
Jr. Member
**
Offline Offline

Posts: 83



« Reply #1 on: September 14, 2015, 02:51:16 AM »

Hi,

Not sure if you can change the background colour in the template settings - perhaps one of the Mikes can say?

However, you should be able to add the following to your custom.css file: -

Code:
#s5_footer_area1 {
    background-color: green !important;
}

Cheers
Logged
sheldesign
Jr. Member
**
Offline Offline

Posts: 184



« Reply #2 on: September 14, 2015, 07:18:02 AM »

Thanks for the suggestion, but no that doesn't work.

When I use the inspector in my browser, '#s5_footer_area1' doesn't appear to be the whole background, just the footer text itself.

Can anyone else help with this?

thanks
Logged
mikek
Administrator
*****
Offline Offline

Posts: 28743



WWW
« Reply #3 on: September 14, 2015, 07:44:12 AM »

Hello,

The footer area is controlled by the highlight color, which is outputted in the template's index.php file. You'll either have to remove the call for #s5_footer_area1in index.php or add a new call in index.php just above </style>:

#s5_footer_area1{
background:#000FFF !important;
}
Logged

Mike Knott
------------
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
sheldesign
Jr. Member
**
Offline Offline

Posts: 184



« Reply #4 on: September 14, 2015, 07:51:26 AM »

Thanks Mike - much appreciated
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #5 on: September 14, 2015, 10:34:56 AM »

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
bcoadmin
Jr. Member
**
Offline Offline

Posts: 83



« Reply #6 on: September 15, 2015, 08:47:49 AM »

Thanks for the suggestion, but no that doesn't work.

When I use the inspector in my browser, '#s5_footer_area1' doesn't appear to be the whole background, just the footer text itself.

Can anyone else help with this?

thanks

Hi,

Depending on which inspector and which browser that you use you may see different results which seem to indicate that only the text is being controlled.

This is not in fact a true refelction and may just be due to the different colour of the text area and the padding top and bottom.

The #s5_footer_area1 element definitely controls the whole of the footer area and therefore, in our opinion, adding the code to the custom.css is the most efficient method of acheiving what you need.

As MikeK points out the Highlight colour can be changed in the Template Manager but this will affect all areas that are governed by the Highlight colour and not just the footer area.

Hope this makes things a little clearer.

Cheers
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #7 on: September 16, 2015, 06:25:32 PM »

@bcoadmin -

Keep in mind that if there is a highlight color in the index.php targeting the #s5_footer_area1 element then using a !important override in the custom.css would not work. You would have to either remove the !important call from the index or remove that element from the PHP block and then re-apply it with a style in the custom.css so nothing gets overridden.

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
bcoadmin
Jr. Member
**
Offline Offline

Posts: 83



« Reply #8 on: September 17, 2015, 12:30:07 AM »

@mikenicoll

Mike, thanks for that.

I had not spotted that index.php had a style call with !important for #s5_footer_area1

Presumably the index.php style is called after the custom.css and therefore overrides the !important call?

We have been working on Ambient which does not have this call.

Note to self:  Be a little more observant in future  Tongue

Just out of interest, why is the style call in index.php for this template?

Cheers
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #9 on: September 17, 2015, 12:10:57 PM »

Hi bcoadmin,

You will find in a lot of our Templates we use Highlight Color options in the Template Manager. When we do this and want to assign the color to multiple elements we do so with a php echo in the index.php and assign multiple areas (such as the #s5_footer_area1) to it. Doing it this way allows the user to simply change the color in the back end without having to manually edit any CSS files.

That looks like this:

Code:
.jdGallery .carousel .carouselInner .active, .button, .readmore a, .readon, button, .S5_submenu_item:hover, .S5_grouped_child_item .S5_submenu_item:hover, .readon.dark:hover, .success_area_number, .s5_tab_show_slide_button_active, .progress_bar2, #s5_pos_custom_6, .s5_ls_readmore, .dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a, .dropdown-menu .active > a, .dropdown-menu .active > a:hover, .nav-list > .active > a, .nav-list > .active > a:hover, .nav-pills > .active > a, .nav-pills > .active > a:hover, .btn-group.open .btn-primary.dropdown-toggle, .btn-primary, .item-page .dropdown-menu li > a:hover, .blog .dropdown-menu li > a:hover, .item .dropdown-menu li > a:hover, .btn, .pagenav a, .readmore a, .s5_masonry_inactive, #s5_footer_area1, #s5_accordion_menu h3:hover, #s5_accordion_menu h3.s5_am_open, #s5_register, #s5_login, .module_round_box-highlight1, .module_round_box-highlight1_dark_title, .s5_pricetable_column.recommended .s5_title {
background:#<?php echo $s5_highlightcolor1?> !important;
}

So all the classes and id's above will take the background color selection from Highlight1 in the Template Manager using a !important call. You can also see here for a more detailed explanation of CSS specificity and what happens in the event of a coding conflict between 2 elements (which gets used).

http://www.standardista.com/css3/css-specificity/

Regards,
« Last Edit: September 17, 2015, 12:12:28 PM by mikenicoll » 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
bcoadmin
Jr. Member
**
Offline Offline

Posts: 83



« Reply #10 on: September 18, 2015, 07:16:49 AM »

Hi mikenicoll,

We understand everything you said - we just weren't looking closely enough at the inspector code to realise that the call was coming from the index.php file  Embarrassed

Cheers

Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #11 on: September 18, 2015, 09:23:09 PM »

Cheers Cheesy
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.