Page 1 of 1
formbuilder - css anpassen
Posted: Wed Oct 07, 2009 10:52 am
by pod1987
Hi,
versuche die CSS für ein formbuilder contact-formular anzupassen, aber es klappt nicht.
Habe zuerst versucht die css im formbuilder-modul-ordner direkt anzupassen - diese kann jedoch nicht wieder hochgeladen werden (permission denied).
Danach habe ich versucht den Inhalt in die Haupt-CSS (stylesheet.css im root) zu kopieren, hat jedoch auch nicht geklappt.
Wie kann ich die CSS denn anpassen? Oder habe ich was falsch gemacht?
Habe mal den code der stylesheet.css angehängt:
body { color: #000000;
background-color: #fff;
font-size: 10pt;
font-family: Tahoma;
margin: 10; }
td.nav { color: #000000;
background-color: #fff;
font-size: 10pt;
text-align: center;
font-family: Tahoma }
td.header { color: #000000;
font-size: 10pt;
font-family: Tahoma }
td.label { color: #000000;
background-color: #ccccff;
font-size: 10pt;
font-family: Tahoma }
td.body { color: #000000;
background-color: #ffffff;
font-size: 10pt;
font-family: Tahoma }
td.bodyalt { color: #000000;
background-color: #e9e9e9;
font-size: 10pt;
font-family: Tahoma }
td.footer { color: #000000;
font-size: 10pt;
font-family: Tahoma }
a:link { color: #002060;
text-decoration: none;
font-size: 10pt;
font-family: Tahoma }
a:visited { color: #333333;
text-decoration: none;
font-size: 10pt;
font-family: Tahoma }
a:active { color: #606060;
text-decoration: none;
font-size: 10pt;
font-family: Tahoma }
a:hover { color: #700000;
text-decoration: none;
font-size: 10pt;
font-family: Tahoma }
.good { color: #0033FF;
font-weight: bold }
.bad { color: #CC3300;
font-weight: bold }
div.heading {
background-color: #64879d;
color: #EDF2F5;
padding: 9px;
text-align: left;
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
}
div.leftsidebar {
float: left;
width: 120px;
background-color: #EDF2F5;
font-size: 12px;
padding: 7px;
border: 1px solid #64879d;
color: #444444;
}
div.thebody {
padding: 5px;
margin-left: 150px;
font-size: 10pt;
font-family: Tahoma;
}
div.bottom {
background-color: #EDF2F5;
border: 1px solid #64879d;
padding: 3px;
text-align: center;
font-size: 11;
}
p.title {
font-size: 14pt;
font-weight: bold;
margin: 0;
}
p.smalltitle {
font-size: 12pt;
font-weight: bold;
margin: 0;
padding: 4px;
background-color: #CCCCCC;
text-transform: uppercase;
}
p.sectionname {
font-weight: bold;
margin: 0;
}
.leftsidebar p.sectionname {
padding-left: 15px;
}
.icons {
text-align: center;
}
/* Sample FormBuilder CSS base */
form {margin-top:900px;}
form, td, th, li { font-size: 100%}
form div {margin-bottom:0}
fieldset div {
margin-bottom:0.5em;
margin-left:1em;
}
fieldset div div {
margin-top:0.5em;
margin-left:1em
}
fieldset {
margin-bottom:1em;
border:1px solid #F60;
padding:0.5em
}
fieldset label {
width:auto;
}
legend {
color:#FFF;
background:#F60;
font-style:italic;
font-size:1.2em;
margin-bottom:0.5em;
padding:0.2em;
width:auto;
border:1px solid #CCC
}
textarea {
margin: 0.5em 0;
width:98%;
height: 6em
}
/* Apply this class to text/select input fields with shorter labels
to help alignment */
.short-label label {float:left; width:10em}
.short-label fieldset div input,
.short-label fieldset div select {width:16em}
/* Pretty up your Captcha image output */
.captcha {
margin:0.5em 0;
width:200px;
text-align:center
}
.captcha img {border:1px solid #F60; margin-bottom:0.5em}
.captcha input {width:196px; margin-top:0.5em}
/* Just a bit more room for the Submit button */
.submit {margin-top:0.5em}
/* Sample FormBuilder CSS base */
form {margin-top:20%}
form, td, th, li { font-size: 100%}
form div {margin-bottom:0}
fieldset div {
margin-bottom:0.5em;
margin-left:1em;
}
fieldset div div {
margin-top:0.5em;
margin-left:1em
}
fieldset {
margin-bottom:1em;
border:1px solid #F60;
padding:0.5em
}
fieldset label {
width:auto;
}
legend {
color:#000000;
background:#F60;
font-style:italic;
font-size:1.2em;
margin-bottom:0.5em;
padding:0.2em;
width:auto;
border:1px solid #CCC
}
textarea {
margin: 0.5em 0;
width:98%;
height: 6em
}
/* Apply this class to text/select input fields with shorter labels
to help alignment */
.short-label label {float:left; width:10em}
.short-label fieldset div input,
.short-label fieldset div select {width:16em}
/* Pretty up your Captcha image output */
.captcha {
margin:0.5em 0;
width:200px;
text-align:center
}
.captcha img {border:1px solid #F60; margin-bottom:0.5em}
.captcha input {width:196px; margin-top:0.5em}
/* Just a bit more room for the Submit button */
.submit {margin-top:0.5em}
.contactform input {border: 1px solid #f60;}
.contactform input.checkbox {border: none;}
.contactform label {
display: block;
float: left;
width: 150px;
}
.contactform label.label {
display: inline;
float: none;
width: 50px;
font-size: 10px;
}
.contactform textarea {
background-color: #ffc;
border: 1px solid #f60;
}
.formbuilderform .message {
line-height: 16px;
padding: 0 0 8px 0;
}
Für eure Hilfe vielen Dank.
vg
pod
Re: formbuilder - css anpassen
Posted: Wed Oct 07, 2009 11:01 am
by cyberman
pod1987 wrote:
versuche die CSS für ein formbuilder contact-formular anzupassen, aber es klappt nicht.
Habe zuerst versucht die css im formbuilder-modul-ordner direkt anzupassen - diese kann jedoch nicht wieder hochgeladen werden (permission denied).
Ohne jetzt groß ins Detail zu gehen, rate ich erst mal, dass du den Formbuilder via ModulManager installiert hast.
Falls ja, Formbuilder deinstallieren (ggf. das Formular vorher sichern - das ist dann natürlich auch weg), den Formbuilder via FTP hochladen und dann das ganze von vorn ... nur bei Installation via ModulManager kommt es zu derartigen Berechtigungsproblemen.
Re: formbuilder - css anpassen
Posted: Wed Oct 07, 2009 1:08 pm
by pod1987
Ok, lag tatsächlich daran. Das geht jetzt jetzt also, aber irgendwie tut sich nix, nachdem ich an der CSS rumgebastelt habe.
Muss ich sonst noch was einstellen?
Re: formbuilder - css anpassen
Posted: Thu Oct 08, 2009 9:28 am
by antibart
Ich weiß ja nicht, an welcher Stelle und wie du rumgebastelt hast.
Wenn die styles in deinem Haupttemplate stehen und alles richtig verknüpft ist, sollten zumindest Tag-bezogene Änderungen wie input, form usw Auswirkungen haben.
Bei den anderen: bist Du sicher, dass Du überhaupt ein Formulartemplate ausgewählt hast, das diese Klassen auch benutzt?
Re: formbuilder - css anpassen
Posted: Thu Oct 08, 2009 9:43 am
by pod1987
ausgewählt habe ich das template "tabellen-template, title links".
also doch wieder in die haupt-css schreiben? habe das jetzt mit der default.css in dem ordner /module/FormBuilder versucht. aber das zeigte keine wirkung.
habe da einfach mal versucht die farben etc. zu ändern, also eigentlich sachen, die man direkt sehen sollte, aber nix...
Re: formbuilder - css anpassen
Posted: Thu Oct 08, 2009 10:04 am
by antibart
pod1987 wrote:
habe da einfach mal versucht die farben etc. zu ändern, also eigentlich sachen, die man direkt sehen sollte, aber nix...
Die Farben WOVON? Wenn Du die Farben in einer css-Klasse änderst, die vom Formbuilder nicht benutzt wird,, kann es nicht funktionieren.
Ob du sie nun in die Haupt-css schreibst oder in einer eigenen css, ist wumpe, solange sie alle mit dem Template verknüpft sind ...
...und vor allem:
solange sie nur einmal vorkommen!.
In deinen css steht zum Beispiel:
Code: Select all
/* Sample FormBuilder CSS base */
form {margin-top:900px;}
und etwas weiter unten:
Code: Select all
/* Sample FormBuilder CSS base */
form {margin-top:20%}
Logischerweise überschreibt 20% die erste Angabe von 900px.
Jede Eigenschaft darf nur einmal vergeben werden. Egal, ob auf zwei dateien verteilt oder in ein und derselben.
...
Re: formbuilder - css anpassen
Posted: Thu Oct 08, 2009 10:12 am
by pod1987
Ok, das doppelte habe ich jetzt korrigiert.
Habe das gefühl, dass die css gar nicht in dem template eingebunden ist, obwohl in dem css-feld auf der hauptseite
CSS-Klasse für dieses Formular:
contactform
steht.
Kann es sein, dass die css noch irgendwo anders eingebunden werden muss?
Re: formbuilder - css anpassen
Posted: Thu Oct 08, 2009 12:17 pm
by mike-r
Das kannst Du mit Firebug einfach herausfinden, ein Klick auf das entsprechende Element zeigt Dir die zugehörigen Klassen UND das entsprechende Stylesheet an.
Re: formbuilder - css anpassen
Posted: Thu Oct 08, 2009 1:28 pm
by pod1987
ok, danach habe ich geguckt. die heißt contactform. heißt das, dass gar kein css verwendet wird?
die css ist die haupt-css.
alles was ich machen möchte, ist, dass die feldbezeichnungen linksbündig sind und die felder etwas weiter auseinander sind (padding), das war's schon...aber ich finde einfach nichts, wo ich das einstellen kann.
Re: formbuilder - css anpassen
Posted: Thu Oct 08, 2009 3:18 pm
by mike-r
sowas strickt der Formbuilder zusammen? Das ist ja unfassbar...
Zur Abhilfe gibt's 2 Möglichkeiten:
a: ins Formulartemplate gehen und diesen ganzen Murx wie align, valign und dergleichen rauslöschen.
a1: vernünftige Klassen/ID-vergabe im Template
b: testen, ob table.contactform td {deine layoutwünsche;} hilft. Wenn nicht, zurück zu a.
Bonus-c: Kann man für das Formular ein anderes Template auswählen? Wenn ja: probieren, ob es da noch etwas Vernünftiges gibt.
Re: formbuilder - css anpassen
Posted: Fri Oct 09, 2009 7:35 am
by antibart
mike-r wrote:
Bonus-c: Kann man für das Formular ein anderes Template auswählen? Wenn ja: probieren, ob es da noch etwas Vernünftiges gibt.
Leider sind die vorinstallierten Templates alle nicht das gelbe.
@pod1987
Deswegen habe ich so explizit danach gefragt, was genau du ändern wolltest. Du hast zunächst von Farben gesprochen, aber leider nicht, wo ....
In den Tabellen-Templates stehen - wie mike-r schon sagte - bereits Tabellen-Eigenschaften drin, die über die css nicht überschieben werden (ZB align).
Du kanst also die Eigenschaften für Ausrichtung und Abstand direkt im Template ändern, oder eben löschen und css benutzen.
..
Re: formbuilder - css anpassen
Posted: Fri Oct 09, 2009 7:49 am
by pod1987
Ok, habe es jetzt mit der table.contactform hinbekommen. Vielen Dank für die Hilfe.
Das stimmt allerdings, die vorgefertigten Layouts sind wirklich nicht das Gelbe vom Ei, aber was neues basteln lohnt sich da jetzt auch nicht wirklich. Naja...
Danke nochmals!
Re: formbuilder - css anpassen
Posted: Fri Oct 09, 2009 10:44 am
by Connie
Zu den vom Formbuilder generierten CSS gibt es etliche Postings und viele Klagen hier im Forum...
hat sich aber leider nie gebessert und klare Antworten von den oder dem Modul-Entwickler hat man auch nie erhalten..
ich habe es auch aufgegeben, irgendetwas davon zu benutzen und setze eigene CSS-Deklarationen in den templates ein, die im Haupt-CSS definiert sind. So hat man auch die Sicherheit, daß ein Modul-Update nichts überschreibt, man kann ja nie wissen ;=)
ist wirklich am besten, eigene Definitionen aus dem eigenen CSS-Stylesheet zu verwenden.
Re: formbuilder - css anpassen
Posted: Thu Nov 12, 2009 8:26 am
by matthias
pod1987 wrote:
Ok, habe es jetzt mit der table.contactform hinbekommen. Vielen Dank für die Hilfe.
Das stimmt allerdings, die vorgefertigten Layouts sind wirklich nicht das Gelbe vom Ei, aber was neues basteln lohnt sich da jetzt auch nicht wirklich. Naja...
Danke nochmals!
@pod1987
Hallo ,
vielleicht hilft dir das weiter.
Groovy Form Stylin for FormBuilder
http://forum.cmsmadesimple.org/index.php?topic=23386.0
Meine Version kannst du auf:
http://stones-for-living.eu/index.php?page=kontakt&hl=de_DE anschauen.
Viel Spaß Matthias
