Anpassung twentythirteen auf fullwidth

Moin,

ich versuche nun schon länger :-( das Theme twentythirteen mittels child-Theme auf volle Breite zu ändern.
Sonstige Änderungen mittels Änderung der style.css funktionieren.
Momentan sieht es so aus:

style.css

/*
LAYOUT: Seitentitel
*/
.entry-title { text-decoration: underline overline; 
}


/*
LAYOUT: One column, no sidebar
DESCRIPTION: One centered column with no sidebar
*/


.one-column #content {
margin: 0 auto;
width: 640px;
}


/*
LAYOUT: Full width, no sidebar
DESCRIPTION: Full width content with no sidebar
*/


.full-width #content {
margin: 0 auto;
width: 900px;
}

Vergrößerung der Pixelzahl bewirken nur das der Seitentitel nach links verschoben wird, der eigentliche Seitentext jedoch nicht.

fullwidth.php

<?php
/**
 * The template for displaying all pages
 *
 * Template Name: Full Width
 * Please note that this is the WordPress construct of pages and that other
 * 'pages' on your WordPress site will use a different template.
 *
 * @package WordPress
 * @subpackage Twenty_Thirteen
 * @since Twenty Thirteen 1.0
 */


get_header(); ?>
<div id="container" class="fullwidth">
<div id="content" role="main">


<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<h1 class="entry-title"><?php the_title(); ?></h1>
<div class="entry-content">
<?php the_content(); ?>
<?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', 'Clearness' ), 'after' => '</div>' ) ); ?>
<?php edit_post_link( __( 'Edit', 'Clearness' ), '<span class="edit-link">', '</span>' ); ?>
</div><!-- .entry-content -->
</div><!-- #post-## -->
<?php comments_template( '', true ); ?>
<?php endwhile; ?>


</div><!-- #content -->
</div><!-- #container -->


<?php get_footer(); ?>

Zitat von Woogie-Design

denn dann wird Dein Contentbereich bereits größer ;)

Eben leider nicht ... Ich möchte den Bereich Content gern auf volle Breite bringen. Die Formatierung des Seitentitels muss dafür vermutlich ganz weg.
online: http://www.claudiakochale.de

Zitat von SirEctor

Du musst auch die Werte bei max-width in der CSS beachten. Hier wird oft 604px oder 1600px angegeben.

Hab ich mal versucht, null Effekt:

Zitat

/*
LAYOUT: One column, no sidebar
DESCRIPTION: One centered column with no sidebar
*/

.one-column #content {
margin: 0 auto;
width: 100%;
max-width: 1600px;
}

/*
LAYOUT: Full width, no sidebar
DESCRIPTION: Full width content with no sidebar
*/

.fullwidth #content {
margin: 0 auto;
width: 100%;
max-width: 1600px;
}

[COLOR=#ff0000].site-info[/COLOR] {
margin: 0 auto;
[COLOR=#ff0000]max-width: 1600px[/COLOR];
width: 100%;
background-color: #09F;
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
color: #0C0;
}

Alles anzeigen

Im footer mit .site-info funktioniert es aber mit max-width: 1600px - der blaue footer ist nun auf voller Breite.

Ich hatte den Verdacht, dass der angezeigte Seitentitel die volle Contentbreite verhindern könnte.

Es gilt ja folgendes:
display: none unterdrückt die Darstellung eines Elements, so dass es keinen Raum im Dokument einnimmt (im Gegensatz zu der Eigenschaft visibility: hidden, die ein Element unsichtbar macht, aber seinen Raum erhält).

Aber auch das Ausblenden des Seitentitels mit

Zitat

.entry-title { display: none;}

brachte keine Änderung der Content-Breite.

Yepp !

Zitat

.entry-content {
max-width: 1024px;
width: 100%;

hat schon genügt.

Vielen Dank !!

Ich habe nun etwas entmüllt.
Die fullwidth.php gelöscht (war ja nur als Template für einzelne Seiten gedacht - ist aber überflüssig, weil alle Seiten mit .entry-content auf voller Breite sein sollen).
Die child-style.css sieht bereinigt (bis auf die Experimente mit .site-title,.site-description background-color) nun so aus:

.site-title,
.site-description {
    background-color: hsla(30, 50%, 45%, 1);
    opacity: 0,5; 
    filter:Alpha(Opacity=50);
}




/*
LAYOUT: ohne Seitentitel
*/


.entry-title { display: none;}




/*
LAYOUT: Seitenbreite
*/


.entry-content  {
    max-width: 1024px;
    width: 100%;
}


/*
FOOTER
*/
.site-info {
    margin: 0 auto;
    max-width: 1600px;
    width: 100%;
    background-color: #09F;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 16px;
    color: #0C0;
    }

responsive funktioniert aber scheinbar bei mir.
Nicht ganz klar bezüglich responsive sind mir max-width und width ?

Die max-width Eigenschaft wird verwendet, um die maximale Breite eines Elements festzulegen. 
Das verhindert, dass der benutzte Wert der [URL="https://developer.mozilla.org/de/CSS/width"]width[/URL] Eigenschaft nicht größer wird als der festgelegte Wert von max-width.

Danach müsste doch:

.entry-content  {
    max-width: 1024px;
    width: 100%;
}

korrekt

bzw. das falsch :

.entry-content  {
    max-width: 100%;
    width: 1024px;
}

sein.

ok.

Noch etwas anderes ;) ...

Ich möchte hinter .site-title sowie .site-description einen teil-transparenten Hintergrund (zur besseren Lesbarkeit bei uneinheitlichem Hintergrundbild) einfügen.

Offenbar sind aber im twentythirteen-Theme beide Einträge einzeln definiert, so dass leider auch zwei einzelne Hintergrundboxen entstehen, die natürlich so nicht bleiben können.

Der code für den Hintergrund siehr derzeit so aus:

.site-title,
.site-description, 
.div.transbox {
    margin: 5px;
    background-color: rgba(0,0,0,0.5);
    border: 2px solid black;
    height: 95px;
    width: 420px;
}

Alles Quatsch ...
Das Hintergrundbild bekommt den Titel einfach per Photoshop ...