|
: Footer background colour : sheldesign September 14, 2015, 01:08:31 AM Hi
Where/how can I change the background of the footer? thanks : Re: Footer background colour : bcoadmin 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: - : #s5_footer_area1 {Cheers : Re: Footer background colour : sheldesign 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 : Re: Footer background colour : mikek 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; } : Re: Footer background colour : sheldesign September 14, 2015, 07:51:26 AM Thanks Mike - much appreciated
: Re: Footer background colour : mikenicoll September 14, 2015, 10:34:56 AM Let us know if you have any further questions!
: Re: Footer background colour : bcoadmin 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 : Re: Footer background colour : mikenicoll 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. : Re: Footer background colour : bcoadmin 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 :P Just out of interest, why is the style call in index.php for this template? Cheers : Re: Footer background colour : mikenicoll 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: : .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 {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, : Re: Footer background colour : bcoadmin 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 :-[ Cheers : Re: Footer background colour : mikenicoll September 18, 2015, 09:23:09 PM Cheers :D
|