Jump to content
Sign in to follow this  
cgouldie

Removing Background Image From Homepage Only

Recommended Posts

cgouldie

I am trying to remove only the background image from my static homepage. I wish to keep the selected image on all other pages within my site, but must remove it from the homepage only. This code `.canvas #page, .full-width #page, body.fixed_width{background:transparent !important;}` seems to work well for removing it from all pages, but I cannot figure-out how to make it work only with the homepage

Share this post


Link to post
Share on other sites
cgouldie

Thanks, but I have. It just causes nothing to happen. Any other suggestions..?

Share this post


Link to post
Share on other sites
bryan-hadaway

You've tried: `.home .canvas #page, .home .full-width #page, .home .fixed_width{background:transparent !important;}` or `.home .canvas #page, .home .full-width #page, .home .fixed_width{background:none !important;}` Thanks, Bryan

Share this post


Link to post
Share on other sites
cgouldie

Unfortunately, these still do not work for me. I believe that I found this code in this post... `http://www.pagelines.com/forum/topic.php?id=4495` As you can see, even though this post is labelled as "answered" I couldn't get anything in there to allow me to set another image without the main one overlapping it. (This is ideally what I would like to do...) However, I would also settle for just being able to remove the current image from the homepage... Thanks.

Share this post


Link to post
Share on other sites
cgouldie

Also, I am changing this in the platform pro dynamic.css ... Hope that is correct as well.

Share this post


Link to post
Share on other sites
Kate

Hi Curtis - Do you have a link available, please?

Share this post


Link to post
Share on other sites
cgouldie

Sorry, I am currently building the site on a MAMP installation within my MBP, so http is localhost...

Share this post


Link to post
Share on other sites
cgouldie

Here is a screenshot of what is happening... eA42D.png I can either totally remove the wheat background from all pages or none at all...

Share this post


Link to post
Share on other sites
cmunns

If you are going to add CSS you should not be adding it to the dynamic.css file. You should add the rules Bryan mentioned above to the custom.css or preferably to the base.css while using the Base child theme.

Share this post


Link to post
Share on other sites
cgouldie

Thanks for making sure that I'm putting the code in the correct location... however, the results are the same. Both lines stated above will work without the `.home` prefix. As soon as you add `.home` the selected image again overlaps in the view as shown above. Thoughts..?

Share this post


Link to post
Share on other sites
bryan-hadaway

Okay, time to dive a little deeper, can you please post all the custom css that you've added yourself so that we can have a look. Thanks, Bryan

Share this post


Link to post
Share on other sites
cgouldie

a) This has been added to the base.css for my header... `#branding .content-pad{padding-left:0px; padding-right:0px; !important;} #branding .mainlogo-img{display:block;margin-left:-5px;}` B) The code from platformbase/functions.php for the stumbleupon icon was removed so it would not display. c) This line was changed in theme.php to align all icons to the left side of the header... `.icons {text-align: left;position: absolute;bottom: 15px; left:0px;line-height: 20px;height: 24px;}` Everything else is still "out of the box". Thanks.

Share this post


Link to post
Share on other sites
cmunns

I actually recently noticed that the latest WP versions may have switched the class for home. Try this CSS instead: `.home-page.canvas #page, .home-page.full-width #page, .home-page.fixed_width{background:transparent;}`

Share this post


Link to post
Share on other sites
cgouldie

Sorry to say, but no dice. Tried... `.home-page.canvas #page, .home-page.full-width #page, .home-page.fixed_width{background:transparent;}` & `.home-page.canvas #page,`.home-page.full-width #page, .home-page.fixed_width{background:none;}` & `.home-page.canvas #page, .home-page.full-width #page, .home-page.fixed_width{background-image:transparent;}` & `.home-page.canvas #page, .home-page.full-width #page, .home-page.fixed_width{background-image:none;}` & all of the above with `!important` on the end... Thoughts?

Share this post


Link to post
Share on other sites
bryan-hadaway

At this point I just need to check it out myself. Is there no way to create an online test environment? Do you not have a host or domain to eventually go online with? Then you could put it in maintenance mode when we're done helping. Also in the future any time you needed help you could take it out of maintenance mode temporarily for us to help you more easily. Thanks, Bryan

Share this post


Link to post
Share on other sites
cgouldie

As we are currently replacing our existing Joomla site with our new Wordpress site and subdomains... no it is not yet hosted on a web server environment outside of my MBP. It is possible that I may be able to get this done in the next week or so as we are nearly ready to launch... especially if we can get this issue solved. Thanks.

Share this post


Link to post
Share on other sites
cmunns

instead of using .home view the source and look for the unique page id attached to the home page and try to use that as the selector pre-fix instead. Again, we could do this if we could see a link :(

Share this post


Link to post
Share on other sites
cgouldie

It seems that adding `?page_id=1498` or just `page_id=1498` as teh prefix in place of `.home` doesn't have any effect either... It also doesn't seem to matter whether or not that page is set to display as the home page or not... Thanks.

Share this post


Link to post
Share on other sites
kastelic

It looks to me like you need to add a space after .home or .home-page. Try this:

.home #page{background:none}

Share this post


Link to post
Share on other sites
cgouldie

This works perfectly!!! There always has been a space after `.home`, but by removing all of the `.full_width` & `body.fixed_width` stuff... it actually worked! Good Karma headed you way!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×