More of a record of what I have done then anything else!
Theme installed; Gerrys modified version of Dark Canvas Theme
Why I modded it? I wanted drop shadows around my albums, no crappy icons, fluid width and my own CSS header.
The great thing about Gallery3 is the way you mod the theme and how things look, the only files you have to touch (well for me anyway) are;
1) /dark_canvas/views/page.html.php
2)/dark_canvas/css/screen.css
So, onto the mods
Drop shadows;
Insert the following into the top of /dark_canvas/views/page.html.php
<style>
img.g-thumbnail, img.g-resize{
border:0;
-moz-box-shadow: 5px 5px 5px #111;
-webkit-box-shadow: 5px 5px 5px #111;
box-shadow: 5px 5px 5px #111;
}
</style>
and
<script type=”text/javascript”> $(document).ready(function() { $(“img.g-thumbnail, img.g-resize”).css({‘behavior’: ‘url(/PIE.htc)’}); }) </script>
and get hold of PIE to hopefully sort out some the older IE issues!
http://css3pie.com/
Just extract this into the root gallery3 directory
Icons;
just delete them from the images directory, quick and dirty!
Fluid width;
Change
<div id=”doc4″ class=”yui-t5 g-view”>
which gives you a fixed 974px width
to
<div id=”doc3″ class=”yui-t5 g-view”>
which gives you 100% width!
thats the easy bit, now to jump into the CSS and play with teh containers to get the content to not be fixed to a set number of columns!
I have tweaked a few little things like heading text size, but forgot to note where I changed stuff, normally I try and comment when I change stuff so when I drop by in 6months time I know whats changed!
This is what I ended up with
/*gerry*/
#g-content {
padding-left: 20px;
position: relative;
width: 95%
}
/*gerry*/
#g-sidebar {
padding: 10px 10px;
float: left;
width: 220px;
This makes the gallery a true fluid width, just adjust the number of items on the page thru the theme options and your good to go!
Custom header and footer;
This is pretty easy, gallery3 gives a place to include html for the header and footer, however you have to be careful since it strips away CSS, this makes things a bit interesting when you want your CSS header!
All I did was modify the
/dark_canvas/views/page.html.php
to include my CSS code and hey it worked! you may also need the html_purifier module which helps – not sure how or why.
probably a better way would be to include your CSS in the screen.css file!
this is my code for the CSS stuff;
<style type=”text/css”>
.gbutton, .gbutton:visited {
background: #222;
display: inline-block;
padding: 3px 10px 3px;
color: #ddd;
text-decoration: none;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-moz-box-shadow: 2px 3px 8px rgba(255,255,255,0.50);
-webkit-box-shadow: 2px 3px 8px rgba(255,255,255,0.50);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
position: relative;
cursor: pointer;
}.gbutton:hover { background-color: #111; color: #fff; }
.gbutton:active { top: 1px; }
.small.gbutton, .small.gbutton:visited { font-size: 10px; padding: ; }
.gbutton, .gbutton:visited,
.medium.gbutton, .medium.gbutton:visited { font-size: 13px; font-weight: normal; line-height: 1; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); }
.grey.gbutton, .blue.gbutton:visited { background-color: #505050 ; }
.grey.gbutton:hover { background-color: #707070; }</style>
and my header text, which is set through -> Appearance ->Theme Options
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html >
<head></head>
<body>
<body bgcolor=”#222222″><img name=”galleryheader” src=”http://www.avernus.com.au/gallery-header_V4.gif” width=”850″ height=”80″ border=”0″ id=”galleryheader” alt=”” /><br />
<br />
<div align=”left”><a href=’http://www.avernus.com.au/’ class=’small grey gbutton’>Avernus »</a>
<a href=’https://blog.avernus.com.au/’ class=’small grey gbutton’>Blog</a>
<a href=’http://gerry.avernus.com.au/avernus/IS/’ class=’small grey gbutton’>Imagery</a>
<a href=’http://gallery.avernus.com.au/’ class=’small grey gbutton’>Gallery</a>
<a href=’http://gerry.avernus.com.au/slide/’ class=’small grey gbutton’>File Repository</a>
<a href=’http://www.avernus.com.au/avernus/pages/hardware/temperature/temperature.htm’ class=’small grey gbutton’>Temperature</a>
<a href=’http://www.avernus.com.au/avernus/pages/misc/about-avernus.htm’ class=’small grey gbutton’>About</a>
</div>
<br />
</body>
</html>
and footer;
<html> <head> <!– function MM_openBrWindow(theURL,winName,features) { //v2.0 window.open(theURL,winName,features); } //–> </head> <body link=”#CCCCCC” vlink=”#CCCCCC” alink=”#CCCCCC”> <div align=”center”><font size=”1″ color=”#999999″>© Copyright 2001-2011, www.avernus.com.au ,<a href=”http://www.avernus.com.au/avernus/pages/misc/copyright.htm” target=”_self” /avernus/pages/misc/copyright.htm’,”,’scrollbars=yes,width=700,height=800′)”>[View Copyright and Terms of Use]</a><br> Pages maintained by: <a href=”mailto:webmaster@avernus.com.au”><i>Gerard Blacklock</i> </a> Last Modified – <!– #BeginDate format:fcAm1m –>Thursday, January 6, 2011 23:04<!– #EndDate –> </font></div> </body> </html>