The most asked question I ever receive is How do I change the colors?!?!. Build a Niche Store works the same as Joomla, WordPress and etc when it comes to Basic Styling. The design is built off of a CSS Style Sheet. Learning the basics of using and working with CSS will go along way when it comes to working with different platforms on the internet.

This area provides some basic BANS Customization Tips through Css. We will walk through many of the most common Build a Niche Store styles and what needs to be changed.

Please Select one of the following to get started:

• Change Background Borders and Colors
• Edit the Sitename in the Header
• Remove the Sitename from the Header

Change Background and Border Colors

• Page Background
• Page Border
• Body Background
• Searchbox
• Sidebar Nav Menu
• Sidebar Headings
• Sidebar Links
• Sidebar Hover
• Main Content Area
• Footer
 
 
To change the page background color, edit the following code in styles.css:

 

#page {
background-color: #ffffff;
margin: 0px;
padding: 10px;
width: 782px;
border-style: solid;

border-color: #CACACA;
border-width: 1px;
display: block;
}

 

Return to Top of Page

 

---

To change the page border color and width, edit the following code in styles.css:

 

#page {
background-color: #ffffff;
margin: 0px;
padding: 10px;
width: 782px;

border-style: solid;
border-color: #CACACA;
border-width: 1px;
display: block;
}

 

Return to Top of Page

 

---

To change the body background color, edit the following code in styles.css:

 

body#background {
background-color: #dddddd;

}

 

Return to Top of Page

 

---

To change the searchbox background and borders, edit the following code in styles.css:

 

#search {
padding: 12px;

margin-top: 10px;
background-color: #efefef;
color: #333333;
font-family: Arial;
font-size: 12px;
border-style: solid;

border-color: #dddddd;
border-width: 1px;
text-align: left;
}

 

Return to Top of Page

 

---

To change the left-hand sidebar (nav menu) background and borders, edit the following code in styles.css:

 

#sidebar {
margin-top: 10px;
margin-right: 10px;

margin-bottom: 10px;
float: left;
width: 175px;
background-color: #f8f8f8;
text-align: left;
border-style: solid;

border-color: #dddddd;
border-width: 1px;
}

 

Return to Top of Page

 

---

To change the left-hand sidebar heading parameters, edit the following code in styles.css:

 

#sidebar h2 {
padding: 6px;
margin: 0px;

display: block;
color: #333333;
font-family: Arial;
font-size: 13px;
display: block;
text-decoration: none;

background-color: #dcedf5;
border-style: solid;
border-color: #dddddd;
border-width: 0px 0px 1px 0px;
}

 

Return to Top of Page

 

---

To change the left-hand sidebar link parameters, edit the following code in styles.css:

 

#sidebar ul li a {
background-color: #f8f8f8;
padding: 3px;
margin: 0px;
color: #333333;
font-family: Arial;

font-size: 12px;
display: block;
padding-right: 10px;
padding-left: 10px;
text-decoration: none;
border-style: solid;

border-color: #dddddd;
border-width: 0px 0px 1px 0px;
}

 

Return to Top of Page

 

---

To change the left-hand sidebar hover background and text colors, edit the following code in styles.css:

 

#sidebar ul li a:hover {
background-color: #efefef;

padding: 3px;
margin: 0px;
color: #333333;
font-family: Arial;
font-size: 12px;
display: block;

padding-right: 10px;
padding-left: 10px;
text-decoration: none;
border-style: solid;
border-color: #dddddd;
border-width: 0px 0px 1px 0px;

}

 

Return to Top of Page

 

---

To change the main content area background and border colors, edit the following code in styles.css:

 

#content {
width: 574px;
margin-top: 10px;
margin-bottom: 10px;

margin-right: 0px;
padding-right: 10px;
padding-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
background-color: #f8f8f8;

border-style: solid;
border-color: #dddddd;
border-width: 1px;
text-align: left;
}

 

Return to Top of Page

 

---

To change the footer background and border colors, edit the following code in styles.css:
 
#footer {
width: 968px;
height: 30px;
clear: both;
background-color: #dddddd;
border-style: solid;
border-color: #CACACA;
border-width: 1px;
}
 
