Typo3 - CSS-Snippets

Aus Wikizone
Version vom 25. März 2011, 11:38 Uhr von 178.7.131.226 (Diskussion) (→‎CSS für TYPO3 Content)
(Unterschied) ← Nächstältere Version | Aktuelle Version (Unterschied) | Nächstjüngere Version → (Unterschied)
Wechseln zu: Navigation, Suche

CSS für TYPO3 Content Todo[Bearbeiten]

Ein komplettes Beispiel für das Styling der TYPO3 Inhaltselemente

w-manager[Bearbeiten]

Allgemeine Elementformatierungen[Bearbeiten]

/* Allgemeine Elementformatierungen /* * * * * * * * * * * * * * * * * * * * * * * * * * */

  • {

padding:0; margin:0; }

/* Taeusche NS und FF lange Seiten vor damit das Layout bei langen Seiten nicht wg. dem Scrollbalken huepft */ html {height:100%} body { 

 min-height:101%;
 /* verhindern dass positionierte Elemente bei Veraenderung der Fenstergroesse nicht mit verschoben werden */
 position: relative;

}

body { 

 color: #666;
 background: #FFF;
 font-family: Arial,Helvetica, sans-serif;
 font-size: 100.01%;
 padding: 12px 0 12px 0;
 text-align: center;

}


h1,h2,h3 { /* im Typo ueberschreiben */ 

 color:#222;
 font-size: 1.2em;
 line-height: 1em;
 padding-bottom: 0.4em;

}


h1{ 

 color:#364A87;

}

h2{ 

 font-size: 1em;
 font-weight: bold;

}

h3{ 

 font-size: 0.8em;

} p { line-height: 1.5; margin: 0.5em 0 1em 0; }

a { text-decoration: underline; }

