Skip to content

Instantly share code, notes, and snippets.

@mrcave
Last active December 10, 2015 18:58
Show Gist options
  • Save mrcave/4478189 to your computer and use it in GitHub Desktop.
Save mrcave/4478189 to your computer and use it in GitHub Desktop.
Spruce up your files & links elements http://lightignite.com/spruce-up-your-files-links-elements
.linksModule li{
width: 165px;
float: left;
padding: 0;
}
.linksModule ul{
list-style-type:none;
list-style:none;
padding:0;
margin:0;
}
.linksModule li{
list-style-type:none;
list-style:none;
margin:0 8px 10px 8px;
padding:0;
width: 200px;
float:left;
}
.linksModule li a {
background-color: #8c9cbf;
background-image: -webkit-gradient(linear, left top, left bottom, from(#8c9cbf 0%), to(#546a9e 50%));
/* Saf4+, Chrome */
background-image: -webkit-linear-gradient(top, #8c9cbf 0%, #546a9e 50%, #36518f 50%, #3d5691 100%);
background-image: -moz-linear-gradient(top, #8c9cbf 0%, #546a9e 50%, #36518f 50%, #3d5691 100%);
background-image: -ms-linear-gradient(top, #8c9cbf 0%, #546a9e 50%, #36518f 50%, #3d5691 100%);
background-image: -o-linear-gradient(top, #8c9cbf 0%, #546a9e 50%, #36518f 50%, #3d5691 100%);
background-image: linear-gradient(top, #8c9cbf 0%, #546a9e 50%, #36518f 50%, #3d5691 100%);
border: 1px solid #172d6e;
border-bottom: 1px solid #0e1d45;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: inset 0 1px 0 0 #b1b9cb;
-moz-box-shadow: inset 0 1px 0 0 #b1b9cb;
-ms-box-shadow: inset 0 1px 0 0 #b1b9cb;
-o-box-shadow: inset 0 1px 0 0 #b1b9cb;
box-shadow: inset 0 1px 0 0 #b1b9cb;
color: #fff !important;
font: bold 16px "helvetica neue", helvetica, arial, sans-serif;
padding: 7px 0 8px 0;
text-decoration: none;
text-align: center;
text-shadow: 0 -1px 1px #000f4d;
width: 200px;
display:block;
}
.linksModule li a:hover {
background-color: #7f8dad;
background-image: -webkit-gradient(linear, left top, left bottom, from(#7f8dad 0%), to(#4a5e8c 50%));
/* Saf4+, Chrome */
background-image: -webkit-linear-gradient(top, #7f8dad 0%, #4a5e8c 50%, #2f477d 50%, #364c80 100%);
background-image: -moz-linear-gradient(top, #7f8dad 0%, #4a5e8c 50%, #2f477d 50%, #364c80 100%);
background-image: -ms-linear-gradient(top, #7f8dad 0%, #4a5e8c 50%, #2f477d 50%, #364c80 100%);
background-image: -o-linear-gradient(top, #7f8dad 0%, #4a5e8c 50%, #2f477d 50%, #364c80 100%);
background-image: linear-gradient(top, #7f8dad 0%, #4a5e8c 50%, #2f477d 50%, #364c80 100%);
cursor: pointer;
}
.linksModule li a:active {
-webkit-box-shadow: inset 0 0 20px 0 #1d2845, 0 1px 0 white;
-moz-box-shadow: inset 0 0 20px 0 #1d2845, 0 1px 0 white;
-ms-box-shadow: inset 0 0 20px 0 #1d2845, 0 1px 0 white;
-o-box-shadow: inset 0 0 20px 0 #1d2845, 0 1px 0 white;
box-shadow: inset 0 0 20px 0 #1d2845, 0 1px 0 white;
}
li.filelink-ext-doc, li.filelink-ext-docx, li.filelink-ext-rtf{
background: url(/path/to/file-type-icons/doc.png) no-repeat;
}
/* override default styles */
.linksModule ul{
list-style-type:none;
list-style:none;
}
.linksModule li{
list-style-type:none;
list-style:none;
padding-left: 20px !important;
margin:3px 0;
background: url(/path/to/file-type-icons/empty.png) no-repeat;
vertical-align: middle;
}
/* set file-type icons */
li.filelink-ext-doc, li.filelink-ext-docx{
background: url(/path/to/file-type-icons/doc.png) no-repeat;
}
li.filelink-ext-pdf{
background: url(/path/to/file-type-icons/pdf.png) no-repeat;
}
li.filelink-ext-ppt, li.filelink-ext-pptx{
background: url(/path/to/file-type-icons/ppt.png) no-repeat;
}
li.filelink-url{
background: url(/path/to/file-type-icons/link.png) no-repeat;
}
li.filelink-ext-mov, li.filelink-ext-wmv, li.filelink-ext-mpg, li.filelink-ext-mp4{
background: url(/path/to/file-type-icons/movies.png) no-repeat;
}
li.filelink-ext-txt{
background: url(/path/to/file-type-icons/txt.png) no-repeat;
}
li.filelink-ext-xls{
background: url(/path/to/file-type-icons/xls.png) no-repeat;
}
zip, txt, html, htm, js, css, ico, xml, swf, gif, jpg, jpeg, bmp, png, aif, aifc, aiff, asf, asx, au, avi, class, flv, m1v, m3u, mid, midi, mov, mp2, mp2v, mp3, mpa, mpe, mpeg, mpg, mpv2, mvr, rm, rma, rmi, rmv, snd, wav, wax, wm, wma, wmp, wmv, wmx, wvx, doc, docx, pdf, xls, xlsx, ppt, pptx
<li id="FileLink_Link139015" class="filelink-ext-docx" onmousedown="hasMouseDown=true;" onmousemove="checkMouse()" onmouseup="hasMouseDown=false;">
<a href="/Websites/lightignite/files/Content/2237712/Word.docx" target="_self">Word</a>
<span class="fileSize">(0.02 KB)</span>
<span class="description"></span>
</li>
.linksModule ul{
list-style-type:none;
list-style:none;
}
.linksModule li{
list-style-type:none;
list-style:none;
padding-left: 20px !important;
margin:3px 0;
background: url(/path/to/file-type-icons/default.png) no-repeat;
vertical-align: middle;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment