Adding a CSS file and some HTML

[enricprestashop]

Hi

 

I am just starting to play with all the files and folders from Prestashop for the first time. I tried to insert some code to the files but I found my first two problems: Hooks and CSS.

 

First, I copied the default theme and renamed it. Now I want to edit this theme.

My main idea was to insert a background image at the top of the page using CSS. What I tried to do is to insert html code in the header.tpl file from my theme, as follows:

 

<div id="header_right" class="grid_9 omega">
                    {$HOOK_TOP}
                    <div id="topnav"></div>
                </div>

 

The code added is the new div with id:topnav.

After that, I created my new CSS file (x.css) and inserted it in the css folder from my theme. The css code inserted is:

 

#topnav {
    background: url(../img/any.png) repeat scroll center top rgba(0,0,0,0);
    height: 40px;
}

 

No change appear. Any is a small image which is supposed to be repeated (nothing happen if i set background as a colour like #333 either). I did nothing more. I read maybe I need to do something with Controller and setMedia but I could manage to make it work anyway. I would like to know what I have to do or where I can find precise information about it. I don't know where to find the hook_top code and css is not working. The div inserted is not appearing in the browser code. Can you help me please?

 

Thank you.

[vekia]

hook top displays all modules attached to this hook.

you can find list of modules attached to this hook in: modules > positions tab (search for displayTop modules list)

each module has got own tpl file, so you have to edit these files (if you want to change something inside modules)

 

in addition, while you're working on your theme, remember to turn on "force compile" option under adv. paramters > performance tab (in BO)

[enricprestashop]

Really interesting. I got a better idea on how Hooks may work, although I see there's tons of lines of code :/

 

I activated Force compile, but my code is not displaying any extra image or content at the top of the page. As I said, I created the new css file in my theme/css folder and added the code I said. And just after HOOK_TOP I added the div I wrote before. What is the problem? What am I doing wrong?

 

Enric

[vekia]

i have no idea what's goin on, can you share url to your website? i can inspect it.

[enricprestashop]

We will have our domain in few weeks. By now, I am working in a localhost, so I can't :/. But I just copied the default theme and changed header.tpl adding a line of code after HOOK_TOP:

 

                <div id="header_right" class="grid_9 omega">
                    {$HOOK_TOP}
                    <div id="topnav"></div>
                </div>

 

and created a new css file in the theme/css folder with:

 

#topnav {
    background: url(../img/any.png) repeat scroll center top rgba(0,0,0,0);
    height: 40px;
}

 

The image any is in the theme/img folder. I also tried setting background as a colour, and also inserting this CSS code in the global.css file. But it is not working. However, the image is appearing adding the following code in my new CSS file:

 

#header_right {
    background: url(../img/any.png) repeat scroll center top rgba(0,0,0,0);
    margin-bottom: 2px;
}

 

But it appears in the whole header_right. I wanted to make it appear just until the top menu. So I deduce Prestashop can't recognise the new HTML code line. Am I right?

 

Thank you.

Edited January 31, 2014 by enricprestashop (see edit history)

[enricprestashop]

Okay, my bad. I did my first stupid mistake as a begginner. I was editing the default theme file, not my new theme one. Right now, I am still working on it. I have the following code in the header.tpl file:

 

                <div id="header_right" class="grid_9 omega">
                    {$HOOK_TOP}
                    <div id="topnav" class="topnav"></div>
                    <div class="logo-text" id="logo-text">
                        <p><i>hey</i></p>
                    </div>
                </div>

 

And in my new css file, I am trying to display the image but I can't make it. I set the id and class both just in case there is some hierarchy difference and I have been trying to define ".topnav", ".topnav div", "#topnav" and "#topnav div". Also I have tried the property z-index, just in case it's because of layers that the background image is not appear. The best I got is, using the following code, display the background image under the header and over the first left block (categories) and center content:

 

#topnav {
    background: url(../img/background-top.png) repeat scroll center top rgba(0,0,0,0);
    height: 40px;
    width: 800px;
    position: absolute;
}

 

How can I make it appear in the header and behind all the content, not over it?

 

Thank you.

Edited February 10, 2014 by enricprestashop (see edit history)

[enricprestashop]

I solved my problem. I set the following CSS code:

 

.topnav {
    background: url(../img/background-top.png) repeat scroll center top rgba(0,0,0,0);
    height: 100px;
    width: 100%;
    position:absolute;
    left:0px;
    top:0px;
    z-index:-1;
}