Hi,
Quite simply I am awful at CSS. I am trying to create a facebook/flickr style photo gallery. So far after a ridiculously long time I have managed to create:
http://www.stuartjackson.co.uk/v1/album/index.php?album=travel%2Faustralia&image=cradlemountain.jpg
As my image page. I however would like it to resemble: http://www.stuartjackson.co.uk/layout.jpg
Can anyone tell me how I create the column on the right so I can have a big list of tags? Basically just trying to create pretty much what I have displayed there, with ability to add lots of tags.
I know as good as zero about css and have just being getting lost or not the end result I was looking for so far.
Any help is greatly appreciated.
Oh and this is my css I've just been trying to alter the default theme:
/*
Zen Photo Default 1.0*/
/ Basics
------------------------------ /
html {
/ Moz /
height: 100%;
}
/ Main Layout
------------------------------ /
body {
background: #FFFFFF;
margin: 0px;
padding: 0px 0px 0px;
text-align: center;
margin-bottom: 0px;
}
main {
text-align: left;
margin: 0px auto;
width: 700px;
background: #fff url('images/mainback.gif') repeat-x top;
padding: 20px 30px 70px;}
credit, #sort {
margin: 0 auto;
width: 640px;
font-size: 85%;
color: #96967E;
text-align: right;
clear: both;}
credit a, #sort a {
text-decoration: none;
color: #96967E;
border-bottom: 1px dotted #96967E;}
credit a:hover, #sort a:hover {
color: #BDBDAE;
border-bottom: 1px solid #BDBDAE;
text-decoration: none;}
gallerytitle {
border-bottom: 1px solid #000000;
padding-bottom: 14px;
margin-bottom: 20px;
/*min-height: 40px;_height: 40px;*/
}
gallerytitle h2 {
font-weight: normal;
font-size: 8pt;
margin-top: 8px;
width:510px;}
/ Link Styles
------------------------------ /
a:link, a:active, a:visited { text-decoration: none; color: #5F841D; }
a:hover, a:focus { text-decoration: underline; color: #5F841D; }
/ Text Styles
------------------------------ /
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
color: #666666;
}
h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
font-weight: bold;
color: #5F841D;
}
h2 a:link, h2 a:visited {
color: #5F841D;
text-decoration: none;
}
h2 span {
color: #5F841D;
}
h2 a:hover {
color: #5F841D;
text-decoration: underline;
}
h3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
font-weight: bold;
color: #000000;
margin-top: 20px;
}
h3 a:link, h3 a:visited { text-decoration: none; }
h3 a:hover { text-decoration: underline; }
/ Miscellaneous
------------------------------ /
hr {
clear: both;
height: 0;
border: 0;
border-top: 1px solid #5F841D;
margin: 0 0 12px 0;
padding: 0;
}
img {
border: 0;
}
blockquote {
border-left: 1px dotted #96967E;
margin-left: 20px;
padding-left: 20px;
color: #363630;
}
imagemetadata {
text-align: right;
position: relative;
display: none;
}
imagemetadata table {
text-align: left;
line-height: 1em;
border: 1px solid #ccc;
position: absolute;
top: 2em;
right: 0px;
background-color: #fafafa;
}
imagemetadata table td {
border-bottom: 1px solid #f0f0f0;
background-color: #f8f8f8;
padding: 2px 5px;
}
/ Page Navigation
------------------------------ /
ul.pagelist {
clear: both;
padding: 0;
margin: 20px 0 0 0;
list-style-type: none;
}
ul.pagelist li {
display: inline;
}
ul.pagelist li a, ul.pagelist span.disabledlink {
padding: 4px;
}
ul.pagelist li.current a {
font-weight: bold;
text-decoration: none;
cursor: default;
color: #000000;
}
ul.pagelist li.prev {
margin-right: 10px;
}
ul.pagelist li.next {
margin-left: 10px;
}
.disabledlink {
color: #ddd;
cursor: default;
}
.pagenav {
clear: both;
}
.disabled_nav {
visibility: hidden;
}
/ AJAX
------------------------------ /
albumDescEditable, #albumTagsEditable {
margin-bottom: 12px;}
imageDescEditable, #albumTagsEditable {
margin-top: 24px;}
imageDesc, #exif_link {
margin-bottom: 4px;}
exif_link {
float: right;
}
/ Tags
------------------------------ /
.taglist ul {
display: inline;
list-style-type: none;
}
.taglist ul li {
background: url(../images/tag.png) no-repeat left center;
list-style-type: none;
padding-left: 18px;
float:left;
padding-right: 5px;
color: #999999;
display: inline;
list-style-type: none;
}
.taglist .tags_title {
background: none;
padding-right: 5px;
padding-left: 0;
}
/ Image Thumbnails
------------------------------ /
.imagethumb a, .imagethumb a:hover {
display: block;
padding: 9px;
margin: 0px 9px 9px 0px;
line-height: 0px;
border: 1px solid #e6e6e6;
background-color: #f6f6f6;
}
.imagethumb a:visited {
background-color: #fcfcfc;
border: 1px solid #f8f8f8;
}
.imagethumb a:hover {
background-color: #f3f3f3;
border: 1px solid #cccccc;
}
.imagethumb {
float: left;
}
.albumdesc2 {
line-height: 18px;
}
/ Album Thumbnails
------------------------------ /
albums {
float: left;}
.album {
margin: 0 22px 8px 0;
padding: 10px 8px 8px 10px;
float: left;
width: 300px;
border: 1px solid #E7F0F5;
background: #FFFFFF;
line-height: 100%;
}
.album a img { }
.album .thumb {
float: left;
margin-right: 6px;
}
.album h3 {
padding: 0;
margin: 0;
}
.album p {
line-height: 12px;
font-size: 11px;
padding: 8px 0px 0px;
margin: 0px;
}
.albumdesc small {
color: #666666;
}
/ Individual Image
------------------------------ /
.image {
margin: 0;
padding: 0;
border: 0;
}
image {
text-align: center;
line-height: 0;}
.imgnav {
float: right;
width: 80px;
text-align: center;
border: 0px solid #D5E6EE;
background: #ffffff;
margin-top: -7px;
}
.imgnav .imgprevious a, .imgnav .imgnext a {
display: block;
width: 50%;
height: 40%;
float: left;
padding: 4px 0;
font-size: 10px;
text-decoration: none;
line-height: 180%;
color: #5F841D;
}
.imgnav .imgprevious a:hover, .imgnav .imgnext a:hover {
background-color: #5F841D;
text-decoration: none;
color: #FFFFFF;
}
.imgnav .imgprevious a {
float: left;
}
.imgnav .imgnext a {
float: right;
}
narrow {
margin: 0 auto;
width: 640px;}
/ Comments
------------------------------ /
comments {
clear: both;}
.error {
color: #C33;
font-weight: bold;
}
.comment {
padding: 10px;
border: 1px solid #E7F0F5;
background: #FBFCFD;
margin-bottom: 12px;
}
.commentmeta {
margin-bottom: 12px;
}
.commentauthor {
font-weight: bold;
}
.commentdate {
margin-top: 12px;
color: #000000;
font-size: 85%;
}
/ Forms
------------------------------ /
.inputbox {
width: 250px;
padding: 2px;
}
textarea {
padding: 4px;
width: 100%;
color: #5A5A4B;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
}
.checkbox {
cursor: pointer;
}
.pushbutton {
cursor: pointer;
padding: 5px 10px;
}
label {
cursor: pointer;
}
label:hover {
color: #000;
}
map {margin-left: -77px;}
rating { margin-top: 10px; }
/ Admin Toolbox
------------------------------ /
admin, #admin_data{
position: fixed;
right: 0px;
top: 0px;
width: 130px;
border-bottom: 1px solid #E6E6DF;
border-left: 1px solid #E6E6DF;
background: #fff;
z-index: 2; text-align: left;}
admin_data{
top: 0px;
padding-top: 20px;
z-index: 1;
line-height: 1.6em;}
admin h3 {
font-weight: normal;
color: #999;
margin:0;
padding:0; text-align: center;}
admin h3:hover { color: #036; }
/ Search Box
------------------------------ /
search {
float: right;
text-align: left;
margin:0;
padding:0;
background: #fff;}
search input.pushbutton {
padding: 1px;
font-size: 80%;}
search a {
text-decoration: none;
}
search ul {
border: 1px solid #ccc; position:absolute; text-align:left; list-style: none;
height: 8em; width: 20em; overflow: auto;
background-color: white;
}
searchfields_icon {
position: relative;
top: 4px;
}
.clear {
clear:both;
height:10px;
}
/ Archive View
---------------------------- /
archive{
width: 300px;
margin: 0 auto;
text-align: center;}
ul.archive * {
padding:0;
margin:0;
list-style:none;
}
ul.archive .year {
margin-top:10px;
text-align: center;
margin-bottom:5px;
font-weight:bold;
font-size:18px;
}
ul.archive .month {
font-size: 14px;
list-style:none;
border-top:2px solid #E6E6DF;
padding-top: 5px;
}
/ Tag Cloud
---------------------------- /
tag_cloud {
text-align: center;
background: #eee;}
tag_cloud ul li {
display: inline;
list-style-type: none;}
tag_cloud p {
padding:10px 0;
margin:20px 0;
background: #fff;
border-top: 3px solid #E6E6DF;
border-bottom: 3px solid #E6E6DF;
font-size: 18px;
font-weight:bold;
text-align: center;}
/ Error Messages
------------------------------ /
.errorbox {
padding: 20px;
background-color: #FDD;
border-top: 1px solid #FAA;
border-left: 1px solid #FAA;
border-right: 1px solid #FAA;
border-bottom: 5px solid #FAA;
margin-bottom: 10px;
font-size: 100%;
co
Hi,
I've looked and it doesn't appear to? Think I might just give in and use flickr. Tried to adapt another page I found but just can't get it dispalyed right. Might have one last try then if unsuccessful use flickr or facebook.
Thanks for the response anyway.
ah... think you might mean the actual zenpage? If so I see what you mean. I will try to steal and adapt the CSS from that now maybe?! clueless.
Sorry?? I said the [i]zenpage-default theme[/i] has a sidebar: http://www.zenphoto.org/zp/theme/zenpage-default/Image.jpg.php
No need to "steal" as it is free.
ah! I see what you mean now. I thought you mean't the standard theme. Never noticed this option. I will try to adapt that to suit my needs. Thanks a lot for the help it's really appreciated. Take it I can just take the bits I want and turn off the CMS stuff? CMS plugin opens a whole new can of worms for me, think I just want a good functioning photo album. Might have a look at it though.
Thanks again for the help.