Forum Support

Shape 5
March 28, 2024, 05:02:21 PM *
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: Remove Home page content area background color  (Read 1222 times)
cdriscoll
Jr. Member
**
Offline Offline

Posts: 16



« on: April 23, 2015, 10:40:24 AM »

Hi Shape 5,
I am trying to modify just the  home page on a website with the Lime Light theme http://stairwaypartnerspublicwebsite.azurewebsites.net/. I would like to remove the white background so that the content area background is transparent but only on the home page. After inspecting the markup with FireFox I can set come CSS to modify the areas "s5_white_area" and "s5_shadow_area". But these changes will be throughout the whole site. Is there a way to target just the homepage for these changes in the theme? I can not find a unique defining ID or CLASS on the home page to help with the modification.
I also considered removing the background styling from the "s5_white_area" and "s5_shadow_area" areas and then adding back in the background colors on the needed pages/sections with the Shape 5 Theme Options but the Theme Options for Background Color does not seem to work in the Lime Light theme, the background image does work. Is the Lime Light theme one of the themes that the background color option does not work on?

Thanks
Logged
Tristan Rineer
Global Moderator
*****
Offline Offline

Posts: 3858

Gravatar


« Reply #1 on: April 24, 2015, 06:54:30 AM »

You can use the following code (in the theme's functions.php) to output a block of CSS only on the home page:

Code:
if(is_front_page()){
add_action('wp_head','home_page_css');
function home_page_css() {
$output='<style>

</style>';
echo $output;
}
}

Just put your CSS between the style tags, and it should be output on only the home page.
Logged

Tristan Rineer
------------
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
cdriscoll
Jr. Member
**
Offline Offline

Posts: 16



« Reply #2 on: April 24, 2015, 09:24:32 AM »

Hi Tristan,
Thanks for the help with this. I tried adding the following code to the Functions.php file and it does not seem to be loading into the front page.
Code:
<?php
if(is_front_page()){
add_action('wp_head','home_page_css');
function home_page_css() {
$output='<style>
#s5_white_area {
    background: none;
    background-color: transparent;
}
#s5_shadow_area {
    box-shadow: none;
    position: relative;
}
</style>'
;
echo $output;
}
}
?>
Do I need to ensure that a certain page is the front page?
Thanks for your help.
Logged
Tristan Rineer
Global Moderator
*****
Offline Offline

Posts: 3858

Gravatar


« Reply #3 on: April 27, 2015, 06:31:00 AM »

Try this:

Code:
<?php
add_action
('wp_head','home_page_css');
function 
home_page_css() {
if(is_front_page()){
$output='<style>
#s5_white_area {
background: none;
background-color: transparent;
}
#s5_shadow_area {
box-shadow: none;
position: relative;
}
</style>'
;
echo $output;
}
}
?>



If that doesn't work, try replacing "is_front_page" with "is_home".
Logged

Tristan Rineer
------------
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
cdriscoll
Jr. Member
**
Offline Offline

Posts: 16



« Reply #4 on: April 27, 2015, 02:12:16 PM »

Hi Tristan,
I was not able to get it to work by putting this into the themes Functions.php file. I was able to get it to work by inserting it without the "add_actions" directly into the index.php file.  Nothing was ever inserted into the head section from this code. Does the wp_head function work in the Lime Light theme? I did a bit of research on it and I found that this is based on the theme developers option to include it. I do have concerns about doing it this way if there is an update the the theme then it will be overwritten.
Logged
Tristan Rineer
Global Moderator
*****
Offline Offline

Posts: 3858

Gravatar


« Reply #5 on: April 28, 2015, 06:02:02 AM »

The framework is designed to properly use the wp_head action hook, I have no idea why it would fail to properly function on your site.

As far as updates go, it's unlikely that any updates will directly effect the main theme files; all updates are generally released as framework patches and only change files that are generic to the framework portion of all Vertex-based releases.
Logged

Tristan Rineer
------------
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
cdriscoll
Jr. Member
**
Offline Offline

Posts: 16



« Reply #6 on: April 28, 2015, 09:48:24 AM »

Hi Tristan,
I am writing this to help out anyone else that may want to use the wp_head action hook in the lime light theme.
I am not sure that the theme is set up correctly to use the wp_head action hook. I could be mistaken but it did not work until I did this fix.  I did some more reasearch and found out that the action hook has to be added before the closing </head> of the theme. To do this:
  • First add  <?php wp_head();?> right before the closing </head> tag in the header.php file (it looks like the Lime Light theme does not have a header.php, it seems like it is included in the index.php file) so add it before the closing </head> in the index.php file.
  • You can then add any functions to the functions.php file
After doing this Tristans code worked great.
Thanks again.
Logged
Tristan Rineer
Global Moderator
*****
Offline Offline

Posts: 3858

Gravatar


« Reply #7 on: April 28, 2015, 03:21:22 PM »

The wp_head call is located in core framework files and should function fine; I'm not sure why it didn't work correctly on your site, but the framework is definitely compatible.
Logged

Tristan Rineer
------------
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.