Ondersteuning » Thema en CSS/opmaak » Showcase pagina in TwentyEleven aanpassen

  • Ik zoek hulp bij het volgende probleem;

    Voor één van mijn websites (http://www.oceanoclub.com/wp) heb ik het TwentyEleven-theme aangepast.

    Ik gebruik op alle pagina’s de page-template showcase. Dit zorgt ervoor dat de content over de hele breedte van de website word getoond. Ook is de marge bovenin minimaal.

    Nu wil ik op een aantal pagina’s een menu onder aan de pagina. Ik dacht dit op te lossen door een kopie te maken van showcase.php en deze te hernoemen. Op het moment dat ik de page-template verander in de aangepaste template word de margin-top ook een stuk groter.

    Nu heb ik in style.css de volgende regels gevonden:

    .page-template-showcase-php #primary,
    .left-sidebar.page-template-showcase-php #primary {
    	margin: 0px 0 0 0;
    }
    .page-template-showcase-php #content,
    .left-sidebar.page-template-showcase-php #content {
    	margin: 0px 0 0 7.6%;
    	width: auto;
    }
    .page-template-showcase-php section.recent-posts {
    	float: right;
    	margin: 0px 0 0 31%;
    	width: 69%;
    }
    .page-template-showcase-php #main .widget-area {
    	float: left;
    	margin: 0px -22.15% 0 0;
    	width: 22.15%;
    }

    Ik heb het idee dat het hierin te vinden is, maar ik heb “showcase” in deze code al veranderd door de naam van mijn nieuwe page-template, maar dit gaf helaas niet het gewenste effect.

    Heeft iemand hier een goede oplossing voor?

