Jump to content
flixbo

css for HOME only

Recommended Posts

Hi

 

I want to do a background image via css for the home page only. Can I insert css in the home text editor? If I do this, the css code disappears after saving the home site.

 

any idea?

 

best

felix

Share this post


Link to post
Share on other sites

hi Marty,

 

I tried, but I want the backgound image only on the start page. can I do this??

 

Felix

Share this post


Link to post
Share on other sites

ah, and theres another thing: the body of my shop has a width of 800px. but for the background image i want have a fullscreen image

 

so i have this css code:

 

background: url('../img/home.jpg') no-repeat center center fixed;

background-position:0 80px;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

 

but where to put it in???

Share this post


Link to post
Share on other sites

hi Marty,

 

I tried, but I want the backgound image only on the start page. can I do this??

 

Felix

Yes, you can do this. Just add something like the following to global.css.

 

body#index{
background:#000;
}

 

This will change ONLY the index page background to black. Of course, change it to the background you want to use.

 

Hope that helps!

 

Marty Shue

Share this post


Link to post
Share on other sites

oh great, it works, so awesome!!

 

can I use this way to add some css to specific CMS sites too? for instance to change the background color only of the page "legal notice" ??

 

really cool!

Share this post


Link to post
Share on other sites

oh great, it works, so awesome!!

 

Glad it worked for you!

 

can I use this way to add some css to specific CMS sites too? for instance to change the background color only of the page "legal notice" ??

 

really cool!

 

You could but it is a little more involved when talking about a specific CMS page. You can do the following but it will change the bg on all CMS pages.

 

body#cms{
background:#000;
}

 

Marty Shue

Share this post


Link to post
Share on other sites

ok I see. great so far. is it possible to involve CSS in the CMS -Editor directly?

 

and my last question to this topic: ;)

 

can I design several produkt pages with different design? for instance one design with product picture on left side and another with product picture on right side (and order button vice versa)? maybe theres a plugin for that? or does every product page has a unique tag?

 

thank you for all your help!!!!

Share this post


Link to post
Share on other sites

ok I see. great so far. is it possible to involve CSS in the CMS -Editor directly?

 

You can include inline styling but this is not a good practice. CSS should be left to your stylesheets.

 

and my last question to this topic: ;)

 

can I design several produkt pages with different design? for instance one design with product picture on left side and another with product picture on right side (and order button vice versa)? maybe theres a plugin for that? or does every product page has a unique tag?

 

thank you for all your help!!!!

I have never done this, nor have I seen it done. To my knowledge you cannot do it.

 

Marty Shue

Share this post


Link to post
Share on other sites

Marty,

 

I would like to do the same: change background colour on my index page only, however I have a DIV ID overlaying the body background.

 

 

#page {

 

 

background-color: #FFFFFF;

border-top-style: solid;

border-top-width: 0;

}

 

 

How can I add an index-only addition to the CSS #page ID?

 

Thanks so much man!

Share this post


Link to post
Share on other sites

in the header.tpl file (in your theme directory) add this:

 

{if $page_name=="index"}
   {literal}
   <style>
   #page {
   background-color: #FFFFFF;
   border-top-style: solid;
   border-top-width: 0;
   }
   </style>
   {/literal}
{/if}

  • Like 1

Share this post


Link to post
Share on other sites

in the header.tpl file (in your theme directory) add this:

 

{if $page_name=="index"}
{literal}
<style>
#page {
background-color: #FFFFFF;
border-top-style: solid;
border-top-width: 0;
}
</style>
{/literal}
{/if}

 

 

YOU ARE THE MAN! Thanks dude! :)

Share this post


Link to post
Share on other sites

YOU ARE THE MAN! Thanks dude! :)

 

IMHO there is a cleaner way of doing this. That doesn't require adding CSS to the header.tpl.

 

#index #page {
background: #fff;
border-top-style: solid;
border-top-width: 0;
}

 

Obviously, you will need to keep your original #page CSS as well.

 

Hope that helps!

 

Marty Shue

  • Like 1

Share this post


Link to post
Share on other sites

Hello guys,

 

How could i know all the specific css div page possible ?  like #index, #cms, ...

 

Because i have a blog and forum and would like to do the same, #blog or #forum wont work 

Share this post


Link to post
Share on other sites

Can I add some css only for smart blog module pages?

There should be a css file in the module's folder. Or use Firebug / your browser's development tools to find out.

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

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More