Wordpress Widget anpassen mit CSS?

pex

Ich habe mir auf meine Wordpress-Seite ein Kontakt-Formular Widget eingebaut.

Dieses Widget hat den Shortcode [cscf-contact-form].

Wie kann ich dieses Widget bzw. das Kontakt-Formular etwas nach rechts verschieben?

Der Code der Seite sieht aktuell so aus:

<h1 style="color:#7a3b76;">★ Kontakt</h1>

<p>Falls Du Fragen, Kritik oder sonstige Anliegen hast, kann Du Dich gerne bei mir melden.</p>

<p>Nutze dazu einfach das folgende Kontaktformular:</p>

[cscf-contact-form]

Wie kann ich diesen Shortcode jetzt "ansprechen"?

So:

</div>

?

Ihr seht, ich bin noch relativ neu dabei. Hoffe ihr könnt mir da helfen...

Bandit

Bitte einen Link zur Seite posten, mit diesen Informationen kann dir niemand helfen, ohne zu raten.

Arne Drews

Das kommt doch darauf an, wie der "Shortcode" gerendert wird.
Wenn sich darin ein <div class="contact-form"> befindet, dann sprichst Du das darüber an.
Das CSS ist zuständig für das DOM-Resultat, das an den Browser gesendet wird, mit irgendwelchen Platzhaltern Server seitig hat das nichts zu tun.

Sailor

Das solltest du näher erklären! Was bedeutet 'etwas nach rechts'? .. rechtsbündig... mittig... 20px vom Rand weg?
Aber die Idee mit dem div scheint erfolgversprechend:
<div class="contact-form">
[cscf-contact-form]
</div>

und dann im Custom CSS die Klasse 'contact-form' mit den entsprechenden Formatierungen versehen.

.contact-form {
margin-left: 50px; -> als Beispiel / rückt das Formular um 50 Pixel nach rechts
...
...
}

Arne Drews

Öhm... Ich vermute hinter dem [cscf-contact-form] ein Template/Widget, das aus HTML besteht.
Es reicht vollkommen aus, auf die darin enthaltenen Tags/Elemente zu mappen, als einen weiteren Container drum rum zu bauen.

Sailor

Arne Drews - ja, das wird so sein! Im ausgelieferten Quellcode kann man sicherlich ein Element identifizieren, das man als Container für Formatierungen nutzen kann. Nur ohne Link zur Seite ist das der 'first shot', der dem Fragesteller vielleicht weiter hilft.

Bandit

Und wenn [cscf-contact-form] schon mit div's gerendert wird, hat man im Quellcode Änderungen durchgeführt, die dann bei einem Update des Templates zu nichte gemacht werden. NIcht umsonst habe ich von einem Link zu der Seite gesprochen, denn vermutlich reicht eine Anpassung in der custom.css

Arne Drews

Zitat von Sailor

Arne Drews - ja, das wird so sein! Im ausgelieferten Quellcode kann man sicherlich ein Element identifizieren, das man als Container für Formatierungen nutzen kann. Nur ohne Link zur Seite ist das der 'first shot', der dem Fragesteller vielleicht weiter hilft.

Nein, das ist kein "first-shot", denn wie @Bandit schon angedeutet hat, machst Du Dir damit bestehende Regeln kaputt, weil der "Pfad" zu den Elementen nicht mehr hinhaut!

pex

Zitat von Sailor

Das solltest du näher erklären! Was bedeutet 'etwas nach rechts'? .. rechtsbündig... mittig... 20px vom Rand weg?
Aber die Idee mit dem div scheint erfolgversprechend:
<div class="contact-form">
[cscf-contact-form]
</div>

und dann im Custom CSS die Klasse 'contact-form' mit den entsprechenden Formatierungen versehen.

.contact-form {
margin-left: 50px; -> als Beispiel / rückt das Formular um 50 Pixel nach rechts
...
...
}

Alles anzeigen

Vielen, vielen Dank! Das hat geholfen. Jetzt konnte ich alles so einstellen, wie ich wollte.

Hoffe, dass es so auch korrekt ist.

Danke für euren Input!

Jetzt habe ich eine weitere Frage und zwar würde ich jetzt gerne alles auf einer Höhe / Linie haben.

Hier mal der Link zur Seite:
http://e-reader.org/kontakt/

