[SOLVED] - additional custom css - where to place ?

[dauerfrager]

Hi,

I am proud new user of prestashop and bought a mostly suitable theme - anyway I want to do some modifications in appearance and add some additional custom css rules resp. overwrite some rules. Is there a recommended way how to set a last called custom css file which is safe for being overwritten during any (automatic) update ?

 

I think this isn't that unsual because it is hard to find themes that fit 100% custom desires.

Of course can I add my css styles manually to css files on the webserver but I think there are maybe better ways.
Didn't find out yet to set this kind of option in the backoffice.

 

Thanks,

 

Karl

Edited August 30, 2015 by dauerfrager (see edit history)

[Denver Prophit Jr.]

Hi,

I am proud new user of prestashop and bought a mostly suitable theme - anyway I want to do some modifications in appearance and add some additional custom css rules resp. overwrite some rules. Is there a recommended way how to set a last called custom css file which is safe for being overwritten during any (automatic) update ?

 

I think this isn't that unsual because it is hard to find themes that fit 100% custom desires.

Of course can I add my css styles manually to css files on the webserver but I think there are maybe better ways.

Didn't find out yet to set this kind of option in the backoffice.

 

Thanks,

 

Karl

http://doc.prestashop.com/display/PS16/Theme+development+fundamentals is where you should start learning.

[dauerfrager]

Thanks - I know that but it doesn't answer my questions.
Of course can I hard add some css rules and I don't need any documentation for this but I think there shoud be a better way in Prestashop.
I am not developing a theme - I am using a theme and want to add some custom css rules to an existing theme.

Placing css in some folder of prestashop isn't the question.

 

Adding some (only a few) custom rules should be placed somewhere in the config in the backoffice.

 

Preferences = >SEO & URLs would be a suitable place to add this feature if not yet existing. :-)

[Denver Prophit Jr.]

Your custom CSS classes will go in the theme /css folder or in the /themes/xxxx/modules/xxx/css folder(s). Optionally, in theme sass / scss folders. There are no GUI related areas to make CSS changes like what you mention.

Edited August 29, 2015 by Denver Prophit Jr. (see edit history)

[dauerfrager]

Thanks for your hints.
When thinking longer about it, it is more theme-like related - so would make sense in the theme, in that point your are right, Denver Prophit Jr.

 

What is a bit unconvenient to do the changes directly in several block module css files - this does not give an overview of all additional changes from a theme.
Of course, this would be a way to go - what it makes more a (new) different theme based on another. Well this is philosophy I think.

There are reasons for and against it as mostly. :-)

 

Placing a new/own css additonal file in the autoload folder did not work. Are all (new) files added here automatically ?

Is there a specific order for the different css files loaded ?

 

So the reason to change some css styles are more personal.
When buying a theme it may match your desires to 90% if you are lucky.
There are some desing decisions which may be improved, in the concrete theme I don't like the header and footer very much.
I think the graphic designer does not spend much time on this stuff.

 

I don't understand in the last posting here what is the big difference between global and local css.

Css is just a collection of rules to display the site and can be overridden from any other css - the last definition counts.

So it is important that your personal additions in css are loaded last which points me to the initial question.

Edited August 30, 2015 by dauerfrager (see edit history)

[dauerfrager]

Well - checked shortly the css from autoload folder.

It is loaded but first and the block newsletter much later - so doesn't make sense to add overwrites in the autoload folder.

Edited August 30, 2015 by dauerfrager (see edit history)

[Denver Prophit Jr.]

Thanks for your hints.

When thinking longer about it, it is more theme-like related - so would make sense in the theme, in that point your are right, Denver Prophit Jr.

So it is important that your personal additions in css are loaded last which points me to the initial question.

It is what it is. You have the documentation to theme development. /modules/css is the front view for that module's display. If you do not know how to manipulate stylesheets then you should perhaps take the training course to learn how to develop or hire someone. While trying to be helpful, it would take weeks to teach. If you have a live site example and it's a small task, someone may be helpful enough to post a code snippet of what you should change and where. 

[dauerfrager]

No you didn't get it.
I am familiar with css and don't need your help in this point.
But I don't know the structure which css files are loaded in which order - if you can point me on a documentation of this single point it may be helpful.

css is a description language and what I was asking for here was more a conceptual think of Prestashop which is not defined in any css specification, I think.

[Denver Prophit Jr.]

No you didn't get it.

I am familiar with css and don't need your help in this point.

But I don't know the structure which css files are loaded in which order - if you can point me on a documentation of this single point it may be helpful.

css is a description language and what I was asking for here was more a conceptual think of Prestashop which is not defined in any css specification, I think.

I do get it. Have you read the documentation that I linked you, yet? For example: 

/themes/xxx/css/modules

If you want to control the output of the newsletter module, create folder there. Add your styles and it will be combined and compressed along with the other modules. If your changes are not in any module, check the ID in global or other files in theme/xxx/css/ and add it there. I just don't know what you are trying to do?  

[dauerfrager]

Well the initial question mentioned if there is a way to add one(!) personal css file with some personal modifications to a standard theme.

The answer I got is, that this is not existing - so I have to take as it is, in that point you are surely right.

 

To give an example, in TYPO3 you can easily add a personal css file (with maybe 20 or 30 lines which overwrites some of a few hundred css definitions) easily by placing it into a template:

 

page.includeCSS {
  file1=fileadmin/css/prettycool.css
}

 

This is very convenient and easy to handle and (!) allows several modules to be updated with new css style due to some new contents or whatever without beeing your personal definitions being overwritten during a module update. And your code is not spreaded over several files/folders, one line here, three lines here, 5 lines there.

 

You may argue, that there would be never an update for a theme. I am not sure - maybe, maybe not.

It is more likely, that there won't be an update, I think.

 

So at the end - the answer is: A personal css file is not existing - all has to be done inside a theme only.

I can live with it (or say better have to) but it was worth to ask for, don't you think so ? :-)

 

Cheers,

Karl

[dauerfrager]

Any way here to mark this thread/problem as "solved" ?

[Denver Prophit Jr.]

I think at the top of your forum post. Can mark solve and select the best answer.

[dauerfrager]

Sorry - not found.

If you could send me a screenshot - I will try.

But only available options are "hide" and theme no longer follow.

[Denver Prophit Jr.]

This link should help: https://www.prestashop.com/forums/topic/123579-solved-how-can-i-mark-a-topic-as-solved/?p=604777

[jake7]

dauerfrager - I got your question first time. To all others he simply wants to add a custom.css file to load from the Prestashop Head so he can make his own css overrides.

 

Simply add your newly created custom.css to - themes/yourtheme/css

 

Place the following in your header.tpl file which is located in themes/yourtheme.

<link rel="stylesheet" href="{$css_dir}custom.css" type="text/css" media="{$media}" />

Look for the following code:

{if isset($css_files)}
  {foreach from=$css_files key=css_uri item=media}
    <link rel="stylesheet" href="{$css_uri|escape:'html':'UTF-8'}" type="text/css" media="{$media|escape:'html':'UTF-8'}" />
  {/foreach}
{/if}

Then add your custom.css code line so it now looks like the following:

{if isset($css_files)}
  {foreach from=$css_files key=css_uri item=media}
    <link rel="stylesheet" href="{$css_uri|escape:'html':'UTF-8'}" type="text/css" media="{$media|escape:'html':'UTF-8'}" />
  {/foreach}
  <link rel="stylesheet" href="{$css_dir}custom.css" type="text/css" media="{$media}" />
{/if}

Credit goes to the original author - http://www.1squarepear.com/adding-a-custom-style-sheet-to-your-prestashop-theme/