Fixed some items in Web_Visually.css. Added Download, EventsList, EventDetail, and Repository sections to Ash. Removed the things that I was trying to do with the Horizontal or Vertical placement of the alphabet navigation. Getting to be too big for me at this point. I feel like a little guppie out in the ocean.

svn: r13311
This commit is contained in:
Rob G. Healey
2009-10-06 08:20:21 +00:00
parent b484a2b5fd
commit 73cbf10ce3
5 changed files with 356 additions and 500 deletions

View File

@@ -1,84 +0,0 @@
/*
**************************************************************************************************
Copyright Holder and License
**************************************************************************************************
GRAMPS Cascading Style Sheet
Style Name: Web_Alphabet-Horizontal.css
**************************************************************************************************
This website was created with GRAMPS
http://www.gramps-project.org
--------------------------------------------------------------------------------------------------
GRAMPS is a Free Software Project for Genealogy, offering a professional genealogy program,
and a wiki open to all. It is a community project, created, developed and governed by genealogists.
Go to http://gramps-project.org to learn more!
--------------------------------------------------------------------------------------------------
Copyright (C) 2009 Rob G. Healey <robhealey1@gmail.com>
This file is part of the GRAMPS program.
GRAMPS is free software: you can redistribute it and/or modify it under the terms of the GNU General
Public License as published by the Free Software Foundation, version 2 of the License.
GRAMPS is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY;
without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
See the GNU General Public License for more details.
You should have received a copy of the GNU General Public License along with GRAMPS. If not,
see <http://www.gnu.org/licenses/>.
--------------------------------------------------------------------------------------------------
# $Id: $
Header
----------------------------------------------------- */
div#header {
position: fixed;
top: 0px;
left: 0px;
overflow: auto;
width: 100%;
margin: 0;
}
/* NarrativeWeb Navigation
--------------------------------------------------------------------------------------- */
body#NarrativeWeb div#navigation {
position: fixed;
left: 0px;
width: 100%;
}
/* Alphabet Navigation
----------------------------------------------------- */
div#alphabet {
position: fixed;
top: 130px;
left: 0px;
width: 100%;
margin: 0;
}
div#alphabet ul {
list-style:none;
min-width:770px;
height:24px;
margin:0;
padding: 0px 0px 0px 16px;
border-width: 2px 0px 4px 0px;
border-style: solid;
}
div#alphabet ul li:after {
content:" |";
}
div#alphabet ul li {
margin:0;
float:left;
}
div#alphabet ul li a {
display:block;
padding: 4px 8px 4px 8px;
float:left;
font:bold 16px/100% sans;
margin:0;
text-decoration:none;
}

View File

@@ -1,81 +0,0 @@
/*
**************************************************************************************************
Copyright Holder and License
**************************************************************************************************
GRAMPS Cascading Style Sheet
Style Name: Web_Alphabet-Vertical.css
**************************************************************************************************
This website was created with GRAMPS
http://www.gramps-project.org
--------------------------------------------------------------------------------------------------
GRAMPS is a Free Software Project for Genealogy, offering a professional genealogy program,
and a wiki open to all. It is a community project, created, developed and governed by genealogists.
Go to http://gramps-project.org to learn more!
--------------------------------------------------------------------------------------------------
Copyright (C) 2009 Rob G. Healey <robhealey1@gmail.com>
This file is part of the GRAMPS program.
GRAMPS is free software: you can redistribute it and/or modify it under the terms of the GNU General
Public License as published by the Free Software Foundation, version 2 of the License.
GRAMPS is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY;
without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
See the GNU General Public License for more details.
You should have received a copy of the GNU General Public License along with GRAMPS. If not,
see <http://www.gnu.org/licenses/>.
--------------------------------------------------------------------------------------------------
# $Id: $
Header
----------------------------------------------------- */
#header {
position: fixed;
top: 0px;
left: 0px;
overflow: auto;
width: 100%;
}
/* Alphabet Navigation
----------------------------------------------------- */
div#alphabet {
position: fixed;
left: 4px;
width: 40px;
height: 326px;
overflow-x: auto;
border-width: 2px 4px 2px 4px;
border-style: solid;
}
div#alphabet ul {
display: inline;
list-style: none;
padding: 0px 9px 0px 9px;
margin: 0;
}
div#alphabet ul li {
font: bold 14px/100% sans;
padding: 10px 10px 10px 0px;
margin:0;
float: left;
border-width: 0px 0px 2px 0px;
border-style: solid;
}
div#alphabet ul li:first-child {
border-top: 0;
}
div#alphabet ul li:last-child {
border-bottom: 0;
}
div#alphabet ul li a {
text-decoration: none;
display: block;
padding: 10px 0px 6px 10px;
}
div#alphabet ul li a:hover {
background-color: #C1B398;
}

