All Posts, Build a Niche Store, HTML and CSS

Basic BANS Customization with CSS

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.

Share This Page:

 Link to this page
 Link to this page
Copy the code below to your web site.
x 
<a href="http://nichestoremarket.com/2009/04/basic-bans-customization-with-css/" title="Basic BANS Customization with CSS">Basic BANS Customization with CSS</a>
Get LinkToThisPage from the Creative Real Estate Investing Guide.
Tagged: bans css, bans customization, bans design, css styles