Simple CSS effect - Coloured box around your text

kensplace2
By Published by
. Views . Comments Comment . 17 Votes
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)


 
Write a guide
Choose a template

Additional site navigation