<!-- Cliproll CSS customizing by BigBadWolf
Please note: I am including only the HTML basics in this page so you can see how it works.
This is not an
html compliant page at all.
Big props to EricW at clipmarks for helping me get some of this nailed down!
You can copy and paste this entire document minus a couple of lines and paste it into yours.
See the descriptions below.
-->
<!-- Leave the <html> and <head> out when copying -->
<html>
<head>
<!-- You can either embed the CSS styles in your document somewhere inbetween the <head> </head>
statements or include them in an external style sheet. Leave out the <style type="text/css"> and
the closing </style> if you put it into an external sheet. -->
<style type="text/css">
/* .Clipmarks - This sets the style for the entire clipmarks div. Meaning, the entire block of clips. As it is,
I set the background color, border style and width of the div. You will see later why I am setting a width. */
.Clipmarks {
background-color: #FFFFFF;
border: thin solid #FFCC33;
width: 474px;
}
/* .ClipmarkLink - This sets the style for each clipmarks link which is sent in its own div. What you set here will
be carried down through the other styles unless you change them inside those specific styles. */
.ClipmarkLink {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-indent: 5px; /*this will indent the entire links section */
border-bottom: 1px dotted #DFDFDF; /* this will set a border under each link */
line-height: 20px; /* adjust the line height for more or less space between each link */
}
/* .ClipmarkLink a - This sets the style for each clipmarks link even further since this effects the actual
links themselves rather than the div they are inside of. */
.ClipmarkLink a{
color:#3A50CA; /* sets the color of the link text */
text-decoration:none; /* this tells the browser NOT to underline each link. Delete this if you'd like underlines */
background-image: url(images/bullet_blue.gif); /* this puts your own custom bullet on each link */
background-repeat: no-repeat; /* tells browser not to repeat the image across the line */
padding-left: 20px; /* This pushes the links to the right so they don't overlap the bullets. Adjust accordingly */
}
/* .ClipmarkLink a:hover - This sets the style for each clipmarks link as you mouse over it */
.ClipmarkLink a:hover {
color: #FF9933; /* changes the color of the link when moused over */
background-image: url(images/bullet_orange.gif); /* this changes the background bullet as it is rolled over. */
}
/* .Clipmarks img - This effects the clipmarks logo. I show two examples here of how you can change the image if you desire.
You can change the left margin to any number of pixels to offset it or change "float: none;" to "float: right;"
if you want it right aligned. */
.Clipmarks img {
float: none;
margin-left: 0px;
background-color: #FFFFFF;
}
</style>
<!-- Leave this </head> out when copying -->
</head>
<!-- Leave this <body> out when copying and paste everything below someplace between
your <body> and </body> tags -->
<body>
<!-- Here I am putting the clipmarks div inside another div (<div id="Clipmarks") so I can contain it's size.
This is desireable only if you need to control the height of the box so that it is scrollable. This lets
you set a higher number of links when you create your cliproll and not take up more verticle space. If you
use this extra div, you need to adjust the "width:" in the .Clipmarks style. That should be generally
26 pixels lower if using a border. -->
<div id="Clipmarks" style="position:relative; width:500px; height:176px; z-index:1; left: 30px; top: 24px; overflow: scroll;">
<!-- Here is the actual div that contains the cliproll. Copy and paste your cliproll into the line between the <div> and </div>
(the line that begins "<script type="text/javascript" src="http://clipmarks.com/feed/" is your cliproll. -->
<div class="Clipmarks" id="Clipmarks">
<script type="text/javascript" src="http://clipmarks.com/feed/?rs=%2fpublic%2f&ol=1&om=1&n=10"></script><noscript><a href="http://clipmarks.com/public/">My Clipmarks</a></noscript>
</div>
</div>
<!-- Do not copy the last two lines below if you're pasting into your own file. -->
</body>
</html>