New Responsive Template - JekyllAndHyde

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

Moderator: mikey

MANUELA
Posts: 11
Joined: Fri Dec 15, 2017 7:50 am

Re: New Responsive Template - JekyllAndHyde

Post by MANUELA » Fri Dec 15, 2017 5:34 pm

cmb wrote:Will man den Inhalt einer (CMSimple_XH-)Seite mit einem Gridsystem (welcher Art auch immer) mehrspaltig darstellen, dann muss der Inhalt natürlich auch entsprechenden ausgezeichnet werden. Das dürfte sich zumindest mit dem TinyMCE nicht leicht machbar sein – man wird dann wohl auch in der Quelltextansicht arbeiten müssen. Kennt man sich mit HTML gut aus, dann geht das natürlich (eventuell empfiehlt sich statt des TinyMCE dann aber der Codeeditor_XH). Kennt man sich mit HTML nicht so gut aus, oder möchte in der WYSIWG-Ansicht arbeiten, dann sind responsive Tabellen vielleicht die beste Lösung. Das ist zwar semantisch reichlich suboptimal, aber halt ein möglicher Kompromiss. Eine Alternative wäre vielleicht, ein Template mit dem Template-Plugin für TinyMCE anzulegen. Damit habe ich allerdings noch nicht gearbeitet.
Hallo, vielen Dank für die Tipps! Gruß, Manuela

meltemi
Posts: 177
Joined: Sat Feb 22, 2014 10:11 pm
Location: Franken (Deutschland)
Contact:

Re: New Responsive Template - JekyllAndHyde

Post by meltemi » Sat Dec 16, 2017 1:10 am

frase wrote:Christophs Vorschlag mit column-count ist wahrscheinlich für dich leichter umsetzbar
Für @MANUELA vermutlich zielführender, aber genauso leicht umsetzbar: column-width zu verwenden: Wenn ausreichende Fensterbreite vorhanden ist, wird die erstrebte Anzahl Spalten angezeigt, wenn nicht, je nach Fensterbreite weniger Spalten (aber immer mindestens eine ;-))

CSS-Beispielregel für column-width (aus einer meiner Seiten ganz ohne und fern von JekyllAndHyde):

Code: Select all

p.spalten{-moz-column-width:20.8em;-moz-column-gap:1.8em;-moz-column-rule:thin solid #cde;-moz-column-fill:balance;-webkit-column-width:20.8em;-webkit-column-gap:1.8em;-webkit-column-rule:thin solid #cde;-webkit-column-fill:balance;column-width:20.8em;column-gap:1.8em;column-rule:thin solid #cde;column-fill:balance;}
Entsprechender HTML-Code:

Code: Select all

<p class="spalten">...</p>
Die einzelnen Parameter (vor allem column-width:20.8em) sind abhängig von der gewünschten Spaltenzahl bei handtuchlangen Bildschirmen und den sonst verwendeten CSS-Regeln (und müssen nach Test entsprechend angepaßt werden).

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

Re: New Responsive Template - JekyllAndHyde

Post by Tata » Sat Dec 16, 2017 3:53 am

Oder einfach nur so

Code: Select all

p .spalten{
line-height: 1.5rem; 
text-indent: 2rem; 
text-align: justify;
-moz-column-count: 2;
-moz-column-gap: 20px;
-webkit-column-count: 2;
-webkit-column-gap: 20px;
}
und dann evtl. mit @mediaquerries die Spaltenzahl anpassen. Z.B.

Code: Select all

@media screen and (min-width: 481px) and (max-width: 768px) {
...
p.spalten{	
-moz-column-count: 2;
-webkit-column-count: 2;
}
}
@media screen and (min-width: 769px) and (max-width: 1280px) {
p.spalten{
-moz-column-count: 2;
-webkit-column-count: 2;
}
}
@media screen and (min-width: 1281px) {
p.spalten{	
-moz-column-count: 3;
-webkit-column-count: 3;
}
}
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.

lck
Posts: 2963
Joined: Wed Mar 23, 2011 11:43 am
Contact:

Re: New Responsive Template - JekyllAndHyde

Post by lck » Sat Dec 16, 2017 12:47 pm

Hallo Manuela,
willkommen im Forum!
MANUELA wrote:Möchte bloß wegen 2-3 Spalten jetzt nicht Bootstrap einbinden.
Einfach am Ende der stylesheet.css einfügen (getestet nur mit den Browser-Entwickler-Tools)

Code: Select all

@media only screen and (min-width: 801px) {
.lck_content_main {
    -moz-columns: 2;
    -webkit-columns: 2;
    columns: 2;
    -webkit-column-gap: 40px;
    -moz-column-gap: 40px;
    column-gap: 40px;
    -webkit-column-rule: 1px outset #BDBDBD;
    -moz-column-rule: 1px outset #BDBDBD;
    column-rule: 1px outset #BDBDBD;
}
.lck_content_main h1 {
    -webkit-column-span: all;
    column-span: all;
    margin-bottom: 0.8rem;
}
.lck_content_main p {
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    text-align: justify;
}
}

@media only screen and (min-width: 1280px) {
.lck_content_main {
    -moz-columns: 3;
    -webkit-columns: 3;
    columns: 3;
}
} 
Last edited by lck on Sat Dec 16, 2017 12:57 pm, edited 1 time in total.
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

MANUELA
Posts: 11
Joined: Fri Dec 15, 2017 7:50 am

Re: New Responsive Template - JekyllAndHyde

Post by MANUELA » Sat Dec 16, 2017 12:54 pm

@meltimi
@Tata
@Ick

Klasse, Dank Euch für die zahlreichen Tipps, damit bekomme ich das bestimmt hin! GlG

MANUELA
Posts: 11
Joined: Fri Dec 15, 2017 7:50 am

Re: New Responsive Template - JekyllAndHyde

Post by MANUELA » Sat Dec 16, 2017 1:14 pm

lck wrote:Hallo Manuela,
willkommen im Forum!
MANUELA wrote:Möchte bloß wegen 2-3 Spalten jetzt nicht Bootstrap einbinden.
Einfach am Ende der stylesheet.css einfügen (getestet nur mit den Browser-Entwickler-Tools)

Code: Select all

@media only screen and (min-width: 801px) {
.lck_content_main {
    -moz-columns: 2;
    -webkit-columns: 2;
    columns: 2;
    -webkit-column-gap: 40px;
    -moz-column-gap: 40px;
    column-gap: 40px;
    -webkit-column-rule: 1px outset #BDBDBD;
    -moz-column-rule: 1px outset #BDBDBD;
    column-rule: 1px outset #BDBDBD;
}
.lck_content_main h1 {
    -webkit-column-span: all;
    column-span: all;
    margin-bottom: 0.8rem;
}
.lck_content_main p {
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    text-align: justify;
}
}

@media only screen and (min-width: 1280px) {
.lck_content_main {
    -moz-columns: 3;
    -webkit-columns: 3;
    columns: 3;
}
} 
Hallo Ludwig,

zunächst mal Gratulation zu dem wirklich gelungenen - modernen - Template.

Wirklich klasse Dein Vorschlag, vielen Dank für die Mühe! Verändert aber natürlich das komplette Layout. Ich möchte ja bloß auf ausgewählten Seiten innerhalb des Textes 2-3 spaltige div Bereiche einfügen, ähnlich 2-3 nebeneinander angeordneten Boxen.

Code: Select all

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>
Werde die anderen Tipps/Vorschläge mal näher anschauen.

Schönes WE, vG

lck
Posts: 2963
Joined: Wed Mar 23, 2011 11:43 am
Contact:

Re: New Responsive Template - JekyllAndHyde

Post by lck » Sat Dec 16, 2017 4:23 pm

MANUELA wrote:zunächst mal Gratulation zu dem wirklich gelungenen - modernen - Template.
Danke!
MANUELA wrote:Ich möchte ja bloß auf ausgewählten Seiten innerhalb des Textes 2-3 spaltige div Bereiche einfügen, ähnlich 2-3 nebeneinander angeordneten Boxen.
Ah ok, mit dem "Zweitem" sieht man besser ;). Hier zwei simple Beispiele, die könnten für dich passen.
MANUELA wrote:Schönes WE, vG
Danke, ebenfalls.
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

