Css files

[mkli73]

Hello my name is Marina.

I am a web designer and completely new in prestashop.

Your tutorials are a great help.

I am starting my own theme based on a ready one in order to have all the files.

The first thing I would like to ask you is about the css files.

The general is the global.css one and in the header is stated with the following code

"{if isset($css_files)}
    {foreach from=$css_files key=css_uri item=media}
        <link rel="stylesheet" href="{$css_uri}" type="text/css" media="{$media}" />
    {/foreach}
{/if}"

 

Is this correct?

Furthermore in a ready made template like the one you have in your site there are a number of css files like address.css, cart.css e.t.c. Could you tell me in which .tpl are these css files added?

I hope I was clear enough.

Thanks in advance for your time.

Regards

Marina

[vekia]

these files aren't defined in .tpl files (usually)

these files are defined in controllers (.php files) or modules hooks like displayHeader.

these files are included with special function related to Context object, with code: $this->context->controller->addCSS();

 

for example:

$this->context->controller->addCSS(($this->_path).'someFile.css', 'all');

[mkli73]

Thank you ever so much, the thing I can not understand how the css of each different theme could be involved with controllers which are set up by default with prestashop.

And if the css are involved with the modules how will I know which module fit with which css file.

I hope I am not a headache but I am trying in find a way to study, do you have any reference for reading about controllers and also modules as whenevr I have looked they have only general information.

Thanks

Marina

Edited September 21, 2014 by mkli73 (see edit history)

[mkli73]

I am starting understanding the module and css

if you have time please have a look on the following module I can not see where the css file is attached.

Here is the code of the .tpl homeslider

"{*
* 2007-2014 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to [email protected] so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
*  @author PrestaShop SA <[email protected]>
*  @copyright  2007-2014 PrestaShop SA
*  @version  Release: $Revision$
*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*}
{if $page_name =='index'}
    <!-- Module HomeSlider -->
    {if isset($homeslider_slides)}
        <div id="homepage-slider">
            <ul id="homeslider">
                {foreach from=$homeslider_slides item=slide}
                    {if $slide.active}
                        <li class="homeslider-container">
                            <a href="{$slide.url|escape:'html':'UTF-8'}" title="{$slide.legend|escape:'html':'UTF-8'}">
                                <img src="{$link->getMediaLink("`$smarty.const._MODULE_DIR_`homeslider/images/`$slide.image|escape:'htmlall':'UTF-8'`")}"{if isset($slide.size) && $slide.size} {$slide.size}{else} width="100%" height="100%"{/if} alt="{$slide.legend|escape:'htmlall':'UTF-8'}" />
                            </a>
                            {if isset($slide.description) && trim($slide.description) != ''}
                                <div class="homeslider-description">{$slide.description}</div>
                            {/if}
                        </li>
                    {/if}
                {/foreach}
            </ul>
        </div>
    {/if}
    <!-- /Module HomeSlider -->
{/if}"

I am also attaching and the css file.

Thanks

Marina

homeslider.css

[razaro]

Hi Marina,

 

Welcome to the forum, hope you have success with Prestashop and new themes.

Like Vekia said css files are called in Controllers  (php files) and in this case in is from 

homeslider.php 

https://github.com/PrestaShop/homeslider/blob/master/homeslider.php#L465

 

If you want to change some css of module recommended way is to have file that overrides default css.

So for example you have in themes/default-bootstrap/css/modules/homeslider file homeslider.css in 

which you can add your styles.

 

 

And if you did not already check go to following link, even if it is for previous 1.5 version

http://doc.prestashop.com/display/PS15/Designer+Guide

[mkli73]

I want to thank you all for your help. In my eleventh years of web design experience it is one of the most accurate an friendly user to the complete beginner forum.

My past experience on forums was not so pleasant.

As far as the overwrite either in modules or the css as I have presta shop 6, I should put the new files under the override folder.

Am I correct?

I am reading the user designer guide for presta shop, I would like to ask you something more about the modules, they are existing in two places either in the central path and under the theme directory.

Whic one is the one that is shown in the control panel.

I would like to delete all the modules and like to start from scratch which directory shall I delete?

Thank you for one more time.

Regards

Marina

[razaro]

On page http://doc.prestashop.com/display/PS15/Creating+your+own+theme there is section

 

 

 

The point here is that a theme must come packed with custom templates for the default modules. These template files are stored in the /modules folder of the theme's folder. For instance, in the default theme, the template file for the Layered Navigation module can be found in the following path: /themes/default/modules/blocklayered/blocklayered.tpl It is your duty as a theme developer to build templates for at least all the default PrestShop modules, along with the additional modules that you plan on providing along with your theme's files.
If all you want to change in a module's front-office appearance is its CSS file, you should put your customized version in this folder: /themes/YOUR_THEME/css/modules/blocklayered/blocklayered.css. Just make sure to use the same file path.

 

 

so for modules you delete folders in /themes/YOUR_THEME/css/modules/ and then css from main module folder will be loaded. Note if you do not want to use/display some module you can disable it in back office and later when you finish theme and export it to zip file it will save that setting, so when you install your theme it will disable that module.

 

And for override folder, if you think on one in root, that one does not have any connection to theme. It contains overrides of core classes and controllers, so php files.

[mkli73]

Hello one more time thank you for your guideline.

I am starting the design of my first presta shop

you could see it here

http://www.pandora-web-box.info/presta/index.php

it is still very early

I am trying in editing the very top block banner so I edit the following files

Firstly I edited the templates in in blockcontact

And then  the css file that is under css/modules/blockcontact/blockcontact.css

I am uploading the css fies under /public_html/presta/themes/default-bootstrap/css/modules/blockcontact/ but I can not see any changes.

Also I can not find where is the black background in css.

Do you have any idea?

Regards

Marina

[razaro]

That top black background is in global.css line 5279

header .nav {
background: #333333;
}

Hop you do use Chrome developer tools of Firefox+Firebug.

 

And for changes not showing, try to disable cache in backoffice > advanced preferences and also clear cache. 

Also clear browser cache.

 

One more thing I noticed, it is good practice to not edit directly default-bootstrap theme but copy it and create new theme in back office for example named avenuechick.

 

p.s. For new questions you have not connected to current topic title , create new topic.

[mkli73]

Razaro thank you very much for your reply, I am not editing directly the default it is a copy of the folder I have made.

I have managed to edit the front page.

In the future I will create new topic.

Thanks again

Regards

Marina