a:link, a:visited { color: #666;}

/* In Typo3 mit gleicher Farbe wie H1 ueberschreiben*/ a:focus, a:hover, a:active { color: #364A87;}

table{width: 100%;} th, td {padding: 0;}

/* /* Anpassungen CSS-Styled Content /* * * * * * * * * * * * * * * * * * * * * * * * * * */ .csc-textpic-caption{ font-size:70%; color:#666; }


Allgemeine Klassen[Bearbeiten]

/* Allgemeine Klassen /* * * * * * * * * * * * * * * * * * * * * * * * * * */

.stopFloat { 

 display: block;
 float: none;
 clear: both;
 height: 1px;
 font-size: 0px;
 line-height: 0px;

}

Struktur[Bearbeiten]

/* Struktur /* * * * * * * * * * * * * * * * * * * * * * * * * * */

  1. wrapper {
 width: 950px;
 background: #FFF;
 margin: 0 auto;
 text-align: left;

}

  1. logo {
 width: 100%;
 line-height:0;
 background: #FFF;

}

  1. head {

height: 180px; width:100%; background-image: url(images/header-back.jpg); overflow: hidden; }

  1. head img{

/*Bild als internes style in Typo*/ }

Navigation[Bearbeiten]

/* Navigation /* * * * * * * * * * * * * * * * * * * * * * * * * * */

  1. menuHead{

background: #888; font-size: 0.75em; color: #FFF; background-image: url (images/navL1-back.gif) }

  1. menuHead-left{

float: left; width: 49%; }

  1. menuHead a {text-decoration: none; color: #FFF;}
  1. menuHead-right{

float: right; width: 49%; }

  1. menuHead-left li {

list-style: none; float:left; white-space: nowrap; padding:0 0em; }

  1. menuHead-right {

float-right; text-align:right; width: 49%; padding: 0 6px; }

  1. menuHead-right ul{

float:right; }

  1. menuHead-right li {

list-style: none; float:left; white-space: nowrap; padding: 0 6px; }


/* Menue Level1 /* * * * * * * * * * * * * * * * * * * * * * * * * * */ li.on a{ color: #364A87;}

div#menuL1{ float:left; width: 100%; background:url(images/navL1-back.gif) repeat-x; height:32px; /*margin-left:12px;*/ }

  1. menuL1 ul{

padding-left:4px; }

  1. menuL1 li{

float:left; list-style: none; white-space: nowrap; /*background: url(images/navL1-divider.gif) right no-repeat;*/ /*padding: 0 1.2em;*/ font-size: 0.8em; font-weight: bold; line-height: 32px; }

  1. menuL1 li.last {

background: transparent; }


  1. menuL1 a{

text-decoration: none; /*divider ausgleichen*/ padding-right:1px; }

/* Menue Level12 /* * * * * * * * * * * * * * * * * * * * * * * * * * */ li.on a{ color: #364A87;}

div#menuL12{ float:left; width: 100%; }

  1. menuL12 ul{

padding-left:4px; }

  1. menuL12 li{

float:left; list-style: none; white-space: nowrap; font-size: 0.7em; font-weight: bold; line-height: 0.7em; }

  1. menuL12 li.last {

background: transparent; }

  1. menuL12 a{

text-decoration: none; /*divider ausgleichen*/ padding-right:1px; }

/* Menue Level2 /* * * * * * * * * * * * * * * * * * * * * * * * * * */ div#menuL2 { min-height: 261px; }

  • html #menuL2{

height: 261px; }


div#menuL2 { float:left; width: 180px; margin: 1.6em 0 0 0; background: url(images/dot-border.gif) right no-repeat; }

  1. menuL2 ul, div#osBox-right ul{

list-style: none; text-align: right; }

  1. menuL2 li{

padding: 0.4em 0px 0.25em 0; /* Abstand von rechter Begrenzung */ margin-right: 3px;

/*border-bottom: 1px dotted #CCC;*/ }

  1. menuL2 a{

text-decoration: none; font-weight: bold; font-size: 0.75em; padding: 0 1.5em 0 0; }

  1. menuL2 li li a{
 font-weight: bold;
 font-size: 0.6em;
 color: #555;

}

  1. menuL2 li li{
 margin:0;
 padding:0;

}

Content[Bearbeiten]

/* Content /* * * * * * * * * * * * * * * * * * * * * * * * * * */

  1. sub{

float:left; width: 690px;

}

  1. content {
 float:right;
 width: 510px;
 padding: 1.6em 0 0 0;
 min-height:380px;

}

  • html #content{

height: 380px; } /*das sehen nur IEs <= 6*/


  1. content h1, #content h2, #content h3{

padding-left: 12px;

}

  1. content p, #content li {
 font-size: 80%;
 line-height: 150%;
 padding-left:12px;

}

  1. content li{

list-style-position: inside; }

  1. content a:link { color: #364A87 ; text-decoration: none;}
  2. content a:visited { color: #364A87 ; text-decoration: none;}

/* In Typo3 mit gleicher Farbe wie H1 ueberschreiben*/

  1. content a:focus, #content a:hover, #content a:active { color: #364A87 ; text-decoration: underline;}


.nachoben { text-align: right; }


/* Spalte 3 /* * * * * * * * * * * * * * * * * * * * * * * * * * */

  1. content_right {
 float: right;
 width: 240px;

 padding: 1.6em 0 0 0;

}


  1. content_right h1 {
 color: #364A87 ;
 font-size: 1em;
 line-height: 150%;
 margin: 0 0px;

}


  1. content_right p {
 font-size: 80%;
 line-height: 150%;
 margin: 0 0

}

/* Footer /* * * * * * * * * * * * * * * * * * * * * * * * * * */

  1. footer {

background: #888; font-size: 0.75em; text-align:center; color: #FFF; /*background-image: url (images/headnavi-back.jpg*/ }

Formular[Bearbeiten]

/* Formular /* * * * * * * * * * * * * * * * * * * * * * * * * * */ .csc-mailform-submit{ color: #999; font-weight:bold; font-size: 74%; }

  1. mailform .csc-mailform-check{

text-align:left; width:20px; background:#123; border:4px solid black; }

  1. content #mailform{

width:481px; margin-left:0px; }

  1. content_right #mailform{

width: 240px; }

  1. mailform fieldset{

border:none; padding-bottom:20px; }

  1. content #mailform label {
 clear:both;
 float: left;
 width: 130px;
 text-align: right;

}

  1. mailform form p {
 font-size: .8em;
 margin: 14px 0;

}

  1. mailform label {
 display: block; /* damit auch die alten IEs das padding anwenden */
 font-size: .7em;
 font-weight: bold;
 text-transform: uppercase;
 margin-right: 10px;

}


/* Achtung: nicht alle Browser stellen Sachen wie die border von Eingabefeldern dar, in Safari z.B. laesst sich nur wenig am Aussehen von Formularelementen aendern */ 

input,textarea {
 background: #F7F7F7;
 font-family: arial, sans-serif;
 font-size: 0.8em;
 color: #333;
 border: 1px solid #CCC;
 margin-bottom:0.3em;

}

  1. content #mailform input,
  2. content #mailform textarea {
 width: 20em;

}


  1. content #mailform input.csc-mailform-submit{
 width:8em;
 margin-left:140px;

}

  1. content_right #mailform input.csc-mailform-submit{

width:8em; margin-left: 0px;

} /* Die folgenden Anweisungen sorgen fuer schoene Effekte beim Ausfuellen in standardkonformen Browsern, die IEs koennen damit aber nix anfangen */

input:hover, textarea:hover { 

 background: #FCFCFC;
 border: 1px solid #999;

}

input:focus, textarea:focus { 

 background: #FFF;
 border: 1px solid #CC0000;

}

.on a{ color: #222;}

div .csc-textpic-imagewrap{ margin-left:12px; }

RTE Tabellen[Bearbeiten]

/* RTE / table styling */ table{ font-size:90%; } table td{padding-left: 12px;} table.contenttable { border: 1px #113388 dotted; margin: 10px 0px 10px 12px; width: 100%; } table.contenttable TR td { padding: 0px 3px 0px 3px; } table.contenttable TR td p.bodytext { font-size: 10px; } table.contenttable TR { background-color: #EBEEF5; }

Umfrage (quickpoll)[Bearbeiten]

/* Umfrage */ .tx-quickpoll-pi1{ 

width: 230px;

} .tx-quickpoll-pi1 table{ font-size: 74%; margin: 0 0; }

.tx-quickpoll-pi1 td{ text-align: left; }

.tx-quickpoll-pi1 table h2{ padding-left:0; text-align: left; }

input .pollanswer{ width: 10px; background: pink; } input.pollsubmit{ width: 4em; font-size:100%; font-weight: bold; color:#888; }

/* POLL */ /* default styles for extension "tx_quickpoll" */ .tx-quickpoll-pi1 .pollbar { BACKGROUND: url(/typo3conf/ext/quickpoll/pi1/pollbar.gif) repeat-x left center;} .tx-quickPoll-pi1 .polltable{width: 100%;} .tx-quickPoll-pi1 h2 {font-size:100%;} .tx-quickPoll-pi1 th { /* make it solid */ text-transform:uppercase; margin-bottom:1em; /* indent from left */ padding-left:0px;} .tx-quickPoll-pi1 td { padding-left:0;} .tx-quickPoll-pi1 .pollquestion { padding-bottom: 0.5em;} .tx-quickPoll-pi1 .pollanswer { vertical-align: -20%;border: none;} .tx-quickPoll-pi1 .polltotal { text-align:center;padding-top: 0.50em;} .tx-quickPoll-pi1 .pollresulttext { padding-top: 0.5em;}

Login[Bearbeiten]

/*** Login ***/

  1. loginBox{

width: 240px; float: right; margin-top: 40px; }

  1. loginBox p{

font-size: 80%; font-weight:bold color: #999; margin: 0; padding: 0; }

  1. loginBox .csc-form-fieldcell{

font-size: 50% color: #999; }


Search Box (indexedsearch)[Bearbeiten]

  1. searchBox input{
 width: 130px;

}

  1. searchBox input.searchBox-button{

position: relative; border: none; width: auto; top: 2px; } div.tx-indexedsearch-whatis{ padding-left: 12px; }

  1. logos{

width:230px; text-align: center; padding-top: 20px; }

Umfrage (pbsurvey)[Bearbeiten]

siehe Typo3 - Extensions

Abgerufen von „https://wiki.stephanschlegel.de/index.php?title=Typo3_-_CSS-Snippets&oldid=18650“