How to use style for page content?

[Tata]

Scenario:
I have written a content of a page. It has a couple of <P>s and <DIV>s.
Now I want the whole written content pack in one DIV with a special class - to give a background, or to change the width, position, font, font-color etc.
What happens? Each <P>, <DIV> takes the class.
Is there a way - other than make this only manually in source code - to do it only by highliting the content and assign a class to the highlighted content?
I wnat to use it with onepage plugin so that each page would have the same height and an individual background scrolling always the whole screen.
With a simple HTML template file (without cmsimple scripting) it works.

Code: Select all

<div class="content">
     <div class="page-1">
               CONTENT 1
    </div>
     <div class="page-2">
               CONTENT 2
     </div>
     <div class="page-3">
               CONTENT 3
     </div>
     <div class="page-4">
               CONTENT 4
     </div>
</div>

As a template it has only one DIV for content(); so the pages still need individual class "page-x" with the same height (e.g. 100vh)

Code: Select all

<div class="content">
        <?php echo onepage_content();?>
</div>

so I need to pack each page into a DIV.

[frase]

Schau dir Ludwigs OnePage-Templates an.
Zum Beispiel: http://www.cmsimplexh.momadu.de/demos/op_ihaveadream/

Die DIVs werden unterschiedlich im CSS gestyled. Z.B.

Code: Select all

.onepage_page:nth-child(2n) {
    background-color: #f4f4f4;
}

Das könnte dir weiterhelfen.

:nth-child(2n) musst du anpassen.

[Tata]

Klar, danke.

[Tata]

Ich habe es angeschaut. Das ist eine Möglichkeit. Die lösst aber nicht, was ich brauche. Es geht nähmlich nicht um Formatierung einer Seite, sonder nur einer Teil der Seite. Wie oben beschrieben.

Code: Select all

<h1>Title</h1>
<p>blablabla</p>
<div class="class1">blablabla blablabla</div>
<h4>blablablabla</h4>

möchte ich als

Code: Select all

<h1>Title</h1>
<div class="class2">
     <p>blablabla</p>
     <div class="class1">blablabla blablabla</div>
</div>
<h4>blablablabla</h4>

[frase]

Es geht nähmlich nicht um Formatierung einer Seite, sonder nur einer Teil der Seite. Wie oben beschrieben.

Genau.

Möglichkeit 1:
Jedem div "direkt" Regeln geben. Das ist nicht dynamisch.

Code: Select all

div.class1 { background-color: red; }
div.class2 { background-color: blue; }
... usw.

Möglichkeit 2:
Hintergrundfarbe abwechselnd:
HTML

Code: Select all

<div class="content">
     <div class="page">
               CONTENT 1
    </div>
     <div class="page">
               CONTENT 2
     </div>
     <div class="page">
               CONTENT 3
     </div>
     <div class="page">
               CONTENT 4
     </div>
</div>

CSS

Code: Select all

div.page:nth-child(even) {background: #CCC}
div.page:nth-child(odd) {background: #FFF}

Möglichkeit 3:
mit HTML wie in 2:
CSS

Code: Select all

div.page:nth-child(1) {background: #CCC}
div.page:nth-child(2) {background: #999}
div.page:nth-child(3) {background: #333}
...

[cmb]

Wenn ich die Anfrage richtig verstehe, dann geht es nicht um HTML und CSS, sondern um den WYSIWYG-Editor, wo es nicht möglich ist ein umliegendes <div> zu erzeugen und diesem eine CSS-Klasse zuzuweisen. Wenn ich mich richtig erinnere, dann ist das aber mit dem CKEditor möglich. Wie es beim TinyMCE 4 ist, weiß ich nicht, aber da würde es im Zweifel sinnvoll sein nachzuforschen – viel Zeit in den alten TinyMCE 3 würde zumindest ich lieber nicht stecken.

[frase]

... sondern um den WYSIWYG-Editor, wo es nicht möglich ist ein umliegendes <div> zu erzeugen und diesem eine CSS-Klasse zuzuweisen ...

Das geht auch im Tiny3.
In Deutsch: "Zusammenhängender Bereich" = DIV
Dem kann man beliebige (sinnvolle) Klassen geben.

[frase]

@Christoph
Was muss ich tun, damit mein html-code im Forum auch als solcher gestyled wird?

[cmb]

... sondern um den WYSIWYG-Editor, wo es nicht möglich ist ein umliegendes <div> zu erzeugen und diesem eine CSS-Klasse zuzuweisen ...

Das geht auch im Tiny3.
In Deutsch: "Zusammenhängender Bereich" = DIV
Dem kann man beliebige (sinnvolle) Klassen geben.

Was ich meine ist, dass man ein zusätzliches <div> erstellt; wählt man "Zusammenhängender Bereich", dann wird aus einem <p> ein <div>, aber eben kein zusätzliches Element erzeugt. Beim CKEditor gibt (oder gab) es dafür einen eigenen Button.

Was muss ich tun, damit mein html-code im Forum auch als solcher gestyled wird?

Das geht mit [​code=php]<html>[/code]:

Code: Select all

<html>

[frase]

Das geht mit [​code=php]<html>[/code]:

Danke!