Skip to forum
Anfängerfrage CSS
 
Benachrichtigungen
Alles löschen

Anfängerfrage CSS

45 Beiträge
10 Benutzer
41 Reactions
4,679 Ansichten
Nerrik
Joined: 12.09.2006

Firefox Menu: Entwicklerwerkzeuge -> Inspektor -> bei "HTML durchsuchen" über dem HTML code fenster "epm-form-field" eingeben. Rechts im feld sieht man dann die css Einträge und auch in welcher Datei und Zeile die gemacht wurden.

Wenn es da nicht gefunden wird musst du mal rechtsklick auf deine Form machen und "element untersuchen" klicken und dir den obersten "div" Eintrag der Form raussuchen und hier ein wenig mit margin: 0 auto "experimentieren"


Antwort
Zitat
Nerrik
Joined: 12.09.2006

nur "epm-form-field" nicht .epm-form-field zum Suchen sry


Antwort
Zitat
Nerrik
Joined: 12.09.2006

zur not schau dir mal den "...." html tag über google an.
Wird nicht gerne gesehen, aber da es deine "hobbypage" ist wayne :P


Antwort
Zitat
Krach-Bumm-Ente
Joined: 01.05.2006

Ok ich bin im Inspektor und habe gefunden, wo ich margin 0 auto eingeben muss. Aber wo finde ich jetzt die entsprechende Datei?


Antwort
Zitat
Krach-Bumm-Ente
Joined: 01.05.2006

Den Enter Button habe ich mit text-align center auch mittig bekommen. Nur wo mache ich das "in Echt"?

Edit: Habe es dadurch hinbekommen, dass ich einfach den shortcode in gesetzt habe. War nicht ganz mittig unter normalem Text, dann habe ich sehr unelegant den shortcode vom Text getrennt und den shortcode noch um 0.9em eingerückt :f_tongue:
Dennoch interessiert mich, wie ich das über die margin: 0 auto lösen kann. Ist es korrekt, dass dies in einer Datei namens style.css geschehen muss (Zeile 200)? Ich habe nur die Befürchtung, dann auch sehr viel anderes mitzuverändern, da nach meinem Laienblick da noch weitere Elemente auf diese Parameter zugreifen könnten.


Antwort
Zitat
flowIIpoker
Joined: 14.02.2007

Original von Krach-Bumm-Ente

Dennoch interessiert mich, wie ich das über die margin: 0 auto lösen kann. Ist es korrekt, dass dies in einer Datei namens style.css geschehen muss (Zeile 200)?

style.css ist nicht verkehrt.

Original von Krach-Bumm-Ente
Ich habe nur die Befürchtung, dann auch sehr viel anderes mitzuverändern, da nach meinem Laienblick da noch weitere Elemente auf diese Parameter zugreifen könnten.

gib doch deiner center klasse einen uniquen namen

.center-mailchimp-form {
    margin: 0 auto;
}

und dann aenderst du den plugincode

<div class="epm-form-field; center">

in

<div class="epm-form-field center-mailchimp-form">

btw. werden klassen nicht mit semikolons getrennt im html.
wuerde mich echt wundern, wenn er das orginal css in deinem code
ueberhaupt genommen hat


Antwort
Zitat
Malte265
Joined: 08.11.2006

du musst aber auch nicht zwingend für alles eine class erstellen. du kannst auch in deinem div einfach das style-attribut benutzen:

(nur ein beispiel. keine ahnung ob das "margin: 0 auto" dein problem löst)


Antwort
Zitat
klopa
Joined: 03.11.2006

Erstmal möchte ich dir bei der Arbeit mit Wordpress zwei Tipps geben:

