Websites/Style sheets
From Digital Photo Gallery - Help
< Websites
This section is currently being expanded, if you have any questions please email info@digitalphotogallery.com
Contents |
Overrides
CSSEdit
Standard
Download [Mac]
Custom logo
Standard
Sample code:
h1 { width: 120px; height: 120px; background: url(http://yourimagelocation.com/image.jpg) no-repeat; display: block; text-indent: -9999px; }
Custom background
Standard
Sample code:
body { background: url(REPLACE_WITH_IMAGE_URL) repeat-x fixed; -moz-background-size: auto 100%; -o-background-size: auto 100%; -webkit-background-size: auto 100%; background-size: auto 100%; }
Loading graphic
Standard
Sample code:
img { background: url(http://domain.com/website_asset.gif) no-repeat center center; }
Insert content
Standard
Sample code:
#navigation li:after { content: '//'; } #navigation li:last-child:after { content: ''; }
Social icons
Standard
HTML code:
<ul> <li class="icon twitter"><a href="http://twitter.com/" target="_blank">Twitter</a></li> <li class="icon facebook"><a href="https://www.facebook.com/" target="_blank">Facebook</a></li> <li class="icon flickr"><a href="http://www.flickr.com/photos/" target="_blank">Flickr</a></li> <li class="icon rssfeed"><a href="http://feeds.feedburner.com/" target="_blank">Twitter</a></li> </ul>
CSS code:
/*============================================================== SOCIAL ICONS ==============================================================*/ #social_icons { margin: 18px; height: 32px; width: 162px; } #social_icons .icon { float: left; margin-right: 5px; margin-bottom: 5px; } #social_icons .icon a { width: 32px; height: 32px; display: block; text-indent: -9999px; } /* Customise the icon images */ #social_icons .twitter a { background-image: url(REPLACE_WITH_IMAGE_URL); } #social_icons .facebook a { background-image: url(REPLACE_WITH_IMAGE_URL); } #social_icons .flickr a { background-image: url(REPLACE_WITH_IMAGE_URL); } #social_icons .rssfeed a { background-image: url(REPLACE_WITH_IMAGE_URL); } /* The following lines are just placeholders to show an outline of where things are */ #social_icons { background-color: maroon; } #social_icons .icon a { background-color: orange; } #social_icons .icon a:hover { background-color: aqua; }