Wordpress Widget anpassen mit CSS?

1. offizieller Beitrag

    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 class="contact-form">


    </div>

    ?


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

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

    • Offizieller Beitrag

    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.

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

    if(!sleep)

    {$sheep++;}

    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.

    if(!sleep)

    {$sheep++;}

    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

    • Offizieller Beitrag
    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!


    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!? : )


    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.

    if(!sleep)

    {$sheep++;}

    Ah super! Sailor, danke dir! :daumenhoch:

    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.

    .. 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 &lt; und &gt; 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

    if(!sleep)

    {$sheep++;}

    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.

    Einmal editiert, zuletzt von pex (20. August 2017 um 14:35)

    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.

    if(!sleep)

    {$sheep++;}