summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--themes/default/css/screen.css791
-rw-r--r--themes/default/views/album.html.php48
-rw-r--r--themes/default/views/photo.html.php92
3 files changed, 441 insertions, 490 deletions
diff --git a/themes/default/css/screen.css b/themes/default/css/screen.css
index 0f12b789..cafe21de 100644
--- a/themes/default/css/screen.css
+++ b/themes/default/css/screen.css
@@ -4,23 +4,22 @@
* @requires YUI reset, font, grids, and base CSS
*
* Sheet organization:
- * 1) Global element styles
- * 2) Text (fonts, headings, links)
- * 3) Layout containers
- * 4) Generic blocks
- * 5) Primary content blocks
- * 6) Navigation and menus
- * 7) Tables
- * 8) Forms, additional form CSS stored in css/forms.css (temporarily)
- * 9) General browser hacks
+ * 1) HTML elements (headings, links, lists, tables, forms)
+ * 2) Layout containers (view, header, content, sidebar, footer)
+ * 3) Generic content containers (item, block)
+ * 4) Specific content containers and blocks (albums, metadata, comments)
+ * 5) Navigation and menus (menus, breadcrumbs, pagination, tab cloud)
+ * 6) Specific text styles (different headings, font sizes, etc.)
+ * 7) Generic styles ()
+ * 8) Browser hacks (clear fix)
*/
- @import url('css/forms.css');
+ @import url('forms.css');
/**
- ** **************************************************
- * 1) Global unique styles
- ** **************************************************
+ ** *******************************************************************
+ * 1) HTML elements (body, headings, links, lists, tables, forms)
+ ** *******************************************************************
*/
/* ~~~~~~~~~ general elements ~~~~~~~~~~ */
@@ -28,33 +27,33 @@ body, html {
background-color: #ccc;
}
-/* ~~~~~~~~~ text elements ~~~~~~~~~~ */
+/* ~~~~~~~~~ text ~~~~~~~~~~ */
h1 {
- margin-top: 0px;
+ margin-top: 0;
}
a {
- color: #6B8CB7;
- text-decoration: none;
+ color: #6B8CB7;
+ text-decoration: none;
}
a:hover {
- color: #FF3300;
- text-decoration: underline;
+ color: #FF3300;
+ text-decoration: underline;
}
-/* ~~~~~~~~~ list elements ~~~~~~~~~~ */
+/* ~~~~~~~~~ list ~~~~~~~~~~ */
li {
- list-style-type: none;
+ list-style-type: none;
}
-/* ~~~~~~~~~ table elements ~~~~~~~~~~ */
+/* ~~~~~~~~~ table ~~~~~~~~~~ */
caption {
- text-align: left;
+ text-align: left;
}
th {
- text-align: left;
+ text-align: left;
}
-/* ~~~~~~~~~ form elements ~~~~~~~~~~ */
+/* ~~~~~~~~~ form ~~~~~~~~~~ */
form {
}
@@ -72,34 +71,32 @@ textarea {
}
/**
- ** **************************************************
- * 2) High level content containers (header, content, sidebar, footer)
- ** **************************************************
+ ** *******************************************************************
+ * 2) Layout containers (view, header, content, sidebar, footer)
+ ** *******************************************************************
*/
-/* ~~~~~ View Container ??? ~~~~~~ */
-.gView,
-.gAlbumView,
-.gItemView {
+/* ~~~~~ View Container ~~~~~~ */
+.gView {
background-color: #fff;
border: 1px solid #ccc;
border-width: 0 1px 1px 1px;
}
-/* ~~~~~~~~ high level content containers ~~~~~~~~ */
+/* ~~~ Layout Containers ~~~~~ */
#gHeader {
- position: relative;
-
+ position: relative;
}
#gContent {
border-right: 1px solid #ccc;
padding: 20px;
- clear: both;
+ clear: both;
}
#gSidebar {
+ background-color: #fff;
width: 18.4615em;
padding: 1.5em 0 0 0;
}
@@ -110,231 +107,117 @@ textarea {
}
/**
- ** **************************************************
- * 3) Header styles (logo, login, site menu, breadcrumbs, search)
- ** **************************************************
+ ** ****************************************************************
+ * 3) Generic content containers (item, block)
+ ** ****************************************************************
*/
-
-/* ~~~~~~~~ logo/title ~~~~~~~~ */
-
-#gLogo {
- float: left;
- margin: 10px;
-}
-#gHeader h1 {
- float: left;
- margin: 20px 0 0 20px;
-}
-
-/* ~~~~~~~~ login menu ~~~~~~~~ */
-
-#gLoginMenu {
- position: absolute;
- top: 0px;
- right: 13px;
- border: 1px solid silver;
- border-width: 0 1px 1px 1px;
- padding: 5px;
- text-align: right;
-}
-#gLoginMenu form {
- margin-top: 5px;
-}
-#gLoginMenu label {
- font-size: 0.8em;
-}
-#gLoginMenu input.text,
-#gLoginMenu input.password {
- width: 80px;
- padding: 0 0 .1em 0;
-}
-#gLoginMenu input.submit {
- font-size: 0.9em;
- font-weight: bold;
-}
-
-/* ~~~~~~~~ site menu ~~~~~~~~ */
-
-#gSiteMenu {
- height: 31px;
- margin: 0;
+
+.gBlock {
+ margin: 0 1em 2.5em 0;
padding: 0;
- list-style-type: none;
- clear: both;
-}
-#gSiteMenu li {
- list-style-type: none;
- float: left;
- display: block;
- width: 20%;
- background: #E6EBF0;
-}
-#gSiteMenu li a {
- color: #003366;
- font-weight: bold;
- height: 20px;
- display: block;
- text-align: center;
- padding: 7px 7px 3px 7px;
- background: url('images/bg_sitemenu.png') repeat-x;
- margin-left: 1px;
- border: 1px solid #336699;
- border-width: 0 1px 1px 0;
- text-decoration: none;
- letter-spacing: .1em;
-}
-#gSiteMenu li a:hover {
- color: #FF3300;
- background: url('images/bg_sitemenu_hover.png');
}
-#gSiteMenu li a.active {
- background: #DCE6EF;
- border-color: #DCE6EF;
- color: #FF3300;
+.gBlockHeader {
+ background-color: #E8E8E8;
+ padding: .3em .4em .3em .4em;
+ height: 1.5em;
+ margin: 0 !important;
+ position: relative;
+ cursor: move;
}
-
-/* ~~~~~~~~~ breadcrumbs ~~~~~~~~~~ */
-
-#gBreadcrumbs {
- border-bottom: 1px solid silver;
+.gBlockHeader h2 {
margin: 0;
- padding: 0 0 0 14px;
- height: 28px;
- list-style-type: none;
-}
-#gBreadcrumbs li {
- list-style-type: none;
- background: transparent url(images/icon_breadcrumb_separator.gif) no-repeat scroll left center;
- padding: 0 0 0 10px;
float: left;
+ font-size: 1.1em;
+ background-image: url('images/ico_dragable.png');
+ background-repeat: no-repeat;
+ padding-left: 12px;
}
-#gBreadcrumbs li.root {
- background: transparent;
- padding: 0;
+.gBlockHeader .minimize {
+ position: absolute;
+ top: .45em;
+ right: .3em;
+ width: 16px;
+ height: 16px;
+ background-image: url('images/minimize.png');
}
-#gBreadcrumbs li a,
-#gBreadcrumbs li span {
- padding: 6px 6px 6px 6px;
- display: block;
+.gBlockHeader .minimize:hover {
+ background-image: url('images/minimize_active.png');
}
-#gBreadcrumbs li.active span {
- font-weight: bold;
+.gBlockContent {
+ margin: .5em .5em 0 .5em;
}
-
-/* ~~~~~~~~~ search form ~~~~~~~~~~ */
-
-#gSearchForm {
- position: absolute;
- right: 13px;
- top: 103px;
+table.gBlockContent {
+ width: 214px;
+ table-layout: fixed;
}
-#gSearchForm input.text {
- padding: 1px;
+table.gBlockContent th {
+ padding: .3em .3em .3em 0;
}
-#gSearchForm input.submit {
- height: 20px;
+table.gBlockContent td {
+ padding: .3em 0 .3em .3em;
}
/**
- ** **************************************************
- * 4) Generic styles
- ** **************************************************
+ ** ****************************************************************
+ * 4) Specific content containers and blocks (albums, metadata, comments)
+ ** ****************************************************************
*/
-.buttonlink {
- border: 1px solid lightgray;
- padding: 5px;
-}
-.buttonlink:hover {
- background-color: #F3F3F3;
-}
-.understate {
- color: silver;
+ /* ~~~~~~~~ logo ~~~~~~~~ */
+
+#gLogo {
+ float: left;
+ margin: 10px;
}
+
+ .gThumbnail {
+
+ }
+/* ~~~~~~~~~ album ~~~~~~~~~~ */
-/*
-.gBlock {
- margin: 0 1em 1.5em 0;
- border: 1px solid #336699;
- padding: 0;
-}
-.gBlockHeader {
- background-color: #E8E8E8;
- padding: .3em;
- height: 1.5em;
- border-bottom: 1px solid #6B8CB7;
- margin: 0 !important;
-}
-.gBlockHeader h2 {
- color: #003366;
- margin: 0;
- float: left;
- font-size: 1.1em;
+#gAlbumGridHeader {
+ height: 40px;
+ position: relative;
}
-.gBlockHeader .minimize {
- float: right;
+#gAlbumGridHeader h1 {
+ display: inline;
}
-.gBlockContent {
- margin: .3em;
+#gAlbumGridHeader span {
+ padding-left: 10px;
}
-*/
-.gBlock {
- margin: 0 1em 2.5em 0;
- padding: 0;
-}
-.gBlockHeader {
- background-color: #E8E8E8;
- padding: .3em .4em .3em .4em;
- height: 1.5em;
- margin: 0 !important;
- position: relative;
- cursor: move;
-}
-.gBlockHeader h2 {
- margin: 0;
- float: left;
- font-size: 1.1em;
- background-image: url('images/ico_dragable.png');
- background-repeat: no-repeat;
- padding-left: 12px;
-}
-.gBlockHeader .minimize {
- position: absolute;
- top: .45em;
- right: .3em;
- width: 16px;
- height: 16px;
- background-image: url('images/minimize.png');
+#gAlbumGrid {
+ margin: 0;
}
-.gBlockHeader .minimize:hover {
- background-image: url('images/minimize_active.png');
+#gAlbumGrid .gItem {
+ float: left;
+ text-align: center;
+ border: 1px lightgray solid;
+ list-style: none;
+ margin: 0 14px 10px 0;
+ padding: 5px 0 5px 0;
}
-.gBlockContent {
- margin: .5em .5em 0 .5em;
+
+#gAlbumGrid .first {
+ clear: left;
}
-table.gBlockContent {
- width: 214px;
- table-layout: fixed;
+
+.gAlbum {
+ background-color: #D4DAFF;
}
-table.gBlockContent th {
- padding: .3em .3em .3em 0;
+.gAlbum h2 {
+ color: #006;
}
-table.gBlockContent td {
- padding: .3em 0 .3em .3em;
+
+.gItem h2 {
+ margin: 5px 0 5px 0;
}
-/**
- ** **************************************************
- * 5) Content blocks - inherits from Generic blocks
- ** **************************************************
- */
+ /* ~~~~ individual photo ~~~~~~~ */
#gItem {
- width: 500px;
- margin-left: auto;
- margin-right: auto;
+ margin: 0;
}
#gItem a.buttonlink {
float: right;
@@ -348,7 +231,7 @@ table.gBlockContent td {
#gItem h1 {
margin: 10px 0 10px 0;
}
-
+
/* ~~~~~~~~~ metadata ~~~~~~~~~~ */
table.gMetadata {
@@ -356,28 +239,12 @@ table.gMetadata {
}
table.gMetadata td,
table.gMetadata th {
- border: 0;
+ border: 0;
}
table.gMetadata td.toggle {
- text-align: right;
-}
-
-/* ~~~~~~~~~ upload ~~~~~~~~~~ */
-
-#gUploadForm .gBreadcrumbs li input, #gUploadForm .gBreadcrumbs li select {
- width: 140px;
- margin-left: 5px;
+ text-align: right;
}
-/* ~~~~ individual photo ~~~~~~~ */
-
-.gPhotoView img {
- width: 400px;
- height: 300px;
- margin-right: auto;
- margin-left: auto;
- margin-bottom: 20px;
-}
/* ~~~~~~~~~ comments ~~~~~~~~~~ */
@@ -404,259 +271,351 @@ table.gMetadata td.toggle {
padding: 8px;
}
-/* ~~~~~~~~~ album ~~~~~~~~~~ */
+/* ~~~~~~~~~ Status messages ~~~~~~~~~~ */
+
+#gStatusMessages {
-#gAlbumGridHeader {
- height: 40px;
- position: relative;
}
-#gAlbumGridHeader h1 {
- display: inline;
+.gError {
+
}
-#gAlbumGridHeader span {
- padding-left: 10px;
+.gWarning {
+
}
-#gSlideshowLink {
- position: absolute;
- top: 0px;
- right: 0px;
+.gSuccess {
+
}
+.gInfo {
-#gAlbumGrid .gItemContainer,
-#gAlbumGrid .gAlbumContainer {
- float: left;
- text-align: center;
- border: 1px lightgray solid;
- margin: 0px 0px 10px 1.49%;
- padding: 5px 0px 5px 0px;
}
-#gAlbumGrid .first {
- margin: 0px 0px 10px 0px;
+
+/* ~~~~~~~~~ search form ~~~~~~~~~~ */
+
+#gSearchForm {
+ position: absolute;
+ right: 13px;
+ top: 103px;
+}
+#gSearchForm input.text {
+ padding: 1px;
+}
+#gSearchForm input.submit {
+ height: 20px;
+}
+
+/* ~~~~~~~~~ comment form ~~~~~~~~~~ */
+
+ #gCommentAdd {
+ width: 500px;
}
-.gAlbum {
- background-color: #D4DAFF;
+/* ----------- upload ----------------- */
+
+#gUploadForm .gBreadcrumbs li input, #gUploadForm .gBreadcrumbs li select {
+ width: 140px;
+ margin-left: 5px;
}
-.gAlbum h2 {
- color: #000066;
+#gUploadForm-queue {
+ width: 500px;
+}
+#gUploadForm-queue td, #gUploadForm-queue th {
+ text-align: left;
+ border-color: #e7e7e7;
+}
+#gUploadForm-queue caption {
+ display: none;
+}
+#gUploadForm-queue thead th {
+ text-align: center;
+ border-bottom: 2px solid #000;
+}
+#gUploadForm-queue thead th, #gUploadForm-queue thead td {
+ background-color: #e7e7e7;
+}
+#gUploadForm-queue tfoot td {
+ border-top: 2px solid #000;
+}
+#gUploadForm-queue .filesize {
+ width: 60px;
+}
+#gUploadForm-queue td.filesize {
+ text-align: right;
+}
+#gUploadForm-queue tfoot td.filesize {
+ color: #ccc;
+}
+#gUploadForm-queue .action {
+ width: 40px;
+}
+#gUploadForm-button {
+ width: 130px;
+ margin-left: 370px;
+}
+
+/**
+ ** *******************************************************************
+ * 5) Navigation and menus (menus, breadcrumbs, pagination, tab cloud)
+ ** *******************************************************************
+ */
+
+/* ~~~~~~~~ login menu ~~~~~~~~ */
+
+#gLoginMenu {
+ position: absolute;
+ top: 0;
+ right: 13px;
+ border: 1px solid silver;
+ border-width: 0 1px 1px 1px;
+ padding: 5px;
+ text-align: right;
+}
+#gLoginMenu form {
+ margin-top: 5px;
+}
+#gLoginMenu label {
+ font-size: 0.8em;
+}
+#gLoginMenu input.text,
+#gLoginMenu input.password {
+ width: 80px;
+ padding: 0 0 .1em 0;
+}
+#gLoginMenu input.submit {
+ font-size: 0.9em;
+ font-weight: bold;
+}
+
+/* ~~~~~~~~ site menu ~~~~~~~~ */
+
+#gSiteMenu {
+ height: 31px;
+ margin: 0;
+ padding: 0;
+ list-style-type: none;
+ clear: both;
+}
+#gSiteMenu li {
+ list-style-type: none;
+ float: left;
+ display: block;
+ width: 20%;
+ background: #E6EBF0;
+}
+#gSiteMenu li a {
+ color: #003366;
+ font-weight: bold;
+ height: 20px;
+ display: block;
+ text-align: center;
+ padding: 7px 7px 3px 7px;
+ background: url('images/bg_sitemenu.png') repeat-x;
+ margin-left: 1px;
+ border: 1px solid #336699;
+ border-width: 0 1px 1px 0;
+ text-decoration: none;
+ letter-spacing: .1em;
+}
+#gSiteMenu li a:hover {
+ color: #FF3300;
+ background: url('images/bg_sitemenu_hover.png');
+}
+#gSiteMenu li a.active {
+ background: #DCE6EF;
+ border-color: #DCE6EF;
+ color: #FF3300;
}
-.gItemContainer h2,
-.gAlbumContainer h2 {
- margin: 5px 0px 5px 0px;
+ #gSlideshowLink {
+ position: absolute;
+ top: 0;
+ right: 0;
}
+/* ~~~~~~~~~ breadcrumbs ~~~~~~~~~~ */
+
+#gBreadcrumbs {
+ border-bottom: 1px solid silver;
+ margin: 0;
+ padding: 0 0 0 14px;
+ height: 28px;
+ list-style-type: none;
+}
+#gBreadcrumbs li {
+ list-style-type: none;
+ background: transparent url(images/icon_breadcrumb_separator.gif) no-repeat scroll left center;
+ padding: 0 0 0 10px;
+ float: left;
+}
+#gBreadcrumbs li.root {
+ background: transparent;
+ padding: 0;
+}
+#gBreadcrumbs li a,
+#gBreadcrumbs li span {
+ padding: 6px 6px 6px 6px;
+ display: block;
+}
+#gBreadcrumbs li.active span {
+ font-weight: bold;
+}
/* ~~~~~~~~~ tag cloud ~~~~~~~~~~ */
#gTags ul {
- text-align: justify;
- padding: 0;
+ text-align: justify;
+ padding: 0;
}
#gTags ul li {
- text-align: justify;
- display: inline;
+ text-align: justify;
+ display: inline;
}
#gTags ul li a {
- text-decoration: none;
+ text-decoration: none;
}
#gTags ul li a.size0 {
- font-size: 100%;
- font-weight: 100;
- color: #99CCFF;
+ font-size: 100%;
+ font-weight: 100;
+ color: #99CCFF;
}
#gTags ul li a.size1 {
- font-size: 110%;
- font-weight: 300;
- color: #6699FF;
+ font-size: 110%;
+ font-weight: 300;
+ color: #6699FF;
}
#gTags ul li a.size2 {
- font-size: 120%;
- font-weight: 500;
- color: #6699CC;
+ font-size: 120%;
+ font-weight: 500;
+ color: #6699CC;
}
#gTags ul li a.size3 {
- font-size: 130%;
- font-weight: 700;
- color: #336699;
+ font-size: 130%;
+ font-weight: 700;
+ color: #336699;
}
#gTags ul li a.size4 {
- font-size: 140%;
- font-weight: 900;
- color: #0E2B52;
+ font-size: 140%;
+ font-weight: 900;
+ color: #0E2B52;
}
#gTags ul li a:hover {
- color: #FF3300;
- text-decoration: underline;
+ color: #FF3300;
+ text-decoration: underline;
}
#gTags form {
- margin-top: 10px;
+ margin-top: 10px;
}
/* ~~~~~~~~~ tags ~~~~~~~~~~ */
#gTags ul {
- margin-left: .5em;
+ margin-left: .5em;
}
#gTags li {
- list-style-image: url('images/bullet_tag.png');
- margin-bottom: .3em;
+ list-style-image: url('images/bullet_tag.png');
+ margin-bottom: .3em;
}
-/* ~~~~~~~~~ album tree ~~~~~~~~~~ */
-
-#gAlbumTree {
- border: 1px solid lightgray;
- margin: 20px 0 20px 0;
- padding: 5px;
-}
-#gAlbumTree #gTreeContainer {
- border: 1px solid lightgray;
- padding: 0 0 0 5px;
-}
-
-
-/**
- ** **************************************************
- * 6) Navigation and menus
- ** **************************************************
- */
-
-
-
/* ~~~~~~~~~ pagination ~~~~~~~~~~ */
#gPagination {
- clear: both;
- padding: 10px 0px 0px 0px;
- text-align: center;
+ clear: both;
+ padding: 10px 0 0 0;
+ text-align: center;
}
#gPagination a,
#gPagination span {
- border: 1px solid lightgray;
- padding: 5px;
- background-repeat: no-repeat;
+ border: 1px solid lightgray;
+ padding: 5px;
+ background-repeat: no-repeat;
}
#gPagination a:hover {
- background-color: #F3F3F3;
+ background-color: #F3F3F3;
}
#gPagination .first {
- background-image: url('images/first.png');
- background-position: left;
- padding-left: 20px;
+ background-image: url('images/first.png');
+ background-position: left;
+ padding-left: 20px;
}
#gPagination .first_inactive {
- background-image: url('images/first_inactive.png');
- background-position: left;
- padding-left: 20px;
+ background-image: url('images/first_inactive.png');
+ background-position: left;
+ padding-left: 20px;
}
#gPagination .previous {
- background-image: url('images/previous.png');
- background-position: left;
- padding-left: 17px;
+ background-image: url('images/previous.png');
+ background-position: left;
+ padding-left: 17px;
}
#gPagination .previous_inactive {
- background-image: url('images/previous_inactive.png');
- background-position: left;
- padding-left: 17px;
+ background-image: url('images/previous_inactive.png');
+ background-position: left;
+ padding-left: 17px;
}
#gPagination .next {
- background-image: url('images/next.png');
- background-position: right;
- padding-right: 17px;
+ background-image: url('images/next.png');
+ background-position: right;
+ padding-right: 17px;
}
#gPagination .next_inactive {
- background-image: url('images/next_inactive.png');
- background-position: right;
- padding-right: 17px;
+ background-image: url('images/next_inactive.png');
+ background-position: right;
+ padding-right: 17px;
}
#gPagination .last {
- background-image: url('images/last.png');
- background-position: right;
- padding-right: 20px;
+ background-image: url('images/last.png');
+ background-position: right;
+ padding-right: 20px;
}
#gPagination .last_inactive {
- background-image: url('images/last_inactive.png');
- background-position: right;
- padding-right: 20px;
-}
-
-
-/**
- ** **************************************************
- * 7) Tables
- ** **************************************************
- */
-
-
-/**
- ** **************************************************
- * 8) Forms
- ** **************************************************
- */
-
-#gCommentAdd {
- width: 500px;
-}
-
-/* ----------- upload ----------------- */
-
-#gUploadForm .gBreadcrumbs li input, #gUploadForm .gBreadcrumbs li select {
- width: 140px;
- margin-left: 5px;
-}
-
-#gUploadForm-queue {
- width: 500px;
-}
-
-#gUploadForm-queue td, #gUploadForm-queue th {
- text-align: left;
- border-color: #e7e7e7;
+ background-image: url('images/last_inactive.png');
+ background-position: right;
+ padding-right: 20px;
}
-#gUploadForm-queue caption {
- display: none;
-}
+/* ~~~~~~~~~ album tree ~~~~~~~~~~ */
-#gUploadForm-queue thead th {
- text-align: center;
- border-bottom: 2px solid #000;
+#gAlbumTree {
+ border: 1px solid lightgray;
+ margin: 20px 0 20px 0;
+ padding: 5px;
}
-
-#gUploadForm-queue thead th, #gUploadForm-queue thead td {
- background-color: #e7e7e7;
+#gAlbumTree #gTreeContainer {
+ border: 1px solid lightgray;
+ padding: 0 0 0 5px;
}
-#gUploadForm-queue tfoot td {
- border-top: 2px solid #000;
-}
+/**
+ ** *******************************************************************
+ * 6) Specific text styles (different headings, font sizes, etc.)
+ ** *******************************************************************
+ */
-#gUploadForm-queue .filesize {
- width: 60px;
+#gHeader h1 {
+ float: left;
+ margin: 20px 0 0 20px;
}
-#gUploadForm-queue td.filesize {
- text-align: right;
-}
+/**
+ ** *******************************************************************
+ * 7) Generic styles
+ ** *******************************************************************
+ */
-#gUploadForm-queue tfoot td.filesize {
- color: #ccc;
+.buttonlink {
+ border: 1px solid lightgray;
+ padding: 5px;
}
-
-#gUploadForm-queue .action {
- width: 40px;
+.buttonlink:hover {
+ background-color: #F3F3F3;
}
-
-#gUploadForm-button {
- width: 130px;
- margin-left: 370px;
+.understate {
+ color: silver;
}
/**
- ** **************************************************
- * 9) Browser hacks
- ** **************************************************
+ ** *******************************************************************
+ * 8) Browser hacks
+ ** *******************************************************************
*/
/* Keep containers holding only floated elements from collapsing in Safari */
diff --git a/themes/default/views/album.html.php b/themes/default/views/album.html.php
index ba995276..0d181536 100644
--- a/themes/default/views/album.html.php
+++ b/themes/default/views/album.html.php
@@ -1,39 +1,32 @@
<? defined("SYSPATH") or die("No direct script access."); ?>
-<div id="gAlbumGrid" class="gAlbumView">
<div id="gAlbumGridHeader">
<h1><?= $item->title ?></h1>
<span class="understate"><?= $item->description ?></span>
<a href="#" id="gSlideshowLink" class="buttonlink">Slideshow</a>
</div>
+ <ul id="gAlbumGrid">
<? foreach ($children as $i => $child): ?>
- <? if ($child->is_album()): ?>
- <div class="gAlbumContainer gAlbum <?= text::alternate("first", "", "") ?>">
- <a href="<?= url::site("album/{$child->id}") ?>">
- <img id="photo-id-<?= $child->id ?>" class="photo"
- alt="photo" src="<?= $child->thumbnail_url() ?>"
- width="<?= $child->thumbnail_width ?>"
- height="<?= $child->thumbnail_height ?>" />
- </a>
- <h2>Album title</h2>
- <ul class="gMetadata">
- <li>Views: 321</li>
- <li>By: <a href="#">username</a></li>
- </ul>
- </div>
- <? else: ?>
- <div class="gItemContainer <?= text::alternate("first", "", "") ?>">
- <a href="<?= url::site("photo/{$child->id}") ?>">
- <img id="photo-id-<?= $child->id ?>" class="photo"
- alt="photo" src="<?= $child->thumbnail_url() ?>"
- width="<?= $child->thumbnail_width ?>"
- height="<?= $child->thumbnail_height ?>" />
- </a>
- <h2><?= $child->title ?></h2>
- </div>
- <? endif ?>
+ <? $album_class = ""; ?>
+ <? if ($child->is_album()): ?>
+ <? $album_class = "gAlbum "; ?>
+ <? endif ?>
+ <li class="gItem <?= $album_class . text::alternate("first", "", "") ?>">
+ <a href="<?= url::site("photo/{$child->id}") ?>">
+ <img id="gPhotoID-<?= $child->id ?>" class="gThumbnail"
+ alt="photo" src="<?= $child->thumbnail_url() ?>"
+ width="<?= $child->thumbnail_width ?>"
+ height="<?= $child->thumbnail_height ?>" />
+ </a>
+ <h2><?= $child->title ?></h2>
+ <ul class="gMetadata">
+ <li>Views: 321</li>
+ <li>By: <a href="#">username</a></li>
+ </ul>
+ </li>
<? endforeach ?>
-
+ </ul>
+
<div id="gPagination">
Items 1-10 of 34
<span class="first_inactive">first</span>
@@ -41,4 +34,3 @@
<a href="#" class="next">next</a>
<a href="#" class="last">last</a>
</div>
-</div>
diff --git a/themes/default/views/photo.html.php b/themes/default/views/photo.html.php
index 74e01050..9448b51e 100644
--- a/themes/default/views/photo.html.php
+++ b/themes/default/views/photo.html.php
@@ -3,53 +3,53 @@
<a href="" class="buttonlink">Full size (1024x768)</a>
<a href="" class="buttonlink">Slideshow</a>
- <img id="photo-id-<?= $item->id ?>" alt="photo" src="<?= $item->resize_url() ?>"
+ <img id="gPhotoID-<?= $item->id ?>" alt="photo" src="<?= $item->resize_url() ?>"
width="<?= $item->resize_width ?>"
height="<?= $item->resize_height ?>" />
<h1><?= $item->title ?></h1>
- <p><?= $item->description ?></p>
+ <div><?= $item->description ?></div>
+
+ <div id="gComments">
+ <h2>Comments</h2>
+
+ <ul id="gCommentThread">
+ <li id="gComment-1" class="gComment odd">
+ <p><a href="#" class="gAuthor">Andy</a> said 2 hours ago <span class="understate">(October 23, 2008 11:30am)</span></p>
+ <div>
+ Lorem ipsum dolor sit amet.
+ </div>
+ </li>
+ <li id="gComment-2" class="gComment even">
+ <p>
+ <a href="#" class="gAuthor">Other user</a> said 30 minutes ago <span class="understate">(October 23, 2008 1:00pm)</span>
+ </p>
+ <div>
+ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard
+ dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
+ It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It
+ was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
+ desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+ </div>
+ </li>
+ </ul>
+
+ <form id="gCommentAdd" class="gExpandedForm">
+ <fieldset>
+ <legend>Add comment</legend>
+ <div class="row">
+ <label for="gCommentAuthor">Your Name</label>
+ <input type="text" id="gCommentAuthor" class="text" />
+ </div>
+ <div>
+ <label for="gCommentEmail">Your Email (not displayed)</label>
+ <input type="text" id="gCommentEmail" class="text" />
+ </div>
+ <div class="row">
+ <label for="gCommentText">Comment</label>
+ <textarea id="gCommentText"></textarea>
+ </div>
+ <input type="submit" class="button" value="Add" />
+ </fieldset>
+ </form>
+ </div><!-- END #gComments -->
</div>
-
-<div id="gComments">
- <h2>Comments</h2>
-
- <ul id="gCommentThread">
- <li id="gComment-1" class="gComment odd">
- <p><a href="#" class="gAuthor">Andy</a> said 2 hours ago <span class="understate">(October 23, 2008 11:30am)</span></p>
- <div>
- Lorem ipsum dolor sit amet.
- </div>
- </li>
- <li id="gComment-2" class="gComment even">
- <p>
- <a href="#" class="gAuthor">Other user</a> said 30 minutes ago <span class="understate">(October 23, 2008 1:00pm)</span>
- </p>
- <div>
- Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard
- dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
- It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It
- was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
- desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
- </div>
- </li>
- </ul>
-
- <form id="gCommentAdd" class="gExpandedForm">
- <fieldset>
- <legend>Add comment</legend>
- <div class="row">
- <label for="gCommentAuthor">Your Name</label>
- <input type="text" id="gCommentAuthor" class="text" />
- </div>
- <div>
- <label for="gCommentEmail">Your Email (not displayed)</label>
- <input type="text" id="gCommentEmail" class="text" />
- </div>
- <div class="row">
- <label for="gCommentText">Comment</label>
- <textarea id="gCommentText"></textarea>
- </div>
- <input type="submit" class="button" value="Add" />
- </fieldset>
- </form>
-</div><!-- END #gComments -->
generated by cgit v1.2.3 (git 2.46.0) at 2025-10-18 14:16:07 +0000