1.
Arbeitest du mit einem child theme? Wenn nicht würde ich dir empfehlen eins zu erstellen. (Anleitung bsp: http://www.webtimiser.de/wordpress-child-theme-erstellen/ )

2.
Verändere nicht die php dateien von installierten plugins (außer natürlich du hast die selbst erstellt).

Der Grund für beide ist, dass deine Änderungen beim Update vom Theme bzw. dem Plugin verloren gehen. Grade bei Plugins kommen Updates recht häufig raus und du müsstest deine Änderungen jedesmal neu einfügen.

Ich würde damit arbeiten, was dir das plugin vorgibt. Das ist für gewöhnlich sicherer.

Schreibe für deine Zentrierung ganz unten in der style.css (liegt im Ordner wp-content/themes/dein(child)theme)

.mc4wp-form-fields input{
margin: 0 auto;
position: relative;
display: block;

}

Das sollte alle Felder der Formulare zentrieren, die durch das Plugin erstellt wurden.
(bsp: https://jsfiddle.net/57fopkL7/ )

Wenn du nur dieses eine Formular so haben willst, kannst du auch die vorgegebene id selektieren, müsstest den code aber anpassen wenn du diese irgendwie änderst.

Der Selektor in deinem Screenshot wäre dann

#mc4wp-form-1 input

edit: grade deinen beitrag nochmal gelesen und gemerkt, dass du den code im Pluginmenü des Dashboards eingeben kannst. Dann geht das ganze natürlich auch mit eigenen klassen :).


Antwort
Zitat
Krach-Bumm-Ente
Joined: 01.05.2006

Danke euch allen! Ich habe wieder einiges gelernt und das Problem letztlich ja auch geloest. ich denke ich muss mir das alles einmal von Grund auf anschauen (was genau ist eine class etc.) um dann alles wirklich zu verstehen. Ich hoffe, dass ich meine Website so erst einmal hinbekomme (möchte keine Werbung machen, aber wäre für Tipps sehr dankbar, www.betterpapers.org)


Antwort
Zitat
flowIIpoker
Joined: 14.02.2007

das mit dem child-theme ist natuerlich der richtige weg. fand den aber ein bisschen zu advanced
genau so wie der hinweis mit den css rules

im prinzip ist klopas kommentar eigentlich die anleitung, wie man es richtig macht...

das hineinschreiben von styleanweisungen ins html oder die benutzung vom tag funktionieren zwar,
sollten aber nicht mehr benutzt oder als tips weiter gegeben werden.

hat ja nen grund warum es html und css gibt


Antwort
Zitat
klopa
Joined: 03.11.2006

Füg mal in deine style.css folgendes ein:

Spoiler

#site-logo{
    left: initial;
}

#header{
    width: 1160px;
    padding: .15em 0;
}

#main-nav{
    right: initial;
}

#headerwrap{
    background-color: #fafafa;
}


.fixed-header-on #site-logo img {
    height: auto;
}

Beim Scrollen verzieht dein Logo sonst.

aktuell:

Spoiler

mit dem code:

Spoiler

"verschönert" auch einige probleme, die du mit der Seite bei kleineren Fensterbreiten hast (bsp. Tablett).
Beim schmaler machen des Fensters wird dir aktuell auffallen, dass dein Menü hinter das Logo rutscht. Das wird damit etwas verbessert. Kann aber noch schöner gemacht werden, indem man das Menü irgendwann unter das Logo rutschen lässt und anschließend zentriert. Hab grad nur keine Zeit mehr für.

Da dein Theme ein responsive design verwendet, kannst du schauen wie die Seite auf Smartphones bzw. tabletts aussieht wenn du das Browserfenster einfach kleiner ziehst. Da werden dir noch einige andere Probleme auffallen, die es zu beheben gibt.


Antwort
Zitat
flowIIpoker
Joined: 14.02.2007

Original von klopa

Da dein Theme ein responsive design verwendet, kannst du schauen wie die Seite auf Smartphones bzw. tabletts aussieht wenn du das Browserfenster einfach kleiner ziehst. Da werden dir noch einige andere Probleme auffallen, die es zu beheben gibt.

bitte, bringt ihm nicht so nen bloedsinn bei. er ist doch quasi noch jungfraeulich und unversaut :f_mad:
er hat den inspector doch schon gefunden und soll sich ruhig mal mit dessen functionen/faehigkeiten auseinander setzen

Spoiler

oberste zeile, rechte seite da ist die funktion im firefox-inspector versteckt (beim chrom uebrigens auf der linken) oder
google nach "responsive design check online"

Spoiler

ich hab schon so meine gruende, warum ich hier auf gewisse standards poche. :f_drink:
gibt nix schlimmeres wenn man frueh ins buero kommt und schlechten geschriebenen code durcharbeiten muss, weil der vorarbeiter seinen fehler nicht findet


Antwort
Zitat
flowIIpoker
Joined: 14.02.2007

verstehen auch viele nicht, die nie ein codereviewing machen mussten (z.b. einer meiner exchefs[bwler oder so nen bloedsinn])

zitat: ob sie das nun eingerueckt bekommen oder nicht, aendert doch nix am programablauf ... also zackzack

:facepalm::facepalm::facepalm:


Antwort
Zitat
Krach-Bumm-Ente
Joined: 01.05.2006

Danke euch beiden!

In der style.css steht:

Spoiler

DO NOT EDIT THIS FILE.

If you need to overwrite the CSS styling, create a new custom_style.css
in the theme folder and it will automatically load in the <head>.

*/

Also habe ich jetzt im File Manager in cPanel eine custom_style.css in public_html/wp-content/themes/themify-ultra erstellt. Die Datei sehe ich jetzt im WP Dashboard unter Editor und dort habe ich dann deinen Code, klopa, eingefügt. Das Logo verzieht aber bei mir immer noch.

Edit: Child Theme habe ich jetzt auch installiert. Generell: kann ich im Child Theme jetzt in die style.css schreiben, oder soll ich auch da eine custom_style.css anlegen?

