Ondersteuning » Thema en CSS/opmaak » Tekstvakken breder maken

  • Ik ben het een paar keer tegengekomen, maar of het is bij mij anders of ik kan het niet vinden.
    Mijn tekstvakken van de pagina’s zou ik breder willen hebben, dan denk ik gelijk ook dat mijn foto albums breder worden? Nu heb ik daarvan alle foto’s onder elkaar staan. Mooie is b.v. 3 naast elkaar en dan naar beneden.

    Maar in eerste instantie gaat het dus om mijn tekst vak breedte.
    http://www.p-wrekenhorst.nl

    Mijn dank is groot.

7 reacties aan het bekijken - 1 tot 7 (van in totaal 7)
  • Hoi Peter,

    De breedte van de inhoud wordt in je thema bepaald door <div class="entry-content">.

    In de CSS (style.css) vind je dat terug als:

    .site-content .entry-header,
    .site-content .entry-content,
    .site-content .entry-summary,
    .site-content .entry-meta,
    .page-content {
        margin: 0 auto;
        max-width: 474px;
    }

    Je kunt dit kopiëren naar een child theme, of naar een custom CSS plugin (of via de Custom CSS module in Jetpack) en de max-width aanpassen. De margin hoef je niet op te nemen…

    .site-content .entry-header,
    .site-content .entry-content,
    .site-content .entry-summary,
    .site-content .entry-meta,
    .page-content {
        max-width: 518px;
    }

    518px is net breed genoeg om 2 kolommen te vormen in je album.

    Thread starter Petertje

    (@petertje)

    uuuh, dank voor je antwoord.
    Het stuk van de CSS heb ik gevonden dus dat snap ik nog, maar zoals ik begrijp kan ik die dus niet aanpassen omdat een vaste template is?
    Ik moet dus naast deze een tweede template plaatsen en die kan ik wel aanpassen…mmmm, klinkt simpel maar is het nog niet voor mij.
    Ik zal me eens verdiepen in Child Theme van de week, nogmaals dank.

    Het makkelijkste is om een Custom CSS plugin te activeren, Peter.

    Als de Jetpack plugin reeds geïnstalleerd is kun je daar de Custom CSS module activeren. Anders kun je bv. Simple Custom CSS installeren. Na activatie vind je een textarea waar je de bovenstaande code met max-width gewoon in kunt plakken, opslaan en klaar.

    Thread starter Petertje

    (@petertje)

    Ik heb de Simple Custom CSS geïnstalleerd en de bovenstaande code erin geplakt, echter veranderd er op mijn pagina niets.
    Hieronder de hele code waarin dus het bovenstaande in geplakt is.

    <?php
    /**
    * Plugin Name: Simple Custom CSS
    * Plugin URI: http://johnregan3.github.io/simple-custom-css
    * Description: The simple, solid way to add custom CSS to your WordPress website. Simple Custom CSS allows you to add your own styles or override the default CSS of a plugin or theme.
    * Author: John Regan, Danny Van Kooten
    * Author URI: http://johnregan3.me
    * Version: 3.2
    * Text Domain: sccss
    *
    * Copyright 2014 John Regan (email : john@johnregan3.com)
    *
    * This program is free software; you can redistribute it and/or modify
    * it under the terms of the GNU General Public License, version 2, as
    * published by the Free Software Foundation.
    *
    * This program is distributed in the hope that it will be useful,
    * but WITHOUT ANY WARRANTY; without even the implied warranty of
    * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
    * GNU General Public License for more details.
    *
    * You should have received a copy of the GNU General Public License
    * along with this program; if not, write to the Free Software
    * Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA
    *
    * @package SCCSS
    * @author John Regan
    * @version 3.2
    */

    // Prevent direct file access
    if( ! defined( ‘ABSPATH’ ) ) {
    die();
    }
    .site-content .entry-header,
    .site-content .entry-content,
    .site-content .entry-summary,
    .site-content .entry-meta,
    .page-content {
    max-width: 518px;
    }
    if( ! is_admin() ) {
    require_once dirname( SCCSS_FILE ) . ‘/includes/public.php’;
    } elseif( ! defined( ‘DOING_AJAX’ ) ) {
    require_once dirname( SCCSS_FILE ) . ‘/includes/admin.php’;
    }

    Hey Peter,

    Sorry voor mijn late reactie. Zo zal dit inderdaad niet werken. Je hebt CSS code geplakt in een PHP bestand. Dat zijn twee verschillende talen. Maar het belangrijkste is dat je bij plugins nooit iets hoeft te veranderen aan de code zelf. Die zorgen er nl. specifiek voor dat je iets kunt aanpassen van in de WordPress admin, of gewoon door de plugin te activeren.

    De Simple CSS plugin voegt een textarea toe in het menu: “Weergave > Custom CSS”. Daar kun je die CSS dus in plakken. Zie de screenshot voor een voorbeeld.

    Thread starter Petertje

    (@petertje)

    Hoi Axel

    GOED nieuws, hij doet het nu.
    Achteraf….simpel, maar zonder info of hulp van een ander was ik er nooit achter gekomen.
    Mijn absolute dank voor je hulp en alvast een prettig weekend toegewenst.

    Groetjes Peter

    Graag gedaan, Peter.
    Zodra je weet hoe het moet of kan, is alles makkelijk… En geen seconde vroeger 🙂
    Ook goed weekend (& beyond)!

7 reacties aan het bekijken - 1 tot 7 (van in totaal 7)
  • Het onderwerp ‘Tekstvakken breder maken’ is gesloten voor nieuwe reacties.