Return to Top of Page
 

Change Sitename Parameters

 
Note: The code shown below is taken from Layout-1-both. Your code may differ slightly depending on the template used.
 
To change the sitename parameters, edit the following code in styles.css:
 
#/* Logo Site Name Start */

h1#title, h1#title a, h1#title a:hover{
font-size: 26px;
letter-spacing: -1.5px;
font-weight: bold;
padding: 110px 10px 10px 12px;

text-align: left;
text-transform: uppercase;
text-decoration: none;
color: #1f4983;
}

/* Logo Site Name End */

 
Return to Top of Page
 

Remove Default Sitename

To remove the sitename from the header area, find the following code in the header.php file for your chosen template:
 
<div id=”header”>
<div class=”headerimg”>
<h1 id=”title”>
<a href=”<?php print URL_PATH.”/”;?>”> <?php print SITENAME.”";?></a>

</h1>
</div>
</div>

 
and delete the code shown in red.
 
Return to Top of Page
 

Originally written by Niche Store Market Admin Pip.

]]> http://nichestoremarket.com/2009/04/basic-bans-customization-with-css/feed/ 0 http://nichestoremarket.com/2009/04/creating-an-inline-horizontal-menu-with-bans/ http://nichestoremarket.com/2009/04/creating-an-inline-horizontal-menu-with-bans/#comments Tue, 07 Apr 2009 15:52:25 +0000 Shane Isaacs http://nichestoremarket.com/blog/?p=243 Creating an Inline Horizontal Menu with BANS

Post from: Niche Store Market
Creating an Inline Horizontal Menu with BANSPost from: Niche Store Market Many people think that when they use Build a Niche Store they are limited to only using the Category and Page Menus as they display by default. This is not true. By default both menu types will display vertically for use in the sidebar. [...]]]> Creating an Inline Horizontal Menu with BANS

Post from: Niche Store Market

Many people think that when they use Build a Niche Store they are limited to only using the Category and Page Menus as they display by default. This is not true. By default both menu types will display vertically for use in the sidebar. But what if you want the menu to display horizontally and above your products? This can be done! It is jut a matter of changing the ID used for the menu and adding some new CSS Style to control the look of the Menu ID.

This will open up a whole new area of display and design options for your Niche Sites. You can no longer be limited to the stale old look and having to find ways to “arrange” everything in the sidebars around your menus. By using this very simply modification you can create menus just like the one I use above, with page navigation inline above your category menu. Also, just like on this site, you could display the same menu inline and again in the sidebar if you wanted.

ALWAYS MAKE A BACK-UP COPY OF THE ORIGINAL FILES BEFORE STARTING ANY MODIFICATION

It is recommend that you try your skills out with this Mod on a test site. That will give you the time and opportunity to practice and fine tune the layout to your needs without worrying about causing display or functionality issues for your customers as you experiment.

This Modification can be used for displaying Store Navigation, Page Navigation or both. You must use open navigation menus with this Mod or it will not display correctly. The modifications we will be applying are the same ones used I use on NSM Curve Niche Store Template v1 as show in the photo below. In this example I used the mod for the page navigation.


1. From your stores Admin Area go to Templates and click on Modify: [styles.css]
2. Copy the CSS Styles below and paste them in to your themes Style Sheet
   

   .menu {
   background: #000000; /*Change to your color*/
   width:968px; /*Change to size needed for your template*/
   height:35px;
   margin:0px;
   text-align:left;
   padding:15px 0 0 15px;
   }
   .menu ul {
   text-align:left;
   list-style-type: none;
   list-style-image: none;
   }
   .menu li {
   color:#f0f0f0;
   padding:15px 8px 0 8px;
   display:inline;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 16px; /*You can adjust text size here*/
   }
   .menu li a {
   color:#f0f0f0; /*The color of the menu items*/
   text-decoration:none;
   }
   .menu li a:hover {
   color: #000033; /*The color of the mouse over*/
   text-decoration:none;
   }

