Hi zusammen. Habe mir gerade das YAML Demodesign in Typo3 4.0 installiert. Alles läuft eigentlich prima. Allerdings hat der Designer der YAML Seite scheinbar ein CSS zur grafischen Anpassung der Formularfelder und Buttons vorgenommen. Ich möchte das gerne wieder rückgängig machen, und einfach nur normale Formularfelder und Buttons anzeigen lassen. Wo kann ich das vorgeben oder was muss ich wo eintragen.
Formularfelder und Buttons anpassen!
wird wohl irgendwo was im CSS geben wie form, input, textarea drinnen, das raus und fertig
lg georg
Zunächst Danke für die schnelle Antwort.
Habe folgende Zeilen gelöscht:
input, textarea {
width: auto;
font: 1em Verdana, Arial, Helvetica, Sans-Serif;
border: 1px #ccc solid;
background: #fafafa;
padding: 3px;
color: #777;
}
input[type=text]:focus, textarea:focus {
background: #f0f0f0;
color: #333;
border-color: #666;
}
}
Leider verliert das komplette Design nun die Schrift etc. Die Felder werden immer noch nicht richtig dargestellt. Lediglich die Umrandung ist futsch. Ansonsten immer noch kein Fortschritt?
Ist evtl. noch was im Setup unter Typo etwas zu beachten?
Habe zum Beispiel die tx_formwidgets installiert. Aber Typo ignoriert diese momentan noch.
Habe zunächst wieder Rückgängig gemacht.
naja wenn du sowas hast
Bild: typo3.org/…/10000000000000DD00000080FA0A0558.png
dann ist die Extension schuld!
screenshots bzw noch besser eine url würde helfen
georg
Link zur Page/Formular: http://p18309.typo3server.info/index.php?id=5
weiß nicht wo das Problem ist, der Code von dir styled das Formular. pass es an wie du willst...
lg georg
übrigens!
Ehre wem Ehre gebührt!
YAML wird unter einer Creative Commons Lizenz veröffentlicht, welche die Nutzung sowohl im privaten Bereich, als auch für kommerzielle Zwecke gestattet.
Die einzige Bedingung für die kostenfreie Nutzung des YAML-Frameworks ist die Namensnennung des Autors/Rechtsinhabers bzw. eine Rückverlinkung zur YAML-Homepage an geeigneter Stelle (z.B.: Fußzeile der Website oder im Impressum).
Danke!
Der Hinweis zu Yaml folgt im Impressum.
Das schlimme ist ja, dass ich dass CSS nicht geschreiben habe, sondern YAML. Ich finde keine Zeile in welcher ich das Formular anpassen kann. Es gibt insgesamt 3 CSS Dateien, die sich mit dem Design beschäftigen. Base, Basemod und Content. Im content.css sollte eigentlich die Anpassung möglich sein. Ich finde jedoch nichts.
Hier mal der Code der CSS:
/* ######################################################################################################
** # "Yet Another Multicolum Layout" (c) by Dirk Jesse (http://www.highresolution.info/webdesign/yaml/) #
** ######################################################################################################
**
** YAML Version: 2.2
** Dateiversion: 23.02.06
** Datei : content.css
** Funktion : Formatierung der Inhalte (Texte, Grafiken, Links, Listen, Tabellen usw.)
**
*/
@media all
{
body { font-family: 'Trebuchet MS', Verdana, Helvetica, Arial, sans-serif; }
h1,h2,h3,h4 { font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; display:block; }
h1 {font-size: 1.1em; font-weight:bold; color: #336699; background:inherit; margin:0.4em 0 0.5em 0; border-bottom: 1px #ccc solid;}
h2 {font-size: 1.0em; font-weight:bold; color: #fff; background-color: #006699; margin:0.2em 0 0.5em 0; padding: 0.3em; }
h3 {font-size: 1.0em; font-weight:bold; color: #336699; margin:0.4em 0 0.3em 0;}
h4 {font-size: 1.0em; font-weight:bold; color: #888; margin:0.4em 0 0.3em 0; border-bottom: 1px #ccc solid;}
#teaser h1 {font-size: 1.2em; border: 0;}
#col1_content h1 {color: #222; }
#col1_content h3 { color: #222; border-bottom: 1px #ccc solid; }
#col2_content h3 { border-bottom: 1px #ccc solid; }
p,ul {line-height: 1.5em;}
p {line-height: 1.5em; margin: 0 0 1em 0; }
address {
font-style:normal;
line-height: 1.5em;
margin: 0 0 1em 0;
}
strong,b {font-weight: bold;}
em,i { font-style:italic; }
em.mono {
font-family: monospace;
font-style: normal;
padding:0 0.3em 0 0.3em;
background:#f0f0f4;
border: 1px #ccd solid;
}
em.file {
font-family: monospace;
font-style: normal;
padding:0 0 0 14px;
color: #000088;
background: transparent url('../img/icons/file.gif') no-repeat left;
}
em.directory {
font-family: monospace;
font-style: normal;
padding:0 0 0 15px;
color: #000088;
background: transparent url('../img/icons/dir.gif') no-repeat left;
}
code {
display: block;
margin: 0 0 1em 1em;
font-family: monospace;
font-size: 1em;
padding: 0.5em;
color: #000;
background: #f0f0f4;
border-left: 8px #ccd solid;
}
code.css {
background-image: url("../img/bg_css.gif");
background-repeat: no-repeat;
background-position: top right;
}
code.xhtml {
background-image: url("../img/bg_xhtml.gif");
background-repeat: no-repeat;
background-position: top right;
}
blockquote {
font-family: 'Trebuchet MS', Verdana, Helvetica, Arial, sans-serif;
color: #666;
background: transparent;
border: 0;
}
hr { color: #fff; background:transparent; margin: 0 0 0.5em 0; padding: 0 0 0.5em 0; border-bottom: 1px #eee solid; }
acronym, abbr {
letter-spacing: .07em;
border-bottom: 1px dashed #c00;
cursor: help;
}
.bluebox {
color:#000;
background: #f0f0f4; padding: 2px; border: 1px #ccd solid;
text-align: center;
padding: 4px 0 4px 0;
margin-bottom: 1em;
}
.bluebox p {
padding: 0px 8px 0 8px;
}
ul.linklist {
list-style-type: none;
}
ul.linklist li {margin:0;}
/* ######################################################################################################
** ### Bildpositionierung links- und rechtsbündig als Fließobjekte ######################################
** ######################################################################################################
*/
img.float_left {
float: left;
margin-right: 1em;
margin-bottom: 0.15em;
border:0;
}
img.float_right {
float: right;
margin-left: 1em;
margin-bottom: 0.15em;
border:0;
}
img.center {
text-align:center;
background: #fff;
padding: 4px;
border:1px #ddd solid;
}
/* ######################################################################################################
** ### Auszeichnung lokaler und Externer Links ##########################################################
** ######################################################################################################
*/
a, a em.file {color: #900; text-decoration:none;}
a:hover {background-color: #fee; text-decoration:underline;}
#topnav a { color: #fff; background:transparent; text-decoration:none; }
#topnav a:hover{ text-decoration:underline; background-color: transparent;}
a.dl_link {
display: block;
padding: 0;
margin: 0.5em auto 0 auto;
}
a.dl_link:hover { text-decoration: none; background-color: transparent;}
#footer a { color: #669; }
#footer a:hover {background-color: #eef; }
/*
#col3 a[href^="http:"], #col3 a[href^="https:"],
#col1 p a[href^="http:"], #col1 p a[href^="https:"],
#col2 p a[href^="http:"], #col2 p a[href^="https:"]
{
padding-left: 12px;
background-image: url('../img/icons/ext_link.gif');
background-repeat: no-repeat;
background-position: left;
}
*/
/* ######################################################################################################
** ### Formulare ########################################################################################
** ######################################################################################################
*/
input, textarea {
width: auto;
font: 1em Verdana, Arial, Helvetica, Sans-Serif;
border: 1px #ccc solid;
background: #fafafa;
padding: 3px;
color: #777;
}
input[type=text]:focus, textarea:focus {
background: #f0f0f0;
color: #333;
border-color: #666;
}
}
/*******************************************
* Styles für Typo3 (RTE)
********************************************/
p.csc-linkToTop {
text-align: right;
}
span.mono {
font-family: monospace;
font-style: normal;
padding:0 0.3em 0 0.3em;
background:#f0f0f4;
border: 1px #ccd solid;
}
span.file {
font-family: monospace;
font-style: normal;
padding:0 0 0 14px;
color: #000088;
background: transparent url('../img/icons/file.gif') no-repeat left;
}
span.directory {
font-family: monospace;
font-style: normal;
padding:0 0 0 15px;
color: #000088;
background: transparent url('../img/icons/dir.gif') no-repeat left;
}
span.tx-indexedsearch-sw, span.csc-sword, span.tx-indexedsearch-redMarkup {
font-family: monospace;
font-style: normal;
padding:0 0.3em 0 0.3em;
background:#ffff00;
border: 1px #ccd solid;
}
p.box {
display: block;
font-size: 1em;
color: #000;
padding: 0.5em;
background: #f0f0f4;
border-left: 8px #E0E7F5 solid;
}
p.code {
display: block;
margin: 0 0 1em 1em;
font-family: monospace;
font-size: 1em;
padding: 0.5em;
color: #000;
background: #f0f0f4;
border-left: 8px #E0E7F5 solid;
}
p.bluebox {
color:#000;
background: #f0f0f4; padding: 2px; border: 1px #ccd solid;
text-align: center;
padding: 4px 0 4px 0;
margin-bottom: 1em;
}
p.csc-form-label-req {
font-weight: bold;
}
p.csc-caption {
font-size: 0.9em;
background: #E0E7F5; padding: 2px;
}
unter Formulare, so wie du es vorher schon gefunden hattest :o
georg
O.K. Hab mir schon gedacht, dass ich hier die Einträge abändern muss.
Kannst du mir evtl. einen Tip oder Codeschnippsel geben, der mir den Buttom, die Auswahlkästchen und Formularfelder richtig darstellt. Bin in dem Sektor nicht fit.
lösch einfach mal eine Zeile und schau was passiert!
oder befrag google zu css und formularen (engl form)
http://www.webmatze.de/webdesign/css/formulare.htm
http://de.selfhtml.org/html/formulare/formatieren.htm
lg georg