Banner Städteflüge gif 120x600

Artikel in WordPress mit Cascading Style Sheets verändern

1. Artikel in WordPress mit Cascading Style Sheets verändern

2. Artikel mit Page Template zuweisen

Einen Artikel ein bestimmtes Aussehen verpassen! Aber wie? Ein extra Template erstellen-macht keinen Sinn, weil der Artikel immer zuerst über die single.php geöffnet wird – ist diese nicht da, wird die page.php oder die index.php geöffnet. Das Artikel Bild soll nicht im Artikel also nicht inder single.php vorkommen, sondern nur in der Front Page. Die Lösung dazu:

Es wird eine neue single.php mit folgenden Inhalt geschrieben, die dann von WordPress angesprochen werden kann und diese verweist sofort auf die eigentliche Datei die single-kategorie.php 

 

single-php

Aussehen verändern

So kann das Aussehen der Artikel unterschiedliche Layouts annehmen. Bei mir kam die Idee ein Rezepte und deren Zubereitung so zu gestalten, dass in der linken oder rechten Spalte die Zutaten enthalten sind und in der Mitte die Zubereitung beschrieben wird. Alles auf einem Blick und gut geordnet.
Die Hintergrundfarbe für dieses div wird nur für die Länge des Inhalts angezeigt. Sollten Sie eine Trennlinie bevorzugen, fügen Sie der CSS-Regel des entsprechenden Divs (#sidebar oder #mainContent) eine Rahmen-Eigenschaft hinzu.

Dem Artikel über Cascading Style Sheets unterschiedliches Layout zuweisen !

1.In die Cascading Style Sheets einen separaten Code hinzufügen.
2.Artikel neu erstellen den HTML Code entsprechend anpassen.

So könnte die Cascading Style Sheets aussehen mit drei Spalten! Diese kann entweder in die style.css des Templates geschrieben werden oder als seperate.css verwendet werden.

 

.dreispaltenfixiert #container {
width: 58em; /* Mit einer Breite, die 20 Pixel unter der vollen Breite von 800 Pixel liegt, können Sie dem Browser-Chrome Rechnung tragen und gleichzeitig eine horizontale Bildlaufleiste vermeiden. */
background: #FFFFFF;
margin: 0 auto; /* Durch automatische Ränder (in Verbindung mit einer Breite) wird die Seite zentriert. */
border: 1px solid #000000;
text-align: left; /* Hierdurch wird die Einstellung text-align: center im Body-Element überschrieben. */
}
.dreispaltenfixiert #sidebar1 {
float: left; /* Da es sich hier um ein floatendes Element handelt, muss eine Breite angegeben werden. */
width: 150px; /* Die tatsächliche Breite dieses div umfasst in standardgerechten Browsern bzw. im Standardmodus von Internet Explorer außer der Breite auch die Auffüllung und den Rahmen. */
background: #EBEBEB; /* Die Hintergrundfarbe wird nur für die Länge des Spalteninhalts angezeigt. */
padding: 15px 10px 15px 20px; /* Mit der Auffüllung wird gewährleistet, dass der Inhalt des div die Kanten nicht berührt. */
}
.dreispaltenfixiert #sidebar2 {
float: right; /* Da es sich hier um ein floatendes Element handelt, muss eine Breite angegeben werden. */
width: 160px; /* Die tatsächliche Breite dieses div umfasst in standardgerechten Browsern bzw. im Standardmodus von Internet Explorer außer der Breite auch die Auffüllung und den Rahmen. */
background: #EBEBEB; /* Die Hintergrundfarbe wird nur für die Länge des Spalteninhalts angezeigt. */
padding: 15px 10px 15px 20px; /* Mit der Auffüllung wird gewährleistet, dass der Inhalt des div die Kanten nicht berührt. */
}
.dreispaltenfixiert #mainContent {
margin: 0 200px; /* Der rechte und der linke Rand dieses div-Elements erstellen die beiden äußeren Spalten an den Seitenrändern. Der Spaltenbereich bleibt unabhängig von der Inhaltsmenge der Randleisten-divs immer gleich. Sie können diesen Rand entfernen, falls der Text des #mainContent-div die Randleistenbereiche füllen soll, wenn der Inhalt in den Randleisten endet. */
padding: 0 10px; /* padding (Auffüllung) bezeichnet den Innenabstand und margin (Rand) den Außenabstand der div -Box. */
}.dreispaltenfixiert #footer {
padding: 0 10px; /* Diese Auffüllung entspricht der linksbündigen Ausrichtung der Elemente in den divs, die darunter erscheinen. */
background:#DDDDDD;
}
.fltrt { /* Mit dieser Klasse können Sie ein Element auf der Seite nach rechts fließen lassen. Das floatende Element muss vor dem Element stehen, neben dem es auf der Seite erscheinen soll. */
float: right;
margin-left: 8px;
}
.fltlft { /* Mit dieser Klasse können Sie ein Element auf der Seite nach links fließen lassen. */
float: left;
margin-right: 8px;
}
.clearfloat { /* Diese Klasse sollte in einem div- oder break-Element platziert werden und das letzte Element vor dem Schließen eines Containers sein, der wiederum einen vollständigen Float enthalten sollte. */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;

HTML Code

In den Artikel den Code entsprechen anpassen.

<div class=”dreispaltenfixiert”>
<div id=”container”>
<div id=”sidebar1″>
<h3>Artikel mit Page Template gestalten</h3>

</div>
<div id=”sidebar2″>
<h3>Sidebar2</h3>
Die Hintergrundfarbe für dieses div wird nur für die Länge des Inhalts angezeigt. Sollten Sie eine Trennlinie bevorzugen, fügen Sie der CSS-Regel des entsprechenden Divs (#sidebar oder #mainContent) eine Rahmen-Eigenschaft hinzu.

<!– end #sidebar2 –>

</div>
<div id=”mainContent”>
<h1>Den Artikel über Cascading Style Sheets einbinden!
In die Cascading Style Sheets einen separaten Code hinzufügen:

}
%d Bloggern gefällt das: