Hi !

I am presently working on the Ecolife Template and I have a few things that I cannot seem to solve, even after using the Inspect element in Chrome. Please see image in attachment for a visual.

1) There is a gray colored row just below the main menu. How do we remove it ? I did not put anything in that particular spot, so I do not know why it is there. I have disabled the breadcrumbs.

2) Why is there an edit button ? I do not have that when I installed the Rasa2 template on another site. How can we remove it ?

3) I cannot seem to figure out how to change the background color of the whole template. I would like it to be white (#ffffff). I have tried a few html coding (in the custom.css file) that I found in this forum, but none worked. Please can you tell me how to do that ?

4) There is too much padding in the template: above the logo, between logo and main menu, between main menu and article, between article and right sidebar, etc. I cannot seem to find how to change it.

Thanks !

Hi

1. It is intended as part of the design so to remove that you will need to add some css to remove the images

#top-area-inner, #main-row-inner {background: none;}

2. The edit button probably means you have the site offline and you are logging in to view the site - is that correct?

If that is the case the edit will show for you but when the site is online this will disappear unless you login via the front end

3. When you say whole template from the top to the bottom with a background of white or just the main content area?

#main-row {
background: #fff;
}

4. With this one we would need to see the site

Cheers
Paul

Thanks for the replies !

(please note that some of these questions will be useful since I have other websites I would like to use your templates on...)

I have put the site online (this is a copy of my site, on which I am experimenting before changing the template for real) :
www.natur-aux-pattes.info

1) When you say that that row is in there by default, I noticed that you can see it on the demo site just under the tabbed modules. But if we do have need the tabs, is it possible to remove that row completely ? It gives too much space between the menu and the article.

3) Thanks for the code, I was able to change the main area to white. Is it possible to change the header to white also ?

4) For the padding, I am refering to the whole website, as there is a lot of padding everywhere. I have included two other images to help what I mean. The areas concerned are where you see arrows. I do not know if the padding is controlled by one setting, but I guess there may be a few.
I prefer my header to not have space above and below it. (and of course, I would like to remove the row below the main menu). I would like to remove it.
Then, there is too much space between modules on the left. Also I have put an article in the 'below' position and there is too much space above and below it.
This may be a long answer, but your answer will be much appeciated. (I have learned in the past that when there is too much space, people tend to not look beyond, especiallly in tablets and phones).

Thanks greatly !

So

1. try adding

#top-area-inner {padding-bottom: 0;}

The current styling has 79px

Background wise try adding

html, body, #zen-wrap, #top-area-row {background: none;}

Can I just check where you are adding these changes? - you are running css compression at the moment

Cheers
Paul

Thanks, for the white background and removing the row below the main menu, it worked.

I put the css codes in the custom.css file.

Cool the right place

Can you turn off the css optimisation / compression for the other css questions

Cheers
Paul

I desactivated the gzip compression on the site.

I tried to uninstall jCH Optimize a few days ago on this site, but it seems to still work, so if you need me to take those files out, please let me know and I will try to figure that out.

With any site I'd hold off enabling any compression to you have the site finalised as it can cause confusion when changes don't apply

Below the logo its

#logo .zen-spotlight .moduletable {
margin-bottom: 30px;
}

so you need to adjust that as required

Above the logo its

#logowrap.no-top {padding-top: 30px;}

I will let you know when I put this template on the live website.

Good luck with the project

Cheers
Paul