View File

@@ -45,19 +45,19 @@ gray very light #EEE
white #FFF
--------------------------------------------------------------------------------------------------
# $Id$
# $Id $
NarrativeWeb Styles
--------------------------------------------------------------------------------------------- */
body#NarrativeWeb {
padding-top: 90px;
------------------------------------------------------------------------------------------------ */
/* General Elements
----------------------------------------------------- */
body {
font-family:sans-serif;
color:#000;
margin:0;
background-color:#FFF;
}
/* General Elements
----------------------------------------------------- */
div {
margin:0;
padding:0;
@@ -70,6 +70,7 @@ img {
background:none;
}
.content {
padding-top: 1cm;
background-color:#FFF;
}
.content div.snapshot {
@@ -160,45 +161,82 @@ a:visited {
/* Header
----------------------------------------------------- */
#header {
div#header {
padding:15px 15px 2px 15px;
margin:0;
background-color:#EEE;
}
#SiteTitle {
margin:0;
padding:.5em 0 0.5em 10px;
font-size: 40px;
color: #FFF;
font-style: italic;
color:#333;
margin:0 0 3px 0;
}
#header p {
div#header p {
font-size:1em;
font-weight:bold;
color:#999;
margin:0;
}
/* Alphabet Navigation bar
/* Footer
----------------------------------------------------- */
#alphabet {
position: fixed;
top: 136px;
background-color: #EEE;
border-color: #000;
div#footer {
height: 60px;
clear:both;
width:100%;
font-size:12px;
line-height:130%;
color:#333;
margin:0;
padding:15px 0 0 0;
background-color:#CCC;
border-top:solid 1px #333;
}
div#footer a, div#footer a:visited {
text-decoration:none;
color:#333;
}
div#footer a:hover {
text-decoration:underline;
}
div#footer img {
border:0;
margin:0 auto;
vertical-align:middle;
}
div#footer p#createdate {
float:left;
width:40%;
text-align:left;
margin-left:10px;
}
div#footer p#copyright {
float:right;
width:40%;
text-align:right;
margin-right:10px;
}
div#footer p#copyright img {
margin-right:10px;
}
#user_footer {
width:70%;
float:left;
margin:1em;
}
#user_footer p {
font:normal 1em/1.2em serif;
margin:0;
padding:0;
}
/* Navigation
----------------------------------------------------- */
#navigation, #subnavigation {
div#navigation, div#subnavigation {
margin:0;
padding:4px 0 0 0;
background-color:#EEE;
}
body#NarrativeWeb #navigation {
position: fixed;
top: 104px;
left: 0px;
}
#navigation ul, #subnavigation ul {
div#navigation ul, div#subnavigation ul {
list-style:none;
min-width:770px;
height:22px;
@@ -206,12 +244,12 @@ body#NarrativeWeb #navigation {
padding:0 0 0 12px;
border-bottom:1px solid #999;
}
#navigation ul li, #subnavigation ul li {
div#navigation ul li, div#subnavigation ul li {
margin:0;
padding:0;
float:left;
}
#navigation ul li a, #subnavigation ul li a {
div#navigation ul li a, div#subnavigation ul li a {
display:block;
font-size:12px;
line-height:100%;
@@ -221,11 +259,11 @@ body#NarrativeWeb #navigation {
padding:5px 5px;
background-color:#EEE;
}
#navigation ul li a:hover, #subnavigation ul li a:hover {
div#navigation ul li a:hover, div#subnavigation ul li a:hover {
background-color:#CCC;
border-bottom:solid 1px #000;
}
#navigation ul li.CurrentSection a, #subnavigation ul li.CurrentSection a {
div#navigation ul li.CurrentSection a, div#subnavigation ul li.CurrentSection a {
padding-bottom:4px;
border-top:solid 1px #999;
border-right:solid 1px #999;
@@ -233,14 +271,51 @@ body#NarrativeWeb #navigation {
border-bottom:solid 1px #FFF;
background-color:#FFF;
}
#navigation ul li.CurrentSection a:hover {
div#navigation ul li.CurrentSection a:hover {
background-color:#FFF;
border-bottom: solid 1px #000;
}
#subnavigation ul li.CurrentSection a {
div#subnavigation ul li.CurrentSection a {
border-width:0 0 1px 0;
}
/* Alphabet Navigation Bar
----------------------------------------------------- */
div#alphabet {
width: 100%;
margin: 0;
background-color: #EEE;
}
div#alphabet ul {
list-style:none;
min-width:770px;
height:24px;
margin:0;
padding: 0px 0px 0px 16px;
border-width: 2px 0px 4px 0px;
border-style: solid;
border-color: #000;
}
div#alphabet ul li:after {
content:" |";
}
div#alphabet ul li {
margin:0;
float:left;
}
div#alphabet ul li a {
display:block;
padding: 4px 8px 4px 8px;
float:left;
font:bold 16px/100% sans;
margin:0;
text-decoration:none;
color: #000;
}
div#alphabet ul li a:hover {
background-color: #000;
color: #FFF;
}
/* Main Table
----------------------------------------------------- */
table {
@@ -411,23 +486,10 @@ table.individuallist tbody tr td.ColumnName a {
table.individuallist tbody tr td.ColumnName a:hover {
background-color:#CCC;
}
#Individuals div table.infolist tr td p {
#IndividualDetail div table.infolist tr td, #Individuals div table.infolist tr td p {
vertical-align:top;
}
#Individuals div table.infolist tr td p a {
display:inline;
}
/* IndividualDetail
------------------------------------------------------ */
#IndividualDetail {
background-color:#EEE;
}
#IndividualDetail div table.infolist tr td {
font:normal .9em/1.2em sans-serif;
vertical-align:top;
}
#IndividualDetail div table.infolist tr td a {
#IndividualDetail div table.infolist tr td a, #Individuals div table.infolist tr td p a {
display:inline;
}
#IndividualDetail table.infolist tr td a:hover {
@@ -435,10 +497,8 @@ table.individuallist tbody tr td.ColumnName a:hover {
}
#IndividualDetail table.infolist tbody tr td.ColumnAttribute {
width:10%;
color:#696969;
}
#IndividualDetail div.subsection table tr td:first-child {
padding-left:20px;
color:#999;
padding-left:5px;
}
/* Sources
@@ -465,6 +525,72 @@ table.individuallist tbody tr td.ColumnName a:hover {
padding:.1em 10px .3em 10px;
}
/* EventList and EventDetail
----------------------------------------------------- */
div#EventList, div#EventDetail { }
div#events table.eventlist {
margin-top: .3cm;
}
table.eventlist tbody tr.BeginName {
border-bottom: solid 1px #000;
}
table.eventlist tbody tr td {
background-color: #CCC;
padding: 4px 0px 4px 0px;
border-bottom: dashed 1px #000;
}
table.eventlist tbody tr td.ColumnEvent {
background-color: #FFF;
width: 20%;
}
table.eventlist tbody tr td.ColumnDate {
width: 16%;
}
table.eventlist tbody tr td.ColumnPlace {
background-color: #FFF;
width: 35%;
}
table.eventlist tbody tr td.ColumnSources {
background-color: #FFF;
width: 12%;
}
table.eventlist tbody tr td.ColumnNotes {
width: 25%;
}
table.eventlist tbody tr td.ColumnPerson {
background-color: #FFF;
width: 35%;
}
table.eventlist tbody tr td.ColumnPartner {
background-color: #FFF;
width: 35%;
}
div#EventList table.eventlist tbody tr td.ColumnEvent a,
div#EventList table.eventlist tbody tr td.ColumnPerson a,
div#EventList table.eventlist tbody tr td.ColumnPartner a {
display: block;
padding: .9em 10px;
}
div#EventDetail h3 {
font-size: xxx-large;
}
div#EventDetail table.eventlist {
margin: .5cm 0 .3cm 1.5cm;
width: 800px;
}
div#EventDetail table.eventlist tbody tr td.ColumnAttribute {
border-top: solid 1px #000;
font-weight: bold;
text-transform: uppercase;
width: 20%;
}
div#EventDetail table.eventlist tbody tr td.ColumnEvent {
background-color: #000;
border-top: solid 1px #000;
}
/* Gallery
----------------------------------------------------- */
#Gallery table.infolist tbody tr td.ColumnRowLabel, #Gallery table.infolist tbody tr td.ColumnDate {
@@ -542,6 +668,53 @@ table.individuallist tbody tr td.ColumnName a:hover {
border-color:#CCC;
}
/* Download
----------------------------------------------------- */
#Download {
margin: 0;
padding: .5em 0 .5em 0;
}
table.download {
padding: 0;
margin: .5em 0 .5em 0;
border: solid 1px #000;
width: 100%;
nackground-color: #CCC;
}
table.download img {
float:center;
}
table.download tbody tr#Row02 {
border-bottom:solid 1px #000;
}
table.download tbody tr td {
border-style:solid;
border-color: #000;
border-width: 0px 2px 2px 2px;
text-align:left;
}
table.download td.ColumnFilename {
width:30%;
background-color: #FFF;
}
table.download td.ColumnFilename a {
display:block;
padding:10px;
font-weight:bold;
font-style: italic;
text-decoration:none;
}
table.download td.ColumnDescription {
width:45%;
}
table.download td.ColumnLicense {
width:6%;
}
table.download td.ColumnModified {
width:17%;
}
/* Contact
----------------------------------------------------- */
#Contact #summaryarea {
@@ -587,61 +760,30 @@ table.individuallist tbody tr td.ColumnName a:hover {
text-decoration:underline;
}
/* Download
----------------------------------------------------- */
#Download {
padding:1cm;
height:396px;
/* Repositories
------------------------------------------------------ */
div#RepositoryList { }
div#RepositoryList table.repolist tbody tr td {
background-color: #CCC;
}
table.download {
border:solid 2px #000;
width:100%;
div#RepositoryList table.repolist tbody tr td a {
display: block;
padding: .3em 10px;
}
table.download img {
float:center;
div#RepositoryList table.repolist tbody tr td.ColumnRowLabel {
width: 9%;
}
table.download thead tr th {
text-align:center;
border:solid 2px #000;
color: #000;
text-transform:uppercase;
div#RepositoryList table.repolist tbody tr td.ColumnType {
width: 15%;
}
table.download tbody tr#Row02 {
border-bottom:solid 2px #000;
}
table.download thead tr th, table.download tbody tr td {
padding-left:10px;
padding-top:20px;
border-style:solid;
border-color:#000;
border-width:0 2px 2px 2px;
text-align:left;
}
table.download td.Description {
width: 50%;
}
table.download td.License {
width:8%;
}
table.download td.Filename {
width:30%;
}
table.download td.Filename a {
font-weight:bold;
font-style: italic;
text-decoration:none;
}
table.download td.Filename a:hover {
text-decoration:underline;
}
table.download td.Modified {
width:12%;
font-weight:bold;
div#RepositoryList table.repolist tbody tr td.ColumnName {
background-color: #FFF;
}
/* Subsections
----------------------------------------------------- */
#Home, #Introduction, #Contact {
#Home, #Introduction, #Contact {
padding:1.5em 0 3em 0;
}
#Home p, #Introduction p, #Contact p {
@@ -1011,57 +1153,6 @@ div#sourcerefs ol li ol {
background-color:#EEE;
}
/* Footer
----------------------------------------------------- */
#footer {
clear:both;
width:100%;
font-size:12px;
line-height:130%;
color:#333;
margin:0;
padding:15px 0 0 0;
background-color:#CCC;
border-top:solid 1px #333;
}
#footer a, #footer a:visited {
text-decoration:none;
color:#333;
}
#footer a:hover {
text-decoration:underline;
}
#footer img {
border:0;
margin:0 auto;
vertical-align:middle;
}
#footer p#createdate {
float:left;
width:40%;
text-align:left;
margin-left:10px;
}
#footer p#copyright {
float:right;
width:40%;
text-align:right;
margin-right:10px;
}
#footer p#copyright img {
margin-right:10px;
}
#user_footer {
width:70%;
float:left;
margin:1em;
}
#user_footer p {
font:normal 1em/1.2em serif;
margin:0;
padding:0;
}
/* Calendar Styles
-------------------------------------------------------------------------------------------- */
/* Calendar : General */

