css for HOME only

[flixbo]

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

[Carolina Custom Designs]

Why don't you just use the global.css to accomplish this? I don't think home text editor is what you are looking for.

 

Marty Shue

[flixbo]

hi Marty,

 

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

 

Felix

[flixbo]

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???

[Carolina Custom Designs]

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

[flixbo]

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!

[Carolina Custom Designs]

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

[flixbo]

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!!!!

[Carolina Custom Designs]

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

[flixbo]

ok, thank you for your answer.

[Carolina Custom Designs]

You are welcome! I hope you get everything working.

 

Marty Shue

[pmlvfs]

Worked for me, great help. Thank you

[Carolina Custom Designs]

You are welcome. Glad to hear it helped you as well.

 

Marty Shue

[RickieSee]

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!

[vekia]

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}

[RickieSee]

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!

[Carolina Custom Designs]

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

[RickieSee]

Thanks Marty - will try both!

[Carolina Custom Designs]

Thanks Marty - will try both!

 

You are welcome! We use this solution regularly with our clients.

 

Marty Shue

[LauraPresta]

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 

[Knowband Plugins]

If you don't want to modify your core files, you can use below module to add custom CSS on any particular page without modifying any code. 

 

http://addons.prestashop.com/en/page-customization/21546-knowband-custom-css-and-js.html

[wielkablaga]

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

[LauraPresta]

show your page url and ill tell you

[rictools]

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.