Page 2 of 4
Re: CMSimple_XH template tutorial
Posted: Wed Nov 07, 2018 3:05 pm
by Tata
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.
Re: CMSimple_XH template tutorial
Posted: Wed Nov 07, 2018 5:42 pm
by Tata
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.
Re: CMSimple_XH template tutorial
Posted: Wed Nov 07, 2018 7:16 pm
by cmb
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.
Re: CMSimple_XH template tutorial
Posted: Wed Nov 07, 2018 7:29 pm
by Tata
Well, this is but out of my knowledge borders
Re: CMSimple_XH template tutorial
Posted: Wed Nov 07, 2018 8:24 pm
by frase
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"
Re: CMSimple_XH template tutorial
Posted: Wed Nov 07, 2018 8:30 pm
by Tata
Einfach Holmes
.
Außser rausfließenden und nicht farbig gegebenen Text im syntaxhighlighter ist damit fast alles behoben.
Hier der Unterschied:
syntaxhighlighter.jpg
Re: CMSimple_XH template tutorial
Posted: Wed Nov 07, 2018 8:56 pm
by frase
Mein Firefox meldet in der Konsole:
Die Datei heißt aber: shBrush
Css.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.
Re: CMSimple_XH template tutorial
Posted: Wed Nov 07, 2018 9:05 pm
by frase
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'),
Re: CMSimple_XH template tutorial
Posted: Wed Nov 07, 2018 9:12 pm
by Tata
Die Alternative funktioniert super. Riesen Dank. Es ist schon nur das WordWrapping geblieben.
Re: CMSimple_XH template tutorial
Posted: Wed Nov 07, 2018 9:21 pm
by frase
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 */
}