Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / How do I remove these parts of a template?

How do I remove these parts of a template?

Views: 864

Results 1 to 7 of 7
29 Apr 2016, 8:25 PM
#1
tats avatar

tats

New Zenner

Join Date:
Apr 2010
Posts:
33
Plugin Contributions:
0

How do I remove these parts of a template?

Would like to remove the whitish part of the template so all that is there is the med/dk pink.
Also how to remove the bottom dark pink area....
And please to make my logo a bit smaller....

http://www.softscents.net

29 Apr 2016, 8:38 PM
#2
picandnix avatar

picandnix

Totally Zenned

Join Date:
Dec 2010
Location:
UK
Posts:
1,780
Plugin Contributions:
2

Re: How do I remove these parts of a template?

Your best bet is to post in the support thread for your chosen template. Anne, the designer will answer soon enough and the solution will be there for all to appreciate should anyone have a similar desire to modify the layout.

29 Apr 2016, 9:11 PM
#3
tats avatar

tats

New Zenner

Join Date:
Apr 2010
Posts:
33
Plugin Contributions:
0

Re: How do I remove these parts of a template?

I have. However I haven't seen Anne active on that thread since 2014. so any advice would be appreciated...

29 Apr 2016, 9:29 PM
#4
mc12345678 avatar

mc12345678

Totally Zenned

Join Date:
Jul 2012
Posts:
16,908
Plugin Contributions:
2

Re: How do I remove these parts of a template?

Which do you prefer? To eat or to fish so you can eat?

29 Apr 2016, 9:43 PM
#5
tats avatar

tats

New Zenner

Join Date:
Apr 2010
Posts:
33
Plugin Contributions:
0

Re: How do I remove these parts of a template?

I prefer a step by step instruction.

29 Apr 2016, 10:02 PM
#6
mc12345678 avatar

mc12345678

Totally Zenned

Join Date:
Jul 2012
Posts:
16,908
Plugin Contributions:
2

Re: How do I remove these parts of a template?

If you are okay with learning how to fish, then you could use tools that are integral with almost every browser to identify the area(s) to be addressed. On pc's if you press f12 you should be taken to a screen that allows you to review the html and css applicable to the current page. From there you could "locally" identify and modify the css if the coloring is applied by that, or it could be that the coloring is applied to an image called in css that is repeated for the length/breadth of the area.

So, step by step as available to me at the moment:

  1. Inspect the rendered contents of the page.
  2. Review/identify the area of the page in question,
  3. Determine what is presenting the undesired result.
  4. Temporarily/locally modify the affecting code to validate that the desired change will have the desired result.
  5. Identify which file(s), preferably in the template override system, need to be updated/changed to reflect the local modifications.
  6. Apply the changes to those files.

The above can be done as said at least on PCs by starting with pressing f12. :)

29 Apr 2016, 10:33 PM
#7
keneso avatar

keneso

Totally Zenned

Join Date:
May 2009
Posts:
1,273
Plugin Contributions:
3

Re: How do I remove these parts of a template?

As suggested by mc12345678 you'd better learn some css and use available tools, however since you asked ...

You need to remove the background color of various elements in your stylesheet.css and stylesheet_betterCategoriesEzInfo.css (both are in the css folder of your template).

Set them to transparent, you then might want to remove the borders as well.
Also you'll have a problem with the background images in h3.leftBoxHeading, h3.rightBoxHeading, and #headerWrapper.

For the logo you need to reduce the size of the image, and set it in includes/languages/english/YOUR_TEMPLATE/header.php

Line 41

#contentMainWrapper {
  background-color: #fff;
}

Line 60

#headerWrapper {
  background: #fff url("../images/header-bk.jpg") no-repeat scroll center top;
  margin-top: 25px;
}

Line 148

#navColumnOne {
  background-color: #fff;
  padding-bottom: 20px;
}

Line 149 maybe you want to remove the whole column if you don't use it (admin > configuration > layout settings)

#navColumnTwo {
  background-color: #fff;
  padding-right: 3px;
}

Line 156

.sideBoxContent {
  background-color: #fff;
  border: 0 solid #e1e1e9;
  padding: 0 0.4em 0.4em;
}

Line 6

.betterCategories, .betterDocuments, .betterEzpages, .betterInformation, .betterMoreinformation, .betterBestsellers {
  border-top: 1px solid #ffffff;
}

Line 11

.betterCategories a, .betterCategories a:visited, .betterDocuments a, .betterDocuments a:visited, .betterEzpages a, .betterEzpages a:visited, .betterInformation a, .betterInformation a:visited, .betterMoreinformation a, .betterMoreinformation a:visited, .betterBestsellers a, .betterBestsellers a:visited {
  background-color: #fffffe;
  border-bottom: 1px solid #e36e95;
  border-top: 2px solid #ffffff;
  display: block;
  padding: 4px;
}

To remove the dark pink area maybe it's easier for you to change this in stylesheet_footer_menu.css

#footer {
  background-color: #e36e95;
  clear: both;
  margin: 0 0 30px;
  padding-top: 10px;
}

with this

#footer {
  background-color: #e36e95;
  clear: both;
  margin: 0 0 30px;
  padding-top: 10px;
  display: none;
}