3. Make sure to click save!
4. Click on header.php in the menu just above the edit box
5. Add the following code(s) wherever you want your new menu(s) to display
   • Store Navigation: <div class=”menu”><ul><?=$front->storenav();?></ul></div>
   • Page Navigation: <div class=”menu”><ul><?=$front->pagenav();?></ul></div>

• For proper appearance it is recommended not to place the above code inside another item(s) <div> tag. Place it after a closing </div> and before the next opening <div>
• If you have not done so already, please delete the old navigation functions and their <ul> tags from the sidebar (if you want).

You are all done! You can now style it anyway you want. Adjust the text size, height, width, color, spacing between links to add more per row and even add images. If you wish to return your store to normal just remove the tags we added into the header and replace the originals.

]]> http://nichestoremarket.com/2009/04/creating-an-inline-horizontal-menu-with-bans/feed/ 0 http://nichestoremarket.com/2009/04/css-color-code-list-for-developing-niche-stores/ http://nichestoremarket.com/2009/04/css-color-code-list-for-developing-niche-stores/#comments Mon, 06 Apr 2009 23:05:03 +0000 Shane Isaacs http://nichestoremarket.com/blog/?p=221 CSS Color Code List for developing Niche Stores or Websites

Post from: Niche Store Market
CSS Color Code List for developing Niche Stores or WebsitesPost from: Niche Store Market Sometimes the hardest place to start in developing your niche is choosing that first color to build off of. Making your store visibly appealing to the general public is the first step in retaining the visitors that stumble across your site. [...]]]> CSS Color Code List for developing Niche Stores or Websites

Post from: Niche Store Market

Sometimes the hardest place to start in developing your niche is choosing that first color to build off of. Making your store visibly appealing to the general public is the first step in retaining the visitors that stumble across your site. Lots of times we just seem to just get stuck mentally on the same old "sets" of color schemes. I always seem to find myself changing the colors over and over trying to come up with something that is just right.

In order to help me, I decided that being able to "see" different color options was more beneficial than trying to "picture" them. So here is a very long list of CSS Colors I compiled to help with building and designing your niche stores. These colors can be used for any color field in the Style Sheet (style.css).

When you find the color you want just copy the six digit number in front of it and place that in your style sheet.

Have Fun!

cdc0b0:

 antique white 3

8b8378:

 antique white 4

32bfc1:

 aquamarine 1

7fffd4:

 aquamarine 2

76eec6:

 aquamarine 3

66cdaa:

 aquamarine 4

458b74:

 aquamarine 5

cdb79e:

 bisque 3

8b7d6b:

 bisque 4

ffe4c4:

 blanched almond

0000ff:

 blue

0000ee:

 blue 1

0000cd:

 blue 2

00008b:

 blue 3

8a2be2:

 blue-violet

a52a2a:

 brown

ff4040:

 brown 1

ee3b3b:

 brown 2

cd3333:

 brown 3

8b2323:

 brown 4

deb887:

 burlywood

ffd39b:

 burlywood 2

cdaa7d:

 burlywood 3

8b7355:

 burlywood 4

5f929e:

 cadet blue

98f5ff:

 cadet blue 1

8ee5ee:

 cadet blue 2

7ac5cd:

 cadet blue 3

53868b:

 cadet blue 4

7fff00:

 chartreuse 1

76ee00:

 chartreuse 2

66cd00:

 chartreuse 3

458b00:

 chartreuse 4

ff7256:

 coral 1

ee6a50:

 coral 2

cd5b45:

 coral 3

8b3e2f:

 coral 4

222298:

 cornflower blue

8b8878:

 cornsilk 4

00ffff:

 cyan 1

00eeee:

 cyan 2

00cdcd:

 cyan 3

008b8b:

 cyan 4

bdb76b:

 dark

b8860b:

 dark goldenrod

ffb90f:

 dark goldenrod 1

eead0e:

 dark goldenrod 2

cd950c:

 dark goldenrod 3

8b6508:

 dark goldenrod 4

00562d:

 dark green

bdb76b:

 dark khaki

de00a5:

 dark nessy

55562f:

 dark olivegreen

ff69b4:

 hot pink

ff6eb4:

 hot pink 1

ee6aa7:

 hot pink 2

cd6090:

 hot pink 3

