How do I remove these parts of a template?

[Tats]

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

[picandnix]

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.

[Tats]

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

[mc12345678]

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

[Tats]

I prefer a step by step instruction.

[keneso]

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;
}

[mc12345678]

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. :)