You may have seen that some of the Wikilime hosted sites have some cool mouseover hightlighting effects. Well this is real easy to create, its just a matter of adding one line of code to your CSS.

For this example we will take a look at the bottom sales box on the main page of your cart. The bottom sales box is the section under the product image that holds the description and the price. To create a highlight effect on this element we just need to add the following :

#saleBoxBottom:hover { background-color:#000000; }

This will create a highlight effect with a black background. You can of cause add more syntax to this so that the font and borders also change. Example…

#saleBoxBottom:hover { background-color:#000000; font-weight:bold; border:1px solid #ffffff; }

One last bit of code that you may want to add is the cursor element. This will tell the browser to show the cursor as a hand and not the default arrow when a user hovers the mouse over this element. This just helps to tell the user that this is a link.

#saleBoxBottom:hover { background-color:#000000; font-weight:bold; border:1px solid #ffffff; cursor:hand; cursor: pointer; }

That’s it! easy hey!

Ever wanted to know how to create smooth rounded DIV or table boxes for your site using CSS? If you find the squared off windows of the Wikilime cart a bit dull then you can bubble them up a little using some CSS and imagery magic.

1. First off you need to create an image that’s going to be used for the rounded table or DIV. This needs to look something similar to this image. The width of the image will need to be exactly the same width as you want the table or DIV to be.

2. You then need to upload the image to some web space so that you can link to it from your CSS. There are many image upload sites on the net, an example is www.screenshots.cc. Once you have uploaded your image you just need to make a note of the image URL.

3. Now for the CSS. In this example we will change the menu boxes that appear on the right hand side of your store. So firstly we want to give the top some rounded corners;

#smallBoxTop {
background-url(http://the-url-of-your-image.jpg);
background-position: top left;
background-repeat: no-repeat;
padding:6px;
height:50px;
}

Then we need to give the bottom some rounded corners;

#smallBoxBot {
background-url(http://the-url-of-your-image.jpg);
background-position: bottom left;
background-repeat: no-repeat;
padding:6px;
height:50px;
}

And finaly we edit the middle of the table or DIV so that it matched the image we created;

#smallBox {
background-color:#abbfab;
border: 3px solid #798579;
border-top:none;
border-bottom:none;
padding:6px;
height:150px;
}

We have been asked a few times “Is there a way to remove certain layout elements” from the Wikilime cart. Well the answer is yes there is and its also really easy.

For example if you didn’t want to display the top menu panel you would just amend the CSS to the following:

#topPanel { display:none; }

Thats it! By doing the above you are telling the browser to just not load that block of HTML.

You can now download the html source for your shopping cart. This should help you style your site by quickly seeing the ID references for each element. Just open the source files in a HTML editor (we recomend Dreamweaver) and you will be able to see the layout guide.

Download the source files here.

To help you with the customisation of your Wikilime shopping cart we have put together a simple style guide of the main elements that make up each online store. Hopefully you will find this helpful in referencing the CSS code.

View the layout guide here.

Element A - #mainTable
This is the main outter table that surrounds the entire shopping cart

Element B - #topPanel
This is the top panel for the site. The image header for your site sits inside this panel. You can also reference the image directly using #imageHeader.

Element C - #topMenu
The topMenu panel is where your menu items sit for navigating the cart.

Element D - #mainInnerCell
The mainInnerCell is where the main body of your shopping cart displays. This holds the products and page details for your online cart.

Element E - #bottomPanel
This is the main footer for your online store.

Element F - #smallBoxTop
This is the heading box for the menu that appears on the right.

Element G - #smallBoxBot
This is the footer box for the menu that appears on the right.

Element H - #smallBox
The smallBox element is the main content area for the menu that appears on the right. This includes the cart, faq and subscription menus.

Element I - #prodImage
This is the image of your product that appears on the main listing page.

Element J - #bottomSaleBox
This is the box that appears under the images on your main product page. Within this box you also have #SaleBoxText so that you can define the price text colour.