8b3a62:

 hot pink 4

6b3939:

 indian red

ff6a6a:

 indian red 1

ee6363:

 indian red 2

cd5555:

 indian red 3

8b3a3a:

 indian red 4

8b8b83:

 ivory 4

b3b37e:

 khaki

cdc673:

 khaki 3

8b864e:

 khaki 4

8b8386:

 lavender blush 4

8b8970:

 lemon chiffon 4

f08080:

 light

b0e2ff:

 light blue

9ac0cd:

 light blue 3

68838b:

 light blue 4

f08080:

 light coral

7a8b8b:

 light cyan 4

eedd82:

 light goldenrod

ffec8b:

 light goldenrod 1

eedc82:

 light goldenrod 2

cdbe70:

 light goldenrod 3

8b814c:

 light goldenrod 4

ff80d2:

 light nessy

ffb6c1:

 light pink

ffaeb9:

 light pink 1

eea2ad:

 light pink 2

cd8c95:

 light pink 3

8b5f65:

 light pink 4

ffa07a:

 light salmon 1

ee9572:

 light salmon 2

cd8162:

 light salmon 3

8b5742:

 light salmon 4

20b2aa:

 light seagreen

87cefa:

 light skyblue

b0e2ff:

 light skyblue 1

a4d3ee:

 light skyblue 2

8db6cd:

 light skyblue 3

607b8b:

 light skyblue 4

8470ff:

 light slate blue

778899:

 light slate gray

7c98d3:

 light steel blue

bcd2ee:

 light steel blue 2

a2b5cd:

 light steel blue 3

6e7b8b:

 light steel blue 4

8b8b7a:

 light yellow 4

00af14:

 lime green

ff00ff:

 magenta 1

ee00ee:

 magenta 2

cd00cd:

 magenta 3

8b008b:

 magenta 4

8f0052:

 maroon

ff34b3:

 maroon 1

ee30a7:

 maroon 2

cd2900:

 maroon 3

8b1c62:

 maroon 4

d1c166:

 medium

00938f:

 med aquamarine

3232cc:

 med blue

32814b:

 med forest green

d1c166:

 med goldenrod

bd52bd:

 med orchid

e066ff:

 med orchid 1

d15fee:

 med orchid 2

b452cd:

 med orchid 3

7a378b:

 med orchid 4

9370db:

 med purple

ab82ff:

 med purple 1

9f79ee:

 med purple 2

8968cd:

 med purple 3

5d478b:

 med purple 4

347766:

 med sea green

6a6a8d:

 med slate blue

238e23:

 med spring green

00d2d2:

 med turquoise

d52079:

 med violet red

2f2f64:

 med night blue

cdb7b5:

 misty rose 3

8b7d7b:

 misty rose 4

ef84ef:

 orchid

ff83fa:

 orchid 2

ee7ae9:

 orchid 3

cd69c9:

 orchid 4

8b4789:

 orchid 5

a2cd5a:

 dark olivegreen 3

6e8b3d:

 dark olivegreen 4

ff8c00:

 orange

ff7f00:

 dark orange 1

ee7600:

 dark orange 2

cd6600:

 dark orange 3

8b4500:

 dark orange 4

8b208b:

 dark orchid

bf3eff:

 dark orchid 1

b23aee:

 dark orchid 2

9a32cd:

 dark orchid 3

68228b:

 dark orchid 4

e9967a:

 dark salmon

8fbc8f:

 dark seagreen

698b69:

 dark seagreen 4

384b66:

 dark slate blue

2f4f4f:

 dark slate gray

79cdcd:

 dark slate gray 3

528b8b:

 dark slate gray 4

00a6a6:

 dark turquoise

9400d3:

 dark violet

ff1493:

 dark pink 1

ee1289:

 dark pink 2

cd1076:

 dark pink 3

8b0a50:

 dark pink 4

00bfff:

 deep skyblue 1

00b2ee:

 deep skyblue 2

009acd:

 deep skyblue 3

00688b:

 deep skyblue 4

1e90ff:

 dodger blue 1

1c86ee:

 dodger blue 2

1874cd:

 dodger blue 3

