Modernization of old templates for a new style.

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

Moderator: mikey

Post Reply
Korwin
Posts: 52
Joined: Sat Oct 13, 2018 3:27 pm
Location: Russia, Yekaterinburg
Contact:

Modernization of old templates for a new style.

Post by Korwin » Fri Nov 02, 2018 10:43 am

Theory There are many excellent old templates, which unfortunately are not quite compatible with the new version of CMSimple_XH 1.7.2. I would like to understand the algorithm of reworking such templates and creating new ones in such a way that they correspond to our editor Tinymce 4.

Practice I noticed that the old templates of Oldnema do not work correctly with Tinymce 4, for example, the unnumbered and numbered lists are not displayed correctly. I understand that I need to copy that part of the css file new template that is responsible for the ol-ul-li and paste css in the old template.
But where exactly to insert? I tried, but there's no reaction. This is original template css, without my edit.

Code: Select all

/* Responsive template "Prague" 2013-02-25 */
* {padding:0;
margin:0}
#body {margin: 20px;
padding: 0;
font-family: Tahoma, arial;
line-height: 150%;
background-color: #E8C792;}
body {margin: 20px;
padding: 0;
background-color: #66441E;
font-size: 100%;
color: #ffffff;
font-family: Tahoma, arial;}
.print {background-color: #ffffff;
color: #000000;}
#wrapper {margin: 0 auto;
max-width: 1200px;
background-color: #E8C792;
}
#header, #nav, #footer, h1, h2, h3 {font-family: Tahoma, arial}
#header {max-width: 1200px;
margin: 0;
padding: 0;
box-shadow: 0 45px 50px -50px #000000;
}
.header_in {margin: 0em 0em 20px 0em;
padding: 20px;
color: #fff;
background-color: #0f0f0f;
background-image: url(images/head.jpg);
background-repeat: repeat-x;
background-position: left top;
height:250px;border: 2px #E7C691 solid;}
.header_in h1 {color: #F3E4CB;
font-weight: bold;
font-size: 300%;
padding-top: 0.4em;
text-shadow: 2px 2px 2px #000 !important;
padding-bottom: 15px;}
#content {float: left;
width: 55%;
margin: 0 0 20px 0;
padding: 0;
box-shadow: 0 45px 50px -50px #000000;}
.content_in {margin-right: 20px;
padding: 20px;
color: #dfdfdf;
background: #66441E;
border: 1px #E7C691 solid;
}.content_in a, .content_in a:visited {
color: #F3E6CF;}
#newsbox {float: right;
width: 20%;
margin: 0;
padding: 0;}
.newsbox_in {padding: 20px;
color: #fff;
background: #543718;
font-size: 85%;
margin-bottom: 10px;
font-style: italic;box-shadow: 0 45px 50px -50px #000000;
border: 1px #E7C691 solid;}
.newsbox_in a, .newsbox_in a:visited {color: #F3E6CF;
font-style: normal;}
#nav {float: right;
width: 23%;
margin: 0;
padding-left: 15px;}
img {border: 0;
-ms-interpolation-mode: bicubic;
vertical-align: bottom;
/* Responsive images */
  max-width: 100%;
height: auto;
width: auto;}
.video{position:relative;padding-bottom:56.25%;padding-top:30px;height:0;overflow:hidden}
.video iframe,.video object,.video embed{position:absolute;top:0;left:0;width:100%;height:100%}
h1,h2,h3 {margin:0;
font-size:130%;
color: #F3E6CF;
padding-top:0.5em;
text-shadow: 2px 2px 2px #000;}
h4,h5,h6 {margin:0;
font-size:120%;
padding-top:10px;
color: #F3E6CF;
font-weight: bold;
text-shadow: 2px 2px 2px #000;}
input[type="submit"] {background:#000;
color:#fff;
display:inline-block;
height:24px;
position:relative;
text-align:center;
text-decoration:none;
margin-left:5px;
margin-top:11px;
padding:2px 10px 10px;
border-radius:5px;
font-variant:normal;
font-weight:normal;
font-size:70%;}
input[type="text"],input[type="text"]:focus,input[type="password"]:focus {border:#006432 inset 1px;
border-radius:5px;
font-size:70%;}
#search {margin-bottom:0.4em;
border-radius:5px;
border:1px #414141 solid;
padding-left:1em;
padding-bottom:0.6em;
background:#3E2811;
height:40px;
}
#iconmenu {visibility: hidden;}
p {margin:1em 0;
line-height:1.3}
a {color: #400000;
text-decoration: underline;}
#menu li,#menu ul {list-style-type:none;
margin:0;
padding:0;}
#menu a {display:block;
color: #000000;
text-decoration:none;
line-height:200%;
padding-left:1em;
padding-right:1em;
border-bottom:1px #fff solid;}
#menu a:hover {background: #4f4f4f;
transition: background 0.5s;
color: #ffffff;}
#menu {float:left;
width:95%;
font-size:100%;
color:#fff;}
#menu li {list-style-type:none;
list-style-image:none;
padding:0}
#menu ul.menulevel1 li {line-height:1em;
margin:1px 0;}
#menu ul.menulevel2 {margin:1px 0}
#menu ul.menulevel2 li {line-height:1em;
margin:1px 0}
#menu ul.menulevel2 li a {}
#menu ul.menulevel2 li a:hover {}
#menu ul.menulevel3 {margin:1px 0}
#menu ul.menulevel3 li a {}
#menu ul.menulevel3 li a:hover {background:#4f4f4f;}
#menu ul ul.menulevel3 li {margin:1px 0}
#menu2 {margin-top:.5em;
margin-left:0;}
#menu2 li {list-style:none;
padding:0;
margin:0}
#menu2,#menu2 a {text-decoration:none;
display:block;
list-style:none;
padding:0;
margin:0}
.lastupdate {font-size: 80%;
padding: 0.5em;
color: #000;}
ul {padding-left: 10px;}
li {list-style-type: square;
margin-left: 10px}
blockquote {font-family: Georgia, serif;font-size: 100%;font-style: italic;width: 88%;margin: 0.25em 0;padding: 0.25em 40px;line-height: 1.45;position: relative;color: #000;
background-color: #E8C792;}
blockquote:before {display: block;content: "\201C";font-size: 80px;position: absolute;left: -5px;top: -20px;color: #543718;}
blockquote a,blockquote a:visited{color: #800000 !important}
blockquote a:after{content:"\00BB";}
#footer {clear: both;
max-width: 1200px;
margin: 0;
padding: 0;
color: #fff;
background: #543718;
border-top: 1px #2f2f2f solid;
height: auto;
}
#footer a, #footer a:visited {
color: #E8C792;}
.footer_in {padding: 10px 20px 10px 20px;
text-align: center;
font-size: 80%;
}
#top {margin: 1em auto;
width: 150px;}
.button_top a {font-family: Tahoma, arial;
font-size: 14px;
color: #ffffff;
padding: 10px 20px;
background: -moz-linear-gradient(
		top,
		#f0ede8 0%,
		#0d0a02 25%,
		#a89f9c);
background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#f0ede8),
		color-stop(0.25, #0d0a02),
		to(#a89f9c));
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
border: 1px solid #d4cfc9;
-moz-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px -1px 0px rgba(255,255,255,0.7);
-webkit-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px -1px 0px rgba(255,255,255,0.7);
box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px -1px 0px rgba(255,255,255,0.7);
text-shadow:
		0px -1px 1px rgba(000,000,000,0.2),
		0px 1px 0px rgba(255,255,255,0.3);
font-weight: bold;
text-decoration: none;}

/* If the viewport width <= 1000 pixels ... */
@media screen and (max-width: 1000px) {
#content {width: 65%;}
#nav, #newsbox {width: 30%;}
.newsbox_in {margin-right: 0;
margin-top: 20px;}
}

/* viewport width <= 800 pixels ... */
@media screen and (max-width: 800px) {
#content {width: 100%;}
.content_in {margin-right: 0;}
#nav {float: none;
width: 100%;
margin-bottom: 20px;}
#newsbox {float: none;
clear: both;
width: 100%;
margin: 20px 0;}
}

/* viewport width <= 480 pixels ... */
@media screen and (max-width: 480px) {
.header_in h1 {padding-top: 10px;
font-size: 150%;}
.header_in {background-image: none;
height: auto;}
body {margin: 0;}
ul.menulevel1, #menu2 {display:none;}
#menu:hover ul.menulevel1 {display:block;}
.header_in {padding-top: 5px;
padding-bottom: 5px;}
#iconmenu {float: right;
margin-top: -25px;
padding-right: 5px;
visibility: visible;}
.header_in, #content, #nav, #newsbox {margin-bottom: 5px;}
#search {margin: 0;
width: auto;}
}

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

Re: Modernization of old templates for a new style.

Post by frase » Fri Nov 02, 2018 12:13 pm

"Alte" Templates responsive zu machen, ist meistens mehr Aufwand, als ein neues zu bauen.
(2013 gilt schon als "sehr alt")

TinyMCE
Wenn du etwas aus einem neueren Template kopieren willst, solltest du auf folgendes achten:
Die CSS-Klassen müssen konkret bezeichnet werden, weil die Editoren die Formate nur kontextbezogen anzeigen.
Willst du zum Beispiel roten Text haben, dann muss die Regel in etwa so aussehen:

Code: Select all

p.red, span.red, div.red {
    color: #ff0000;
}
Damit kannst du einzelne Wörter, ganze Absätze oder DIV-Bereiche mit roter Schrift versehen.
Bei früheren Editoren genügte einfach

Code: Select all

.red {
    color: #ff0000;
}
Diese einfache Regel wird aber in dieser Form in den neuen Editoren nicht mehr angezeigt.

Genau so ist das bei den Listen.
In CMSimple_XH sollten Listen - und auch andere Dinge - nicht global allgemein definiert werden, sondern immer durch eine spezielle CSS-Klasse.
Beispiel "unordered List".

Code: Select all

ul.UnorderedList {
    margin: ...;
    padding: ...;
    ...
}
ul.UnorderedList li {
    ...
}
Im Editor wählst du dann die Liste aus. Unter "Formate" wird dann auch die Klasse "ul.UnorderedList" angeboten.
Wenn du so vorgehst, werden auch andere Listen (z.B. Pagemanager oder andere XH-Listen) nicht beeinflusst.

manu
Posts: 683
Joined: Wed Jun 04, 2008 12:05 pm
Location: St. Gallen - Schweiz
Contact:

Re: Modernization of old templates for a new style.

Post by manu » Fri Nov 02, 2018 1:52 pm

frase wrote:
Fri Nov 02, 2018 12:13 pm
...
TinyMCE
Wenn du etwas aus einem neueren Template kopieren willst, solltest du auf folgendes achten:
Die CSS-Klassen müssen konkret bezeichnet werden, weil die Editoren die Formate nur kontextbezogen anzeigen.
Willst du zum Beispiel roten Text haben, dann muss die Regel in etwa so aussehen:
...
Im TinyMCE4 ist das Einstellungssache. Mit

Code: Select all

style_formats_autohide: false
in der _init Datei kriegst Du alle Formatierungen, mit true (default) nur die Kontex bezogenen.

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

Re: Modernization of old templates for a new style.

Post by frase » Fri Nov 02, 2018 1:57 pm

manu wrote:
Fri Nov 02, 2018 1:52 pm
Im TinyMCE4 ist das Einstellungssache. Mit
...
in der _init Datei kriegst Du alle Formatierungen, mit true (default) nur die Kontex bezogenen.
Ja natürlich. Das weißt du und ich und noch ein paar Leute.
Ich habe nur das Standard-Verhalten erklärt. Nicht jeder will/kann seinen Editor umprogrammieren.

Post Reply