formbuilder - css anpassen

[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

[cyberman]

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.

[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?

[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?

[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...

[antibart]

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.

...

[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?

[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.

[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.

[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.

[antibart]

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.

..

[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!

[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.

[matthias]

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