How to use style for page content?

About the template and stylesheet - and changing the menu
Tata
Posts: 3586
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

How to use style for page content?

Post by Tata » Sat Jan 21, 2017 11:54 am

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.
Last edited by Tata on Fri Jan 27, 2017 3:33 pm, edited 2 times in total.
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

frase
Posts: 5085
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: How to use style for oage content?

Post by frase » Sat Jan 21, 2017 12:06 pm

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
Posts: 3586
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: How to use style for oage content?

Post by Tata » Sat Jan 21, 2017 12:25 pm

Klar, danke.
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

Tata
Posts: 3586
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: How to use style for page content?

Post by Tata » Fri Jan 27, 2017 3:53 pm

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>
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

frase
Posts: 5085
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: How to use style for page content?

Post by frase » Fri Jan 27, 2017 4:30 pm

Tata wrote: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}
...
Last edited by frase on Fri Jan 27, 2017 5:28 pm, edited 3 times in total.

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: How to use style for page content?

Post by cmb » Fri Jan 27, 2017 4:41 pm

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.
Christoph M. Becker – Plugins for CMSimple_XH

frase
Posts: 5085
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: How to use style for page content?

Post by frase » Fri Jan 27, 2017 4:47 pm

cmb wrote:... 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
Posts: 5085
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: How to use style for page content?

Post by frase » Fri Jan 27, 2017 4:51 pm

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

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: How to use style for page content?

Post by cmb » Fri Jan 27, 2017 5:19 pm

frase wrote:
cmb wrote:... 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.
frase wrote: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>
Christoph M. Becker – Plugins for CMSimple_XH

frase
Posts: 5085
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: How to use style for page content?

Post by frase » Fri Jan 27, 2017 5:27 pm

cmb wrote:Das geht mit [​code=php]<html>[/code]:
Danke!
;-)

Post Reply