5 reacties aan het bekijken - 1 tot 5 (van in totaal 5)
  • Als je verstand hebt van CSS voer dit eens uit, het kan niet moeilijk zijn en ik neem aan dat je ma dan eenvoudig kan volgen..
    Ik sta in versnelling 6

    Het idee is goed wat je doet.

    Maar ik neem aan dat je de standaard Showcase template wel nog wilt gebruiken voor alle andere pagina’s ?

    Dus dan moet je showcase.php template dupliceren en dan hernoemen naar bijv. test.php (of iets anders natuurlijk maar ik gebruik even test) maar ook binnen in deze nieuwe ’test.php’ template moet je dan bovenaan de template dit Template Name: Showcase aanpassen naar Template Name: Test.

    Zodat als je een nieuwe pagina gaat aanmaken je dan ook de keuze hebt om een test template aan te maken.

    Maar dat is niet alles.
    Dan moet je via CSS gaan stijlen en die code die jij hierboven laat zien is voor de showcase template zodra jij deze dupliceert naar een test.php template zal de code er ook anders uit gaan zien.

    kijk eens naar deze aangepaste code, zie je wat ik nu gedaan hebt?

    .page-template-test-php #primary,
    .left-sidebar.page-template-test-php #primary {
    	margin: 0px 0 0 0;
    }
    .page-template-test-php #content,
    .left-sidebar.page-template-test-php #content {
    	margin: 0px 0 0 7.6%;
    	width: auto;
    }
    .page-template-test-php section.recent-posts {
    	float: right;
    	margin: 0px 0 0 31%;
    	width: 69%;
    }
    .page-template-test-php #main .widget-area {
    	float: left;
    	margin: 0px -22.15% 0 0;
    	width: 22.15%;
    }

    Nu heb je eigenlijk 2 precies dezelfde (showcase) templates gemaakt alleen moet je nu nog de stijlen gaan aanpassen om ze uniek te maken van elkaar. Dus verander niet jouw code met de mijne maar voeg mijn code toe anders werkt straks de originele Showcase niet meer.

    Als je een Menu onderaan de test.php template wilt dan zal je daar een nieuwe moeten plaatsen omdat het hoofdmenu in de header zit. Dus een nieuw menu registeren in de functies.php.

    Zoek deze code op in de functions.php

    // This theme uses wp_nav_menu() in one location.
    	register_nav_menu( 'primary', __( 'Primary Menu', 'twentyeleven' ) );

    En maak er dit van:

    // This theme uses wp_nav_menu() in one location.
    	register_nav_menu( 'primary', __( 'Primary Menu', 'twentyeleven' ) );
    	register_nav_menu( 'secondary', __( 'Secondary Menu', 'twentyeleven' ) );

    WOW je hebt nu ineens twee Menu-opties in je Dashboard. 😉

    Het enige dat je nu nog moet doen is het tweede menu een plaatsje geven binnen je website. En die hadden we al in gedachte onderaan ergens op de test.php template.
    Dus openen we test.php weer en gaan we kijken waar we deze code kunnen plaatsen.

    <?php wp_nav_menu( array( 'theme_location' => 'secondary ) ); ?>

    Je mag natuurlijk zelf bepalen waar je dit tweede menu wilt plaatsen als het maar ergens binnen de <div id=”content”> is.

    Dashboard > Weergave > Menu’s en een tweede menu aanmaken en toevoegen.

    Nu nog je tweede menu stijlen zodat het allemaal mooi bij het thema past maar daar kom je wel uit als je kijkt naar het hoofdmenu en je een beetje verstand hebt van CSS 🙂

    Succes.
    Je hebt een begin.

    Thread starter QuincyRossieau

    (@quincyrossieau)

    Beste Shmoo,

    Bedankt voor je reactie. Deze methode had ik zelf ook bedacht en geprobeerd, maar dit gaf geen effect. Ik heb het nog eens geprobeerd met ´Test´, misschien had ik ergens een typefout gemaakt, maar helaas, geen succes.

    Je kunt het verschil zien bij de volgende pagina´s:

    Dit is met de Showcase template


    Dit is met de nieuwe Test-template

    Thread starter QuincyRossieau

    (@quincyrossieau)

    Ik zal trouwens ook even de code toevoegen van de Showcase-template, misschien zie ik ergens nog is over het hoofd.

    <?php
    /**
     * Template Name: Showcase Template
     * Description: A Page Template that showcases Sticky Posts, Asides, and Blog Posts
     *
     * The showcase template in Twenty Eleven consists of a featured posts section using sticky posts,
     * another recent posts area (with the latest post shown in full and the rest as a list)
     * and a left sidebar holding aside posts.
     *
     * We are creating two queries to fetch the proper posts and a custom widget for the sidebar.
     *
     * @package WordPress
     * @subpackage Twenty_Eleven
     * @since Twenty Eleven 1.0
     */
    
    // Enqueue showcase script for the slider
    wp_enqueue_script( 'twentyeleven-showcase', get_template_directory_uri() . '/js/showcase.js', array( 'jquery' ), '2011-04-28' );
    
    get_header(); ?>
    
    		<div id="primary" class="showcase">
    			<div id="content" role="main">
    
    				<?php while ( have_posts() ) : the_post(); ?>
    
    				<?php
    					/**
    					 * We are using a heading by rendering the_content
    					 * If we have content for this page, let's display it.
    					 */
    					if ( '' != get_the_content() )
    						get_template_part( 'content', 'intro' );
    				?>
    
    				<?php endwhile; ?>
    
    			</div><!-- #content -->
    		</div><!-- #primary -->
    
    <?php get_footer(); ?>

    Ik heb dus een kopie van showcase.php hernoemd naar test.php en in bovenstaande code heb ik de Template Name veranderd in Test Template.

    Je doet alles perfect en het werkt ook.

    Kijk maar
    http://i50.tinypic.com/2vlvcyo.png

    Wat je nu moet doen is bepaalde pagina’s aanspreken met CSS.
    In de body tag wordt er verwezen naar de template kijk maar naar mijn screenshot en de pijlen.

    Wat je nu moet doen is in de CSS gaan werken.

    body .page-template-test-php {
    …..
    }

    Ook kun je de tweede “showcase” class aanpassen in de test.php template (pijl twee)

    Thread starter QuincyRossieau

    (@quincyrossieau)

    Bedankt voor je hulp!

    Als ik het nu goed begrijp moet ik nu in style.css de test-template opnieuw op gaan maken?
    Het idee achter het dupliceren van showcase.php was dat ik de css van die template kon gebruiken.

    Ik zie in style.css verder ook weinig code waarin page-template-showcase-php in verwerkt is, dus die ik zou moeten dupliceren.

5 reacties aan het bekijken - 1 tot 5 (van in totaal 5)
  • Het onderwerp ‘Showcase pagina in TwentyEleven aanpassen’ is gesloten voor nieuwe reacties.