From collectables to cars, buy and sell all kinds of items on eBayWelcome! Sign in or register
aAdvanced Search
Popular products
No suggestions.

Reviews & Guides

Write a guide

Simple CSS effect - Coloured box around your text

by: kensplace2( 1871Feedback score is 1000 to 4,999) Top 100 Reviewer
12 out of 24 people found this guide helpful.
Guide viewed: 1849 times Tags: CSS | HTML | listings | effects | highlighting


This is a example of how to apply a simple effect with CSS that can spruce up your auctions.

Instead of having a line, or paragraph of text, looking rather plain, like this is, why not have something like the example below



(the pic is too small, but ebay wont allow larger uploads in the guides), but you should get the idea, its text that is highlighted by having a background colour all round it. It is also padded around the edges so the text is not squashed right up against the borders of the box.

You can have any colour you want as the background, you just need to change the colour in the code example (red, green, blue, silver, grey, white, black, etc etc, you can also specify a full range of other colours but you need to be able to use the colour code, such as #FFFFFF for white and #000000 for black, there are many guides on google and other search engines that explain how to get the codes)

How to implement this?

Simple, just paste the following bit of code at the top of your auction,

<style type="text/css">
.colbox
{
background-color: silver;
padding: 0.5em 0.5em 0.5em 0.5em;
margin-bottom: 0.5em;
}
</style>

then each time you want the effect simply put this at the START of the text

<div class="colbox">

then put

</div>

at the END of the text you want highlighting.

Lets show you an example, you have already pasted the code at the top of the auction and you want the following text highlighted.


FREE SHIPPING ON ALL ORDERS OVER 10 POUNDS


This is how you would do it.

</div class="colbox">
FREE SHIPPING ON ALL ORDERS OVER 10 POUNDS
</div>

Simple isnt it!

To change the effect, just study the code that you need to paste at the top of the auction,

background-color: silver;

that bit is the background colour of the highlight, you could easily have it as

background-color: red;

instead or

background-color: blue;

Whatever is required.

You can also change the border (how far indented the text is inside the highlight) by changing this line

padding: 0.5em 0.5em 0.5em 0.5em;

so

padding: 0em 0em 0em 0em;

Would give NO indent or padding at all, whereas

padding: 5em 5em 5em 5em;

would give about 5 text characters worth of padding on ALL sides, experiment to see how you can get the best effects for your auctions.

If you want more than one style you can just have more like shown below

<style type="text/css">
.colbox-style1
{
background-color: silver;
padding: 0.5em 0.5em 0.5em 0.5em;
margin-bottom: 0.5em;
}
colbox-style2
{
background-color: g;
padding: 0.5em 0.5em 0.5em 0.5em;
margin-bottom: 0.5em;
}
colbox-style3
{
background-color: blue;
padding: 1em 1em 1em 1em;
margin-bottom: 0.5em;
}
</style>

That would give you three different stlyes to choose from (the style names can be changed to what you prefer), and you just need to make sure you use the right style name when you right the

<div class="colbox-stylenameyouchose">

at the start of each bit of text you want to apply the effect to.

So armed with this, you should be able to start experimenting, and dont forget there are many more things you can do with CSS, look out for more guides from myself, and search on the internet for plenty of useful information about Cascading Style Sheets (CSS)



Guide ID: 10000000000113376Guide created: 21/12/05 (updated 11/10/09)

 
Was this guide helpful? Report this guide

Ready to share your knowledge with others? Write a guide




About eBay | Announcements | Safety Centre | Partner Centre | VeRO: Protecting Intellectual Property | Policies | Feedback Forum | Site Map | Help
Copyright © 1995-2009 eBay Inc. All Rights Reserved. Designated trademarks and brands are the property of their respective owners. Use of this Web site constitutes acceptance of the eBay User Agreement and Privacy Policy.
eBay official time