CMSimple_XH template tutorial

Please post the URLs to pages, where you've made a CMSimple template available for download

Moderator: mikey

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

Re: CMSimple_XH template tutorial

Post by Tata » Wed Nov 07, 2018 3:05 pm

manu wrote:
Wed Nov 07, 2018 12:28 pm
Nice try,really.
Thanks.
But why is this template practically useless on mobile devices (iPhone SE)?
Because my initial intention was (wrongly?) not to offer ready-made template but only to demonstrate the way how to build such one. It is a tutorial how to build a template. As the whole tutorial runs in one CMSimple_XH installation, there is used one content.htm and particular pages only use their own template. Since the "final" template is defined, you can see it, but clicking any of previous pages, you also return back to previous templates.
responsivity.png
Anyway, I have tested the responsivity since the responsivity has been introduced. Just now I see, that I have forgotten to change font-sizes and paddings for small devices.
Here is the separated final template for testing.
You do not have the required permissions to view the files attached to this post.
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: 2953
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: CMSimple_XH template tutorial

Post by Tata » Wed Nov 07, 2018 5:42 pm

Ah, now I understand you. And the basic template of the tutorial is responsive too. I have not think about reading the manual on other devices but desktops.
And a new problem occured with the syntaxhighlighter. On narrow display the "code block" respects the responsive width. But its content flows to the right out of it.
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.

cmb
Posts: 13211
Joined: Tue Jun 21, 2011 11:04 am
Location: Mü-Sa, RLP, DE
Contact:

Re: CMSimple_XH template tutorial

Post by cmb » Wed Nov 07, 2018 7:16 pm

Tata wrote:
Wed Nov 07, 2018 5:42 pm
And a new problem occured with the syntaxhighlighter. On narrow display the "code block" respects the responsive width. But its content flows to the right out of it.
The main problem seems to be that Syntaxhighlighter doesn't properly initialize. For some reason, parts of Syntaxhighlighter_XH and Fancybox output are duplicated at the end of the pages (view-source). Don't know why, but that's definitely a problem for Syntaxhighligher.
Christoph M. Becker – Plugins for CMSimple_XH

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

Re: CMSimple_XH template tutorial

Post by Tata » Wed Nov 07, 2018 7:29 pm

Well, this is but out of my knowledge borders :oops:
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: 2754
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: CMSimple_XH template tutorial

Post by frase » Wed Nov 07, 2018 8:24 pm

cmb wrote:
Wed Nov 07, 2018 7:16 pm
The main problem seems to be that Syntaxhighlighter doesn't properly initialize.
Im Quellcode der Seite (Beispiel hier) lauten die Aufrufe für die sh-CSS-Dateien so:

Code: Select all

<link rel="stylesheet" href="./plugins/syntaxhighlighter//lib/styles/shCoreDefault.css" type="text/css">
<link rel="stylesheet" href="./plugins/syntaxhighlighter//lib/styles/shThemeDefault.css" type="text/css">
Da sind ein paar Slashes zu viel.
(Das ist übrigens auch auf meiner Styleguide-Seite so - funktioniert aber.)

Auf Tatas Seite ist der schließende Body-Tag (</body>) zweimal vorhanden.
Das wird wohl der Grund sein.
Außerdem ist (wahrscheinlich dadurch) der Text permanent zu sehen:
"YOUR DISPLAY HAS
SMALL RESOLUTION
MINIMAL 320px
IS REQUIRED"

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

Re: CMSimple_XH template tutorial

Post by Tata » Wed Nov 07, 2018 8:30 pm

Einfach Holmes :D .
Außser rausfließenden und nicht farbig gegebenen Text im syntaxhighlighter ist damit fast alles behoben.
Hier der Unterschied:
syntaxhighlighter.jpg
You do not have the required permissions to view the files attached to this post.
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: 2754
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: CMSimple_XH template tutorial

Post by frase » Wed Nov 07, 2018 8:56 pm

Mein Firefox meldet in der Konsole:
Laden fehlgeschlagen für das <script> mit der Quelle "https://cmsimple.sk/tplxhtutor/plugins/ ... rushCSS.js".
Die Datei heißt aber: shBrushCss.js - also mit Kleinbuchstaben.
Du könntest versuchen, die Datei in \plugins\syntaxhighlighter\lib\scripts\ umzubenennen.
Von shBrushCss.js -> in -> shBrushCSS.js
Einen Versuch ist es wert.

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

Re: CMSimple_XH template tutorial

Post by frase » Wed Nov 07, 2018 9:05 pm

Alternative:
in \plugins\syntaxhighlighter\classes\Plugin.php Zeile 78
von

Code: Select all

array('css', $dir . 'shBrushCSS.js'),
ändern in:

Code: Select all

array('css', $dir . 'shBrushCss.js'),

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

Re: CMSimple_XH template tutorial

Post by Tata » Wed Nov 07, 2018 9:12 pm

Die Alternative funktioniert super. Riesen Dank. Es ist schon nur das WordWrapping geblieben.
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: 2754
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: CMSimple_XH template tutorial

Post by frase » Wed Nov 07, 2018 9:21 pm

Tata wrote:
Wed Nov 07, 2018 9:12 pm
Die Alternative funktioniert super. Riesen Dank. Es ist schon nur das WordWrapping geblieben.
\plugins\syntaxhighlighter\lib\styles\shCoreDefault.css Zeile 71 auskommentieren.

Code: Select all

.syntaxhighlighter .line {
	/* white-space: pre !important; */
}
Das sieht dann aber nicht so gut aus.
In diesem Fall ist horizontales Scrolling nicht so schlimm. (finde ich)

Auf der Seite: https://cmsimple.sk/tplxhtutor/?Let%27s ... mo-content
ist mir aber der Code zu lang (Höhe).
Vorschlag in gleicher Datei Zeile 55:

Code: Select all

.syntaxhighlighter {
	width: 100% !important;
	margin: 1em 0 1em 0 !important;
	position: relative !important;
	overflow: auto !important;
	font-size: 1em !important;
	max-height: 600px; /* NEU */
}

Post Reply