Product Tips – Creating Cool Banners
How do you add rounded corners to a banner across the page in Clicktools?
Well, to create this cool banner, just put the text within a DIV statement, for example:
<div style=”width:100%; background:#7915AB; color:#FFFFFF; padding: 5px;”>
In the above, the width statement of 100% forces the text to take up the whole width (no matter what the width of the screen/template); the colors of the box and text are defined by the # entries and the padding defines the spacing around the text (inside the rectangle).
It’s a very flexible and powerful environment, so you can do some pretty cool things. For example, the code below puts the text in the purple and contains it within a rectangle with rounded corners.
<div style=”width:100%; border:1px solid #7915AB; color:#7915AB; padding: 5px; border-radius:8px; -moz-border-radius:25px; /* Firefox 3.6 and earlier */” >
Cool banner with rounded corners
This will look something like this:
In this example, the border defines the thin purple line around the rectangle, while the border-radius defines the degree of roundness. To try for yourself and see what this looks like (and to try variations) go to http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_div_test and paste the code in. I would recommend using something like http://www.w3schools.com to try and learn html. It’s a great resource.
Come back for more product tips!