104e8b:

 dodger blue 4

8e2323:

 firebrick

ff3030:

 firebrick 1

ee2c2c:

 firebrick 2

cd2626:

 firebrick 3

8b1a1a:

 firebrick 4

509f69:

 forest green

daaa00:

 gold

ffd700:

 gold 1

eec900:

 gold 2

cdad00:

 gold 3

8b7500:

 gold 4

efdf84:

 goldenrod

ffc125:

 goldenrod 1

eeb422:

 goldenrod 2

cd9b1d:

 goldenrod 3

8b6914:

 goldenrod 4

00ff00:

 green

00ee00:

 green 2

00cd00:

 green 3

008b00:

 green 4

adff2f:

 green-yellow

838b83:

 honeydew 4

548b54:

 pale green 4

668b8b:

 pale turquoise 4

cd6889:

 pale violet-red 3

8b475d:

 pale violet-red 4

cdaf95:

 peach puff 3

8b7765:

 peach puff 4

cd853f:

 peru3

ffb5c5:

 pink 1

eea9b8:

 pink 2

cd919e:

 pink 3

8b636c:

 pink 4

c5489b:

 plum 1

eeaeee:

 plum 2

cd96cd:

 plum 3

8b668b:

 plum 4

b0e0e6:

 powder blue

a020f0:

 purple

9b30ff:

 purple 1

912cee:

 purple 2

7d26cd:

 purple 3

551a8b:

 purple 4

ff0000:

 red

ee0000:

 red 2

cd0000:

 red 3

8b0000:

 red 4

bc8f8f:

 rosy brown

8b6969:

 rosy brown 4

4169e1:

 royal blue

4876ff:

 royal blue 1

436eee:

 royal blue 2

3a5fcd:

 royal blue 3

27408b:

 royal blue 4

8b4513:

 saddle brown

e9967a:

 salmon

ff8c69:

 salmon 1

ee8262:

 salmon 2

cd7054:

 salmon 3

8b4c39:

 salmon 4

f4a460:

 sandy brown

529584:

 sea green

2e8b57:

 sea green 4

8b8682:

 seashell 4

96522d:

 sienna

ff8247:

 sienna 1

ee7942:

 sienna 2

cd6839:

 sienna 3

8b4726:

 sienna 4

729fff:

 sky blue

4a708b:

 sky blue 3

7e88ab:

 slate blue

836fff:

 slate blue 1

7a67ee:

 slate blue 2

6959cd:

 slate blue 3

473c8b:

 slate blue 4

708090:

 slate gray

6c7b8b:

 slate gray 4

8b8989:

 snow 4

41ac41:

 spring green

00ff7f:

 spring green 1

00ee76:

 spring green 2

00cd66:

 spring green 3

008b45:

 spring green 4

5470aa:

 steel blue

63b8ff:

 steel blue 1

5cacee:

 steel blue 2

4f94cd:

 steel blue 3

36648b:

 steel blue 4

deb887:

 tab

ffa54f:

 tan 1

ee9a49:

 tan 2

cd853f:

 tan 3

8b5a2b:

 tan 4

8b7b8b:

 thistle 4

ff6347:

 tomato 1

ee5c42:

 tomato 2

cd4f39:

 tomato 3

f0f8ff:

 alice blue

faebd7:

 antique white

ffefdb:

 antique white 1

eedfcc:

 antique white 2

f0ffff:

 azure

e0cdcd:

 azure 1

e0eeee:

 azure 2

c1cdcd:

 azure 3

838b8b:

 azure 4

f5f5dc:

 beige

ffe4c4:

 bisque 1

eed5b7:

 bisque 2

fff8dc:

 cornsilk 1

eee8cd:

 cornsilk 2

cdc8b1:

 cornsilk 3

fffff0:

 ivory 1

eeeee0:

 ivory 2

cdcdc1:

 ivory 3

fff68f:

 khaki 1

eee685:

 khaki 2

e6e6fa:

 lavander

fff0f5:

 lavender blush 1

eee0e5:

 lavender blush 2

cdc1c5:

 lavender blush 3

7cfc00:

 lawn green