MANUELA
Posts: 11
Joined: Fri Dec 15, 2017 7:50 am

Re: New Responsive Template - JekyllAndHyde

Post by MANUELA » Sat Dec 16, 2017 5:37 pm

lck wrote:Hier zwei simple Beispiele, die könnten für dich passen.
Perfekt, danach habe ich gesucht! Dankeschön! VG

lck
Posts: 2963
Joined: Wed Mar 23, 2011 11:43 am
Contact:

Re: New Responsive Template - JekyllAndHyde

Post by lck » Sun Dec 17, 2017 8:35 pm

MANUELA wrote:Wollte einfach nur wissen, ob in diesem (wirklich gelungenem Template) die Nutzung von 2 oder 3 responsiven Columns innerhalb der Seiten schon per Stylesheet vorgesehen ist oder ob hierfür das Stylesheet noch erweitert werden muss.
Doch, eigentlich schon und auch ohne Bilder verwendbar, sind halt „nur“ 2 Spalten. Beispiele siehe hier unter „… mit Text mittig zentriert“.
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

MANUELA
Posts: 11
Joined: Fri Dec 15, 2017 7:50 am

Problem mit automatisch gesetztem "fa-angle-double-right" bei Auflistung (ul, li)

Post by MANUELA » Wed Dec 20, 2017 12:08 pm

Hallo,

habe ein seltsames Problem:

Füge ich Folgendes in einer Seite ein:

Code: Select all

<ul class="slider-nav">
<li class="slider-nav__item"><label class="slider-nav__label" for="one">1</label></li>
<li class="slider-nav__item"><label class="slider-nav__label" for="two">2</label></li>
<li class="slider-nav__item"><label class="slider-nav__label" for="three">3</label></li>
</ul>
wird mir das "fa-angle-double-right" automatisch davor angezeigt/gesetzt :-(.

Bekomme es einfach nicht weg, "list-style:none;" habe ich schon in diversen Varianten versucht.

Selbst das Auskommentieren des relevanten Bereiches im Stylesheet bringt nichts.

Code: Select all

/*
.lck_content ul li:before,
#tinymce ul li:before,
.cke_editable ul li:before {
	content: "\f101";
	font: 1em FontAwesome;
	color: #84a573;
	padding: 0 .4em 0 0;
	position: relative;
	margin-left: -1em;
}
.lck_content ul ul li:before,
#tinymce ul ul li:before,
.cke_editable ul ul li:before {
	content: "\f101";
	font: 0.9em FontAwesome;
	top: -0.05em;
}
.lck_content ul ul ul li:before,
#tinymce ul ul ul li:before,
.cke_editable ul ul ul li:before {
	content: "\f101";
	font: 0.8em FontAwesome;
	top: -0.1em;
}
*/
Hat vielleicht jemand eine Idee?

Vorab vielen Dank,

beste Grüße
Manu

Post Reply