Olen kirjoittanut oheisen CSS:n sisältöboksin alkuun. Pyrkimyksenä on, että tätä laajennetaan, kunnes sen voi pastettaa jokaisen sivun alkuun ja silti saada aikaiseksi asiallisen ulkoasun. En ole varma mitä kaikki aiempi CSS sivuilla on: onko se peräisin Ubuntu 2010 -teemasta, kyseisen teeman pohjana käytetystä teemasta vai ehkä vielä jostain muualtakin? Epäilen, että kaikista edellämainituista plus vielä vähän sieltä ja täältä.
Olen nyt siivonnut Esittely -sivun, ja toivon että prosessi helpottuu sivu sivulta, kunhan CSS:n laatu ja joustavuus paranee. Aika omituisia ongelmia on silti tullut vastaan, kun monet elementit perivät ominaisuuksia ties mistä päin teemaa.
EDIT 13.2. (03.14): Muutettu hieman tyylejä.
EDIT 12.2. (23.15): Lisätty .check-list ja Esittely-sivulla käytettävän karusellin tyylit.
EDIT 12.2. (03.10): CSS:ään tehty muutamia lisäyksiä. taulukoiden ja hr:n muotoilu, sekä uudet luokat grid-8 ja button.
<style type="text/css">
body, h1 {
font-weight: 300;
}
h1 {
color: #333;
text-align: center;
padding-bottom: 1.5em;
}
hr {
border: none;
border-bottom: 1px dotted #DFDCD9;
margin: 8px 0;
}
p.alaotsikko {
font-size: 20px; color: #333;
text-align: center;
}
/* Oheinen palstasysteemi käyttää 12-palstaista 960 gridiä: http://960.gs */
/* Hack, jolla saadaan teeman sisältöalueen leveys 940 pikseliksi. */
.node-page {
padding: 0;
}
/* Boksit */
.boksi {
padding: 8px;
margin: 16px 20px 16px 0;
float: left;
}
.boksi .boksi {
padding-left: 0;
}
.boksi h1 {
text-align: left;
}
.boksi h2 {
font-size: 24px !important;
color: #333 !important;
border: none !important;
line-height: 32px !important;
margin-bottom: 5px !important;
font-weight: 300 !important;
}
.boksi a.action {
font-size: 20px;
color: #DD4814;
margin-top: 1em;
}
.boksi .ingressi {
font-size: 16px;
line-height: 20px;
color: #333;"
}
.pyoristys {
-moz-box-shadow: 1px 1px 1px 1px #C2C2C2;
-webkit-box-shadow: 1px 1px 1px 1px #C2C2C2;
box-shadow: 1px 1px 1px 1px #C2C2C2;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
background-color: #FFF;
}
.harmaa {
background: rgb(247, 247, 247);
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.harmaa h2 {
border: none !important;
clear: both;
}
/* palstat */
.grid-2 {
width: 124px;
}
.grid-3 {
width: 204px;
}
.grid-4 {
width: 284px;
}
.grid-6 {
width: 444px;
}
.grid-8 {
width: 604px;
}
.grid-12 {
width: 922px;
margin-left: 0;
margin-right: 0;
}
.rivin-viimeinen {
clear: right;
margin-right: 0px;
}
.boksi img {
margin-right: 5px;
}
.button {
background: #DD4814 url('/sites/ubuntufi.dev.zeip.eu/files/btn-download-bg.png') no-repeat;
height: 40px;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
color: #fff;
text-align: center;
margin-top: 40px;
border: 0px;
text-shadow: 0 1px #333;
font-size: 20px;
padding: 12px 12px 12px 12px;
}
.button:hover {
background: #b83a0f url('/sites/ubuntufi.dev.zeip.eu/files/btn-download-hover-bg.png') no-repeat;
cursor: pointer;
text-shadow:0 1px #333333;
}
.button:active {
background: #962d0c url('/sites/ubuntufi.dev.zeip.eu/files/btn-download-active-bg.png') no-repeat;
color: #aea79f !important;
cursor: pointer;
text-shadow:0 1px #333333;
}
/* Palstoitettu lista */
ul.palsta-lista {
clear:both;
display: inline;
list-style-type: none;
padding: none;
margin: none;
}
.palsta-lista li {
padding: 8px 5px;
}
/* Oransseilla checkeillä varustettu lista */
.check-list {
padding: 0;
margin: 0;
}
.check-list li {
list-style: none outside none;
float: left;
padding: 10px 0px 10px 27px;
margin-left: 20px;
margin-right: 20px;
width: 219px;
border-bottom: 1px dotted rgb(223, 220, 217);
background: url("/sites/ubuntufi.dev.zeip.eu/files/feats-tick.gif") no-repeat scroll 0px 10px transparent;
}
/* Foorumin sisältö */
.rss_items {
list-style-type: none;
padding:0;
}
a.rss_item {
color: #DD4814;
font-weight: normal;
}
li.rss_item {
padding-bottom: 8px;
border-bottom: 1px dotted #AEA79F;
margin-bottom: 8px;
}
a.rss_item:after {
content:" ›"
}
.rss_date {
color: #AEA79F;
}
#mainos {
border-radius: 4px;
}
/* Taulukot */
td.otsikko {
background-color: #F15C22;
color: #FFF;
}
th {
background-color: #F6C4AB;
color: #333;
font-weight: normal;
vertical-align: top;
}
th.alt {
background-color: #F15C22;
}
td {
text-align: center;
background-color: #FFF;
}
table, tr, th, td {
border: 1px dotted #cccccc;
}
td, th {
padding: 4px 8px 4px 8px;
line-height: 16px;
}
td {
color: #333;
background-color: #FFF;
border: none;
width: 500px;
vertical-align: top;
text-align: left;
margin-top: 0px;
}
/* Karuselli */
div.bgcarousel{ /* CSS for main carousel container */
background: black url(ajaxload.gif) center center no-repeat; /* kuva, joka näytetään kun karusellia ladataan */
width: 904px; /* default dimensions of carousel */
height: 301px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-khtml-border-radius: 6px;
-moz-box-shadow: 0 2px 2px 0 #c2c2c2;
-webkit-box-shadow: 0 2px 2px 0 #c2c2c2;
box-shadow: 0 2px 2px 0 #c2c2c2;
}
img.navbutton{ /* CSS for the nav buttons */
margin:5px;
opacity:0.7;
}
div.slide{ /* CSS for each image's DIV container within main container */
background-color: black;
background-position: center center; /* center image within carousel */
background-repeat: no-repeat;
background-size: cover; /* CSS3 property to scale image within container? "cover" or "contain" */
color: black;
}
div.selectedslide{ /* CSS for currently selected slide */
}
div.slide div.desc{ /* DIV that contains the textual description inside .slide */
position: absolute;
color: #333;
left: 40px;
top: 80px;
width: 300px;
padding: 10px;
/* JOS kokee tarvetta, voi käyttää text-shadow: 0 -1px 1px #8a8a8a; (CSS3-tekstinvarjostus) */
z-index:5;
font-size: 16px;
background-color: white;
}
div.selectedslide div.desc{ /* CSS for currently selected slide's desc div */
}
div.slide div.desc span {
font-size: 24px;
color: #DD4814;
margin-bottom: 16px;
}
div.slide div.desc a{
color:yellow;
text-decoration:none;
}
</style>