fffacd:

 lemon chiffon 1

eee9bf:

 lemon chiffon 2

cdc9a5:

 lemon chiffon 3

bfefff:

 light blue 1

b2dfee:

 light blue 2

e0ffff:

 light cyan 1

d1eeee:

 light cyan 2

b4cdcd:

 light cyan 3

fafad2:

 lt goldenrod yellow

cae1ff:

 light steel blue 1

ffffe0:

 light yellow 1

eeeed1:

 light yellow 2

cdcdb4:

 light yellow 3

faf0e6:

 linen

f5fffa:

 mint cream

ffe4e1:

 misty rose

eed5d2:

 misty rose 2

ffe4b5:

 moccasin

ffdead:

 navajo white

eecfa1:

 navajo white 2

fdf5e6:

 old lace

c0ff3e:

 olive drab 1

b3ee3a:

 olive drab 2

caff70:

 dark olivegreen 1

bcee68:

 dark olivegreen 2

c1ffc1:

 dark seagreen 1

b4eeb4:

 dark seagreen 2

9bcd9b:

 dark seagreen 3

32d838:

 yellow-green

97ffff:

 dark slate gray 1

8deeee:

 dark slate gray 2

fffaf0:

 foral white

dcdcdc:

 gainsboro

f8f8ff:

 ghost white

f0fff0:

 honeydew 1

e0eee0:

 honeydew 2

c1cdc1:

 honeydew 3

73de78:

 pale

eee8aa:

 pale goldenrod

73de78:

 pale green

9aff9a:

 pale green 1

90ee90:

 pale green 2

7ccd7c:

 pale green 3

afeeee:

 pale turquoise

bbffff:

 pale turquoise 1

aeeeee:

 pale turquoise 2

96cdcd:

 pale turquoise 3

db7093:

 pale violet-red

ff82ab:

 pale violet-red 1

ee799f:

 pale violet-red 2

ffefd5:

 papaya

ffdab9:

 peach puff 1

eecbad:

 peach puff 2

ffc1c1:

 rosy brown 1

eeb4b4:

 rosy brown 2

cd9b9b:

 rosy brown 3

54ff9f:

 sea green 1

4eee94:

 sea green 2

43cd80:

 sea green 3

fff5ee:

 seashell 1

eee5de:

 seashell 2

cdc5bf:

 seashell 3

87ceff:

 sky blue 1

7ec0ee:

 sky blue 2

c6e2ff:

 slate gray 1

b9d3ee:

 slate gray 2

9fb6cd:

 slate gray 3

fffafa:

 snow 1

eee9e9:

 snow 2

cdc9c9:

 snow 3

d8bfd8:

 thistle

ffe1ff:

 thistle 1

eed2ee:

 thistle 2

cdb5cd:

 thistle 3

f5deb3:

 wheat

ffe7ba:

 wheat 1

eed8ae:

 wheat 2

cdba96:

 wheat 3

f5f5f5:

 white smoke

ffff00:

 yellow

eeee00:

 yellow 2

19ccdf:

 turquoise

00f5ff:

 turquoise 1

00e5ee:

 turquoise 2

00c5cd:

 turquoise 3

00868b:

 turqouoise 4

9c3ece:

 violet

f33e96:

 violet-red

ff3e96:

 violet-red 1

ee3a8c:

 violet-red 2

cd3278:

 violet-red 3

8b2252:

 violet-red 4

8b7e66:

 wheat 4

cdcd00:

 yellow 3

8b8b00:

 yellow 4

6b8e23:

 olive drab

9acd32:

 olive drab 3

698b22:

 olive drab 4

ffa500:

 orange

ee9a00:

 orange 2

cd8500:

 orange 3

8b5a00:

 orange 4

ff4500:

 orange-red

ee4000:

 orange-red 2

cd3700:

 orange-red 3

8b2500:

 orange-red 4

cdb38b:

 navajo white 3

8b795e:

 navajo white 4

232375:

 navy blue

ff42d2:

 nessy

8b3626:

 tomato 4

]]> http://nichestoremarket.com/2009/04/css-color-code-list-for-developing-niche-stores/feed/ 0