View File

@@ -202,6 +202,7 @@ div#header {
background-color: #542;
border-bottom: solid 8px #5D835F;
height: 90px;
width: 100%;
}
#SiteTitle {
margin:0;
@@ -272,58 +273,28 @@ div#footer p#copyright img {
padding:0;
}
/* Alphabet Navigation Bar
----------------------------------------------------- */
div#alphabet {
background-color: #6AF364;
}
div#alphabet ul {
border-color: #000;
}
div#alphabet ul li {
border-color: #000;
}
div#alphabet ul li a {
color: #000;
}
div#alphabet ul li a:hover {
background-color: #000;
color: #FFF;
}
/* Navigation
----------------------------------------------------- */
div#navigation, div#subnavigation {
width: 100%;
}
body#NarrativeWeb_Horizontal div#navigation {
position: fixed;
top: 104px;
left: 0px;
}
body#NarrativeWeb_Vertical div#navigation {
position: fixed;
top: 104px;
left: 4px;
}
div#navigation ul, div#subnavigation ul {
list-style:none;
min-width:770px;
height:32px;
height: 42px;
margin:0;
padding: 0px 0px 0px 20px;
border-bottom: solid 2px #5D835F;
}
div#navigation ul li, div#subnavigation ul li {
margin:0;
float:left;
}
body#WebCal divdiv#navigation ul li a {
color: #FFF;
}
div#navigation ul li a, div#subnavigation ul li a {
padding: 6px 10px 8px 1px;
display:block;
display: block;
padding: 12px 10px 14px 1px;
float:left;
font:normal 16px/100% serif;
color: #000;
@@ -331,16 +302,12 @@ div#navigation ul li a, div#subnavigation ul li a {
margin:0;
}
div#navigation ul li a:hover, div#subnavigation ul li a:hover {
margin-top: -6px;
padding: 11px 11px 12px 1px;
background-color: #C1B398;
color: #000;
}
div#navigation ul li.CurrentSection a, div#subnavigation ul li.CurrentSection a {
font-weight:bold;
font-style: italic;
margin-top:-6px;
padding: 11px 11px 12px 10px;
background-color: #CCC;
color: #000;
}
@@ -353,6 +320,44 @@ div#subnavigation ul li.CurrentSection a {
border-color: #FFF;
}
/* Alphabet Navigation
----------------------------------------------------- */
div#alphabet {
width: 100%;
margin: 0;
background-color: #6AF364;
}
div#alphabet ul {
list-style:none;
min-width:770px;
height:24px;
margin:0;
padding: 0px 0px 0px 16px;
border-width: 2px 0px 4px 0px;
border-style: solid;
border-color: #000;
}
div#alphabet ul li:after {
content:" |";
}
div#alphabet ul li {
margin:0;
float:left;
}
div#alphabet ul li a {
display:block;
padding: 4px 8px 4px 8px;
float:left;
font:bold 16px/100% sans;
margin:0;
text-decoration:none;
color: #000;
}
div#alphabet ul li a:hover {
background-color: #000;
color: #FFF;
}
/* Main Table
----------------------------------------------------- */
table.infolist {
@@ -789,56 +794,46 @@ table.exiflist tr td.ColumnValue {
/* Download
----------------------------------------------------- */
#Download {
div#Download {
margin: 0;
padding: .5em 0 .5em 0;
padding: 0px 0px .5em 0px;
}
table.download {
div#Download table.download {
padding: 0;
margin: .5em 0 .5em 0;
border: solid 1px #5D835F;
width: 100%;
nackground-color: #D8F3D6;
}
table.download img {
div#Download table.download img {
float:center;
}
table.download thead tr th {
background-color: #6AF364;
color: #000;
padding: 15px 0px 0px 20px;
border-style:solid;
border-color: #000;
border-width: 0px 2px 2px 2px;
text-align:left;
}
table.download tbody tr#Row02 {
div#Download table.download tbody tr#Row02 {
border-bottom:solid 2px #000;
}
table.download tbody tr td {
border-style:solid;
border-color: #000;
border-width:0 2px 2px 2px;
div#Download table.download tbody tr td {
border: solid 1px #000;
text-align:left;
}
table.download td.ColumnFilename {
div#Download table.download td.Filename {
width:30%;
background-color: #FFF;
}
table.download td.ColumnFilename a {
display:block;
padding:10px;
div#Download table.download td.Filename a {
display: block;
padding: 10px 10px 14px 6px;
font-weight:bold;
font-style: italic;
text-decoration:none;
}
table.download td.ColumnDescription {
div#Download table.download td.Description {
width:45%;
}
table.download td.ColumnLicense {
div#Download table.download td.License {
width:6%;
}
table.download td.ColumnModified {
div#Download table.download td.Modified {
width:17%;
}