Jeder Post in eigenem div?

mareike

Hallo zusammen,

ich habe ein Problem mit meinem Blog http://www.chaosparadies.net. Ich nutze das Theme "Scrapbook" und würde gerne folgende Änderungen vornehmen: Momentan ist ja dieses abgerissene Blatt Papier auf der kompletten Seite, ich hätte aber gerne dieses Papier hinter jedem Post.

In der loop.php findet sich unter anderem folgender Code:

PHP

<!-- start post -->
<div <?php post_class();?>>
<h2 class="post-title" id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute( array('before' =>__( 'Permanent Link for ','scrapbook'), 'after' => '')); ?>"><?php the_title(); ?></a></h2>


<ul class="meta">
<li><?php the_time(get_option( 'date_format' )); ?> <?php the_time(get_option( 'time_format' )); ?></li>
<li><?php edit_post_link(__('Edit','scrapbook') ); ?></li>
</ul>


<?php
if(get_the_post_thumbnail( $post->ID) ) {
	the_post_thumbnail();
	the_excerpt();
}
else the_content('', false,'');?>

Alles anzeigen

Ich vermute mal, dass ich an dieser Stelle entsprechend den Code irgendwie ändern muss, um jeden Post in einen eigenen div-Container zu packen? Nur weiß ich leider nicht wirklich, wie ich das anstellen soll :?: :?: :?:

Ich habe mir angeguckt, wie der Code in der CSS aussieht, daraus geht hervor, dass sich der obere Rand des Blattes im Header und der untere im Footer befindet. Die offenbar relevanten Teile der color.css sind folgende:

HTML

/* WRAPPER-TOP */
#wrapper-top {
 	background:#F8F4EE url(images/wrapper-top.jpg) repeat-x;
}
#wrapper-top-left {
 	background:url(images/wrapper-top-left.jpg) no-repeat left top;
}
#wrapper-top-right {
 	background:url(images/wrapper-top-right.jpg) no-repeat right top;
}


#wrapper {
 	background:url(images/back-right.jpg) right top repeat-y;
}
#innerwrap {
	background:#F8F4EE;
}


/* FOOTER */
#footer {
 	background:#F8F4EE url(images/bottom.jpg) repeat-x bottom left;
}
#footer-left {
 	background:url(images/bottom-left.jpg) no-repeat bottom left;
}
#footer-right {
 	background:url(images/bottom-right.jpg) no-repeat bottom left;
}


/* LAYOUT */
#container {
 	background:url(images/back-left.jpg) top left repeat-y;
	color:#606060;
}

Alles anzeigen

(das sind natürlich nur Auszüge aus der Datei)

Mir fehlt bei der ganzen Sache echt irgendwie der Ansatz :-(

LG Mareike

Werbepost

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

Monika

da brauchst nicht 1 Div sondern deren mehrere

weil das Blatt Papier besteht aus den Teilen

links oben - rechts oben
Mitte
links unten - rechts unten
Mitte des Footer Bereichs

d.h

div class mit Bild von wrapper top
div class mit Bild von wrapper top left

div class mit Bild von wrapper top right

dann div class mit dem Bild aus wrapper

nun endlich der Inhalt also das was alles als "Artikel ausgegeben wird ;)

dann wieder eine div Orgie mit den Teilen des Themes aus dem Footer

kommst damit klarer?

mareike

Ja das dachte ich mir schon, dass ich mehrere brauche. Mit dem CSS komme ich auch klar, ich weiß nur nicht, wie ich das in dem PHP-Code mache. :-(

Aber trotzdem schonmal Danke!

Tutrix

Du kannst auch mit nur 2 zusätzlichen div arbeiten.

sieht dann so aus

PHP

<div class="posttop"></div>
<div <?php post_class();?>> Inhalt </div>
<div class="postbottom"></div>

der Code für die css

Code

.posttop {
    background: none repeat scroll 0 0 #000000;
    height: 20px;
}
.postbottom {
    background: none repeat scroll 0 0 #000000;
    height: 20px;
    margin-bottom: 10px;
}

und das

Code

.post {
    clear: left;
    margin: 0 0 10px;
    padding: 0 0 10px;
}

ändern in

Code

.post {
    background: none repeat scroll 0 0 #FF0000;
    clear: left;
    margin: 0;
    padding: 0 0 10px;
}

in diesem Beispiel sind jetzt als "background" nur Farben definiert, dies musst du dann natürlich durch deine erstellten Grafiken ersetzen und die Höhe entsprechend anpassen.
Zum Testen kannst du es aber schon mal einsetzen, damit du siehst das es funktioniert.

Monika

alles zwischen diesem div

PHP

<div <?php post_class();?>>

[COLOR=#000000]

und dem Ende dieses divs ist 1 Artikel
[/COLOR]

mareike

Super, danke, mit den Farben funktioniert schonmal :-)

Wenn ich oben und unten je nur einen div nehme, muss ich aber aus den 3 Bildern (linke Ecke, "Mittelteil", rechte Ecke) eine Grafik machen oder?

Tutrix

hab das mal schnell zusammengebastelt ;-)

Code

.post {
    clear: left;
    margin: 0 0 10px;
    padding: 0 0 10px;
}

ändern in

Code

.post {
    background: url(images/postbg.png) repeat-y scroll 0 0 #FFFFFF;
    clear:left;
    margin:0;
    padding:0 30px;
}

das

Code

.postfoot {
    clear: left;
    margin: 10px 0;
    padding: 5px 0 10px;
}

ändern in

Code

.postfoot {
    clear: left;
    margin: 0;
    padding: 5px 0 10px;
}

das hinzufügen

Code

.posttop {
    background: url(images/posttop.png) no-repeat scroll 0 0 #FFFFFF;
    height: 58px;
}
.postbottom {
    background: url(images/postbottom.png) no-repeat scroll 0 0 #FFFFFF;
    height: 58px;
}

diese Grafiken
http://www.file-upload.net/download-37761…afiken.zip.html
in den images-Ordner des Themes

ach ja und außer in der loop.php, die 2 div auch noch in die single.php einfügen

mareike

Vielen vielen Dank, es hat jetzt so geklappt! Dann werde ich mich jetzt mal an den Sidebar-Elementen versuchen, das sollte ja auf eine ähnliche Art und Weise in der Sidebar.php funktionieren.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Jeder Post in eigenem div?

Jetzt mitmachen!