Das ist eine Seite für meine Freundin. Ich baue die gerade, mit meinen bescheidenden Fähigkeiten, für Sie auf.

Seht ihr den Stern und das Wort "Kontakt" (die Überschrift der Seite)!? Die ist im Vergleich zum Stern unten ★ INFOS ZU PREISANGABEN zu weit rechts.

Wie kann ich das anpassen, dass es auf einer "Linie" ist? Ich würde den Body mit Kontakt gerne etwas nach links verschieben.

Habt ihr da Ideen wie ich das ansprechen kann mit CSS!? : )

Sailor

Da gäbe es mehrere Möglichkeiten:
Für beinahe alle Textelemente ist ein margin-left von 20px festgelegt. Du könntest das für dein

HTML

<h1 style="color:#7a3b76;">★ Kontakt</h1>

natürlich durch eine andere Angabe im Custom CSS ändern! Würde ich aber von abraten, denn dann wären alle <h1> betroffen und du könntest dir an anderen Stellen dein Layout kaputt machen.
Um jetzt wirklich nur dieses eine h1 Element zu beeinflussen könntest du auch die schon im h1-Tag vorhandenen Style Anweisung erweitern:

HTML

<h1 style="color:#7a3b76; margin-left: 0px;">★ Kontakt</h1>

Vielleicht hilft das schon.

pex

Ah super! Sailor, danke dir!

Hat auch funktioniert und ist ja echt recht simple.

Eine Frage habe ich noch.

In der Sidebar; im Footer... da steht jetzt der Titel "Infos zu den Preisangaben".

Siehe hier:
http://e-reader.org/wofuer-brauche-ich-einen-e-reader/

Da habe ich jetzt einfach in diesem Feld:

https://www2.pic-upload.de/img/33704521/infos.jpg

Den CSS-Code eingetragen (im Titel). Das funktionierte natürlich nicht.

Wie kann ich diesen Titel ansprechen? Unten ist ja ein CSS-Feld!?

Wie kann ich den Titel und den Text ansprechen und entsprechend formatieren?

Würde diese nämlich auch etwas nach links oder rechts verschieben.

Sailor

.. also so scheint das auf jeden Fall nicht zu funktionieren! Das hat mehrere Gründe.
u.a.
Es wird ein Blockelemet (<h1>) in ein Blockelement (<p>) eingefügt... also <p><h1>...</h1></p> ist kein valides Konstrukt in HTML. Sollte also auf jeden Fall vermieden werden.
Dann... und deswegen sieht das so gruselig aus... wird der HTML Tag, den du in das Titelfeld eingegeben hast von WP 'maskiert'. Es steht dort

HTML

&lt;h1 style=&quot;color: #7a3b76;margin-left: 20px&quot;&gt;★ Infos zu Preisangaben&lt;/h1&gt;

wobei dieses < und > für die eckigen Klammern stehen, die einen HTML Tag umschließen. Es werden dann die Zeichen ausgegeben, anstatt dass der Browser den <h1> Tag erkennt.
Also lösche diese Einfügung wieder.. so wird das nichts.
Versuche stattdessen folgenden CSS Code im Custom CSS einzufügen:

HTML

#sow-editor-3 p.h1 {
  margin-left: -20px;
}

Danach bitte prüfen, ob davon auch andere Elemente betroffen sind... auch auf anderen Seiten/Beiträgen. Die ID=sow-editor-3 könnte ja auch noch woanders genutzt werden

pex

Sailor!! Vielen Dank!

Du hast mir wieder top geholfen! Danke!

Woher weisst du denn wie man genau dieses Widget in CSS "anspricht"?

Also "#sow-editor-3"? Steht das irgendwo!?

/EDIT:

Habe gerade gesehen, dass man auch selbst dem jeweiligen Widget eine CSS-Klasse geben / zuweisen kann.

Sailor

Das ist kein Hexenwerk - steht alles im Quelltext der Seite! Und dann ist es nur eine Sache die entsprechenden 'Webmaster-Tools', die eigentlich jeder Browser eingebaut hat, zu nutzen.
Das Zauberwort heißt 'Inspektor' - mit dem kann man bis auf den kleinsten Pixel die Formatierungen untersuchen und sogar testweise ändern.

Tags

Benutzer online in diesem Thema