Edit2: Ich arbeite mit themify und habe gerade einen pagebuilder Vergleich gelesen, bei dem themify gar nicht gut abgeschnitten hat (primär weil man den Content verliert, wenn man den Builder wechselt). Außerdem sind updates kostenpflichtig. Ich denke ich switche zu Elementor, was komplett umsonst ist und laut dem Test auch besser.


Antwort
Zitat
klopa
Joined: 03.11.2006

Ja mit den Entwicklern erzeugen ist das tatsächlich der bessere Weg, benutze lieber diesen.

Warum das mit dem Code nicht funktioniert hat kann ich dir grade leider nicht sagen, da ichdas Wochenende unterwegs bin und kein Notebook dabei habe um nachzuschauen ob er die Änderungen überhaupt geladen hat.

Könnte verschiedene Ursachen haben.
1. Er hat die custom_style nicht geladen
2. Die Reihenfolge beim Laden stimmt nicht und die Änderungen werden wieder überschrieben.
3. Habe nen Fehler im Code.

Zu deinem edit1: wenn du ein Child theme hast, kannst du da problemlos auch die Style.css editieren.

Zu edit2 kenn ich mich nicht aus mit, da ich damit bisher nichts gemacht habe.


Antwort
Zitat
flowIIpoker
Joined: 14.02.2007

Original von Krach-Bumm-Ente
Danke euch beiden!

In der style.css steht:

Spoiler

DO NOT EDIT THIS FILE.

If you need to overwrite the CSS styling, create a new custom_style.css
in the theme folder and it will automatically load in the <head>.

*/

Also habe ich jetzt im File Manager in cPanel eine custom_style.css in public_html/wp-content/themes/themify-ultra erstellt. Die Datei sehe ich jetzt im WP Dashboard unter Editor und dort habe ich dann deinen Code, klopa, eingefügt. Das Logo verzieht aber bei mir immer noch.

Edit: Child Theme habe ich jetzt auch installiert. Generell: kann ich im Child Theme jetzt in die style.css schreiben, oder soll ich auch da eine custom_style.css anlegen?

Edit2: Ich arbeite mit themify und habe gerade einen pagebuilder Vergleich gelesen, bei dem themify gar nicht gut abgeschnitten hat (primär weil man den Content verliert, wenn man den Builder wechselt). Außerdem sind updates kostenpflichtig. Ich denke ich switche zu Elementor, was komplett umsonst ist und laut dem Test auch besser.

da ist da eher klopa dein ansprechpartner
der hat den "newstrend/overview".

wenn man mich ruft, dann klemmt es meistens irgendwo und ehrlich gesagt.
bin ich nicht so der wordpress-fan.

ich gehoere einer gilde an, die quasie schon ausgestorben ist (bin baujahr 1975)
und hab auch nicht die letzten "tips&tricks"drauf:f_frown:
nutze sowas wie :

http://phpcodechecker.com/
https://jigsaw.w3.org/css-validator/ :f_cry:
https://validator.w3.org/#validate_by_upload

und lass dein code drueberlaufen:


Antwort
Zitat
flowIIpoker
Joined: 14.02.2007

nachtrag ... installiert euch erstmal nen wp_"irgendwas"_maintaince plugin und einen wp_error logger eurer wahl

nichts ist seo-magic schlimmer als das ihr 10 tage von google und co gescaned wurdet und 0 score bekommen habt...
das holt ihr seo.maessig nicht mehr auf


Antwort
Zitat
Krach-Bumm-Ente
Joined: 01.05.2006

Original von flowIIpoker
nachtrag ... installiert euch erstmal nen wp_"irgendwas"_maintaince plugin und einen wp_error logger eurer wahl

nichts ist seo-magic schlimmer als das ihr 10 tage von google und co gescaned wurdet und 0 score bekommen habt...
das holt ihr seo.maessig nicht mehr auf

Wie meinst du das mit den 10 Tagen? Meine Webseite ist schon länger als 10 Tage online, da ich daran arbeite, aber halt eben nicht annähernd gut für SEO. Hab ich damit jetzt einen schlechten Score und bin raus, oder wie ist das zu verstehen?


Antwort
Zitat
flowIIpoker
Joined: 14.02.2007

jetzt muessen die wp leute dran -- irgendwo gibs im backend sowas wie (hidde m from search)oder selber mal durchclicken..

soviel scheint dein wordpress ja nicht zu haben


Antwort
Zitat
klopa
Joined: 03.11.2006

Ja, die option gibts in WordPress. Du müsstest danach auch bei der Installation gefragt worden sein. Da ich Grad kein Zugriff drauf habe und die Menüpunkte nicht im Kopf habe hier ein Link: http://www.wpbeginner.com/beginners-guide/how-to-stop-search-engines-from-crawling-a-wordpress-site/


Antwort
Zitat