• Hallo,

    der Text auf meiner Homepage ist zu weit rechts und nachdem ich in meinem Theme die Sidebar gelöscht habe,
    würde ich den Text nun zentrieren, so dass die Abstände nach links und rechts gleich sind.
    Muss ich das in der Datei style.css machen oder geht das auch anders?

    Vielen Dank im voraus für die Antworten

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Moin!

    Ja, das wirst Du per CSS machen müssen.
    Untersuche die Seite mit den Entwicklertools Deines Browsers, um herauszufinden, wo Du was ändern musst. Falls nötig, google nach "Entwicklertools +Browser".

    Dateien vor Änderung sichern! Child-Theme oder Custom-CSS für Änderungen nutzen!

  • Ich hab das mit dem DevTool gemacht und mal den "Body" reingestellt.

    [FONT=Consolas][COLOR=#888888]element.style[/COLOR] {



    }


    [/FONT]
    [FONT=Consolas][COLOR=#888888][/COLOR]
    [COLOR=#555555][/COLOR]
    [COLOR=#888888][COLOR=#222222]body[/COLOR][/COLOR] {


    • [COLOR=#C80000]font-family[/COLOR]: "PT Sans",Arial,Helvetica,sans-serif;
    • [COLOR=#C80000]font-size[/COLOR]: 13px;
    • [COLOR=#C80000]margin[/COLOR]: 0;
    • [COLOR=#C80000]padding[/COLOR]: 0;
    • [COLOR=#C80000]background-color[/COLOR]: #f7f7f7;
    • [COLOR=#C80000]color[/COLOR]: #000000;
    • [COLOR=#C80000]width[/COLOR]: 100%;


    }

    Gibt es kein Plugin, das einem eine ganz einfache Veränderung der Textabstände ermöglicht, so dass man innerhalb
    kürzester Zeit die Texte nach rechts oder links schieben kann?

    Es geht doch bestimmt vielen Usern so, das die Texte nicht an der gewünschten Stelle stehen.
    Kann man nicht im Style.css ein paar Zahlen verändern und schon wird der gewünschte Abschnitt verschoben?
    [/FONT]

  • Nee, falscher Denkansatz!
    Du kannst den Text nicht einfach "verschieben".
    Du musst den/die "Container" in welchen Deine Seiteninhalte (Texte, Bilder etc.) "ausgegeben" werden wahrscheinlich entsprechend anpassen.

    Dein Denkansatz zeigt, dass Dir da einiges an Grundlagenwissen fehlt.

    Wenn Du uns den Link zur Baustelle mitteilst, haben wir das ruckzuck erledigt.

    Und ja, man muss wahrscheinlich nur an den richtigen Stellen ein paar Zahlen/Einträge in der style.css verändern.

    Btw: Hab keine Angst den Link zu nennen, nutze einen URL-Shortener. Wir haben alle mal klein angefangen! ;)

    Dateien vor Änderung sichern! Child-Theme oder Custom-CSS für Änderungen nutzen!

    Einmal editiert, zuletzt von son10 (10. Dezember 2016 um 18:53)

  • Ja die Grundlagen fehlen teilweise :)

    Brauchst du den Link von der Homepage? Den möchte ich aktuell nicht öffentlich zugänglich machen.
    Ich kann die style.css Datei hier einstellen und dann müsste man doch sehen, wo man was verändern muss, oder?

    So wie ich das bisher verstanden habe, kann man doch alle möglichen optischen Veränderungen der Homepage in
    der style.css Datei vornehmen??

  • *Seufz*
    Dann sag mal, welches Theme Du nutzt.

    Ich bin allerdings gleich raus.
    Muss kochen und lecker Wein trinken. :)

    Dateien vor Änderung sichern! Child-Theme oder Custom-CSS für Änderungen nutzen!

  • Ich finde solch ein Theme nicht. Du machst es uns nicht leicht. Und ohne Link wird hier wohl niemand helfen können.

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

  • Entschuldige das Thme heißt Landshafting.

    Hier ist die Style.css Datei. Danke für eure Hilfe!

    /*!
    Theme Name: Landshafting
    Description: Landshafting is a Fully Responsive WordPress Theme, a perfect choice for a gardening, lawn services, landscaping, agriculture, landscape website or blog. 100% Responsive, Customizable, and Easy to Use WordPress Theme.
    Theme URI: https://ayatemplates.com/product/landshafting
    Author: ayatemplates
    Author URI: https://ayatemplates.com
    Version: 1.0.6
    Text Domain: landshafting
    Tags: blog, food-and-drink, two-columns, right-sidebar, custom-background, custom-logo, custom-colors, custom-header, custom-menu, featured-images, post-formats, threaded-comments, editor-style, translation-ready, sticky-post, theme-options
    License: GNU General Public License v2.0
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    */


    /* general styles */
    body {
    font-family:"PT Sans",Arial,Helvetica,sans-serif;
    font-size:13px;
    margin:0;
    padding:0;
    background-color:#f7f7f7;
    color:#000000;
    width:100%;
    }


    #body-content-wrapper {
    position:relative;
    overflow:hidden;
    }


    input, select, textarea, button, #container .button {
    font-family:inherit;
    }


    button {
    cursor:pointer;
    }


    body:before {
    content: none !important;
    }


    a {
    text-decoration:none;
    outline:none;
    color:#656565;
    }


    a:hover {
    color:#84c104;
    }


    a img{
    outline:none;
    }


    p {
    padding:3px 0 3px 0;
    margin:0;
    }


    img {
    border:0;
    outline:0;
    }


    #main-content-wrapper img {
    max-width:100%;
    height:auto;
    -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    }


    #main-content-wrapper a:hover img {
    -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.7);
    -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.7);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.7);
    opacity:0.7;
    }


    h1, h2, h3, h4, h5, h6{
    font-weight:400;
    margin:0;
    color:#000000;
    }

    h1 {
    font-size:24px;
    padding:10px 0 3px 0;
    }


    h2 {
    font-size:22px;
    padding:5px 0 0 0;
    }


    h3 {
    font-size:20px;
    padding:8px 0 5px 0;
    }


    h4 {
    font-size:18px;
    padding:2px 0 1px 0;
    }


    h5 {
    font-size:16px;
    padding:2px 0 1px 0;
    }


    h6 {
    font-size:14px;
    padding:2px 0 1px 0;
    }


    table {
    border-collapse: collapse;
    }


    td, th {
    padding:10px;
    }


    #wp-calendar,
    #wp-calendar th,
    #wp-calendar td {
    border:none;
    }


    #wp-calendar td,
    #wp-calendar th {
    padding:0;
    }


    embed,
    iframe,
    object,
    video {
    margin-bottom: 24px;
    max-width: 100%;
    }


    p > embed,
    p > iframe,
    p > object,
    span > embed,
    span > iframe,
    span > object {
    margin-bottom: 0;
    }


    #sidebar select{
    max-width:95%;
    }


    .gallery-item .gallery-icon > a:before,
    dt.gallery-icon > a:before,
    dt.gallery-icon > a:before,
    .gallery-item .gallery-icon:before {
    content:'' !important;
    }


    .gallery-item .gallery-icon > a,
    dt.gallery-icon > a,
    dt.gallery-icon > a,
    .gallery-item .gallery-icon {
    background:none;
    }


    #header-content-wrapper {
    text-align: center;
    }


    #header-logo {
    display:inline-block;
    }


    #header-logo > a.custom-logo-link,
    #header-logo #site-identity {
    float:left;
    }


    #header-logo h1 {
    padding:0;
    }


    #navmain li {
    padding:0;
    }


    ul > li {
    padding:3px 0;
    margin:0;
    list-style-type:none;
    }


    ol > li {
    padding:3px 0;
    margin:0;
    }


    ol {
    padding:0 0 0 30px;
    }


    ul {
    padding:0 0 0 15px;
    }


    .widget > ul,


    #sidebar > ul {
    padding-left:0;
    }


    /* header */
    #header-main-fixed {
    clear:both;
    background-color:#e3fc57;
    margin:0;
    width:100%;
    color:#000000;
    border-bottom:1px solid #d5d5d5;
    }


    #header-main-fixed a h1,
    #header-main-fixed a {
    color:#656565;
    }


    #header-main-fixed a:hover {
    color:#639200;
    }


    #header-content-wrapper {
    padding:0 2% 0 2%;
    }


    .item-arrow-down:after,
    .item-arrow-up:after {
    font-family:'FontAwesome';
    font-size:12px;
    }


    .item-arrow-down:after {
    content:"\f107";
    }


    .item-arrow-up:after {
    content:"\f106";
    }


    #navmain {
    margin:0;
    clear:both;
    float:none;
    }


    #navmain ul {
    text-align: left;
    }


    #navmain > div > ul > .current-menu-item > a, #navmain > div > ul > .current-menu-ancestor > a,
    #navmain > div > ul > li > a:hover {
    color:#656565;
    }


    #navmain a:hover {
    text-decoration:none;
    }


    article,
    aside {
    -ms-word-wrap: break-word;
    word-wrap: break-word;
    }


    /* main content */
    #main-content,
    #container {
    overflow:hidden;
    padding:10px 0 0 0;
    }


    #main-content > article:first-of-type h1 {
    margin-top:0;
    padding-top:0;
    }


    /* sidebar */
    #sidebar {
    overflow:hidden;
    padding:10px 0 0 0;
    }


    #sidebar ul:not(.social-widget) > li:before,
    article ul > li:before {
    content:"\f105";
    font-family:'FontAwesome';
    display:inline-block;
    margin:0 5px 0px 1px;
    opacity:0.7;
    }


    #sidebar > ul {
    margin-left:3px;
    }


    #sidebar .widget {
    margin-bottom:5px;
    clear: both;
    }


    #infoTxt {
    padding:10px 0 10px 0;
    }


    article ul > li:before {
    font-family:'FontAwesome';
    content:"\f105";
    display:inline-block;
    text-align:center;
    margin:0 7px 7px 0;
    }


    article {
    clear:both;
    }


    .separator {
    }


    #copyright {
    clear:both;
    text-align:center;
    }


    input[type="text"],
    input[type="email"],
    input[type="url"],
    textarea {
    border:1px solid #B2AEA3;
    padding:4px;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    -ms-border-radius:3px;
    -o-border-radius:3px;
    border-radius:3px;
    }


    input[type="submit"],
    button {
    font-size:14px;
    }


    input[type="submit"],
    button,
    .btn,
    #container .button {
    padding:8px 12px;
    text-decoration:none;
    font-weight:normal;
    border:none;
    color:#ffffff;
    background-image: -ms-linear-gradient(top, #FFF000 0%, #639200 100%);
    background-image: -moz-linear-gradient(top, #FFF000 0%, #639200 100%);
    background-image: -o-linear-gradient(top, #FFF000 0%, #639200 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFF000), color-stop(1, #639200));
    background-image: -webkit-linear-gradient(top, #FFF000 0%, #639200 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FFF000', endColorstr='#639200');
    background-image: linear-gradient(top, #FFF000 0%, #639200 100%);
    text-shadow:0 !important;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    -ms-border-radius:3px;
    -o-border-radius:3px;
    border-radius:3px;
    }


    input[type="submit"]:hover,
    button:hover,
    #container .button:hover,
    .btn:hover {
    color:#ffffff;
    background-image: -ms-linear-gradient(top, #639200 0%, #FFF000 100%);
    background-image: -moz-linear-gradient(top, #639200 0%, #FFF000 100%);
    background-image: -o-linear-gradient(top, #639200 0%, #FFF000 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #639200), color-stop(1, #FFF000));
    background-image: -webkit-linear-gradient(top, #639200 0%, #FFF000 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#639200', endColorstr='#FFF000');
    background-image: linear-gradient(top, #639200 0%, #FFF000 100%);
    text-decoration:none;
    }


    .btn {
    margin-top:10px;
    display:inline-block;
    }


    #respond {
    clear:both;
    }


    blockquote:before,
    q:before {
    font-family:'FontAwesome';
    content: "\f10d";
    color:#DEDEDE;
    font-size:36px;
    float:left;
    margin:0 1% 0 0;
    }


    blockquote, figure {
    margin:0 1%;
    }


    .page-links, .post-links {
    padding:10px 0 3px 0;
    margin:0;
    }


    .navigation .current,
    .navigation .page-dots,
    .navigation .page-numbers {
    font-size:16px;
    text-align:center;
    display:inline-block;
    float:left;
    }


    .navigation .page-dots,
    .navigation .page-numbers {
    padding:5px 11px;
    border:1px solid #dddddd;
    margin-right:10px;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    -ms-border-radius:3px;
    -o-border-radius:3px;
    border-radius:3px;
    }


    .navigation .current,
    .navigation .current:hover {
    text-decoration:none;
    background:#dddddd !important;
    text-align:center;
    margin-right:10px;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    -ms-border-radius:3px;
    -o-border-radius:3px;
    border-radius:3px;
    }


    .navigation .page-numbers:hover {
    text-decoration:none;
    background:#fafafa;
    text-align:center;
    }

  • Hallo,

    entschuldige ich meine das Theme Landshafting.

    Kann ich den Text auch mithilfe der DevTools im Browser probeverschieben und dann an der geeigneten Stelle
    im Editor formatieren?


  • Kann ich den Text auch mithilfe der DevTools im Browser probeverschieben und dann an der geeigneten Stelle
    im Editor formatieren?


    Mit dem Editor bearbeitest Du Texte, die Formatierung wird vom Theme bestimmt, definiert wird sie wiederum durch CSS-Anweisungen.

    Und eben: Ohne Link zur Website bleibt alles sehr theoretisch.

  • Hi Edi,

    ich würde ja auch gerne erstmal die Theorie verstehen wie man ganz im allgemeinen vorgeht, um bestimmte Dinge
    zu verändern. Habt bitte Verständnis, dass ich den Link aktuell nicht reinstelle. Bin da ein bißchen paranoid :shock:

    Es gibt doch bestimmt immer den selben Code zur Verschiebung von beispielsweise Texten sowie man bei dem Zeilenabstand
    auch immer die line-height mit einer bestimmten Zahl angeben muss.

    Wie gehst du normalerweise bei solchen Dingen vor, wenn du bestimmte Dinge an einer Internetseite verändern möchtest?

  • Sorry, WordPress, PHP, JavaScript, CSS usw. müsstest Du Dir selber beibringen oder einen Kurs in Deiner Nähe besuchen. Ich denke, dass hier nicht allzu viel Interesse daran besteht, eine Schritt für Schritt Einführung zu geben, und morgen oder übermorgen bittet jemand um dasselbe... Ganz abgesehen davon, dass das etwa dasselbe wäre, wie jemandem in einem Forum das Autofahren beibringen zu wollen.

    Als Ausgangspunkte eignen sich etwa

    https://wiki.selfhtml.org/wiki/Startseite

    und

    http://www.w3schools.com/

    Wenn Du das Ganze in WordPress einfacher haben möchtest, dann nimm einen Page Builder, dort kannst Du Module usw. formatieren.

    Einmal editiert, zuletzt von Edi (11. Dezember 2016 um 16:11)


  • Es gibt doch bestimmt immer den selben Code zur Verschiebung von beispielsweise Texten

    Nein, leider nicht. Das Design einer Seite ergibt sich aus Struktur (HTML) und Formatierung (CSS). Es gibt sehr viele unterschiedliche Möglichkeiten, ein und das selbe Design zu erreichen.

    Hat man eine Seite nicht selbst erstellt (was ja der Fall ist, wenn man ein fertiges Theme verwendet), wäre die übliche Vorgehensweise:
    Man schaut sich die aktuelle Seite mit den Developers Tools an. Dann beurteilt man, ob man mit CSS allein weiterkommt (geht oft, aber nicht immer) oder ob man die Struktur ändern muss. Dann ändert man entweder Struktur und CSS oder eben nur CSS, wenn das ausreicht.

  • Nein, leider nicht. Das Design einer Seite ergibt sich aus Struktur (HTML) und Formatierung (CSS).

    Aber die Vorgehensweisen und Formatierungs-Befehle (CSS), die sind doch immer gleich, oder? Das heißt, wenn ich beispielsweise die Schriftart ändern möchte, dann gehe ich eigentlich immer in den Body und gibt dort die gewünschte Schriftart ein. Gilt das nicht auch für Textverschiebungen, Bearbeitung von
    Sitebars etc., so dass man eine Art Checkbuch hat, das fast immer gleich abgearbeitet wird?

    Danke für eure Hilfe, trotz der laienhaften Fragen

  • Aber die Vorgehensweisen und Formatierungs-Befehle (CSS), die sind doch immer gleich, oder? Das heißt, wenn ich beispielsweise die Schriftart ändern möchte, dann gehe ich eigentlich immer in den Body und gibt dort die gewünschte Schriftart ein. Gilt das nicht auch für Textverschiebungen, Bearbeitung von
    Sitebars etc., so dass man eine Art Checkbuch hat, das fast immer gleich abgearbeitet wird?

    Danke für eure Hilfe, trotz der laienhaften Fragen

    Jein. Die Vorgehensweise ist immer oder oft dieselbe, aber wo was definiert wird, hängt von der Struktur des Themes ab. Zudem ist CSS eine Beschreibungssprache mit eigenen Regeln. Beispielsweise ist sie eben kaskadierend. Das heisst auch, dass "unterhalb" des body andere Tags, Klassen und IDs und ihre Kombinationen eine Rolle spielen können.

    Noch einmal: Theoretisch kommst Du da nicht weit.

    Und wie danielgoehr geschrieben hat: Es gibt immer verschiedene Möglichkeiten.

  • Jein. Die Vorgehensweise ist immer oder oft dieselbe, aber wo was definiert wird, hängt von der Struktur des Themes ab. Zudem ist CSS eine Beschreibungssprache mit eigenen Regeln. Beispielsweise ist sie eben kaskadierend. Das heisst auch, dass "unterhalb" des body andere Tags, Klassen und IDs und ihre Kombinationen eine Rolle spielen können.

    Kann ich über die Entwicklertools im Browser alle Design-Einstellungen vorher ausprobieren, so dass ich weiß, was zu wem gehört und
    mit welchen Hebeln ich die gewünschte Dinge verstellen kann?

    Ist es möglich außer die Standard-Formatierung aus dem Body wie Schriftart, -farbe... auch das Menü mit den Reitern von der Größe und Farbe her
    zu verstellen?

  • Kann ich über die Entwicklertools im Browser alle Design-Einstellungen vorher ausprobieren, so dass ich weiß, was zu wem gehört und
    mit welchen Hebeln ich die gewünschte

    Dinge verstellen kann?

    Ja kannst du theoretisch. Aber es ist halt flüchtig und für manche Dinge musst du sehr viele unterschiedliche Dinge ändern. Ob du dann im Nachhinein noch weißt, was du getan hast, um ans Ziel zu kommen, ist die Frage.



    Ist es möglich außer die Standard-Formatierung aus dem Body wie Schriftart, -farbe... auch das Menü mit den Reitern von der Größe und Farbe her
    zu verstellen?

    Ja das ist möglich. Das ist Sinn der Vererbung und des Überschreibens von Eigenschaften. Und das ist auch genau der Grund, warum deine Annahme, Schriften, Zeilenabstände etc. seien immer im body definiert, nicht stimmt.

    Wenn du es wirklich lernen willst, schlage ich vor, du befasst dich erstmal mit den Grundlagen von HTML und CSS. Du musst halt erstmal verstehen, wie das Prinzip dahinter funktioniert.
    So stellt du immer sehr spezifische Fragen, die dich aber nicht wirklich weiterbringen werden, wenn du das Prinzip dahinter nicht verstanden hast.


  • Wenn du es wirklich lernen willst, schlage ich vor, du befasst dich erstmal mit den Grundlagen von HTML und CSS. Du musst halt erstmal verstehen, wie das Prinzip dahinter funktioniert.
    So stellt du immer sehr spezifische Fragen, die dich aber nicht wirklich weiterbringen werden, wenn du das Prinzip dahinter nicht verstanden hast.


    Ich weiß, dass sind alles sehr spezifische Fragen. Das Problem ist bloß, dass ich nicht genug Zeit habe, um mich voll in das Thema einzuarbeiten.
    Ich möchte relativ zügig eine Seite konzipieren, die nicht unbedingt sehr viele Funktionen hat, aber vom Design her ansprechend ist.
    Also alles sehr spartanische gehalten, aber mit klarer Navigation.

    Dazu benötige ich: 1) Die Anpassung des Menüs = Veränderung der Farbe, Größe...
    2) Einfügen von Tabellen, Bildern, Icons
    3) Kleine Formatierungen wie Linkfarbe...

    Die Webseite soll keinesfalls bis ins Detail professionell sein, daher dachte ich, dass ich die jeweiligen Probleme hier einigermaßen klären könnte.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!