Hallo, vielen Dank für die Tipps! Gruß, Manuelacmb 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.
New Responsive Template - JekyllAndHyde
Moderator: mikey
Re: New Responsive Template - JekyllAndHyde
Re: New Responsive Template - JekyllAndHyde
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 )frase wrote:Christophs Vorschlag mit column-count ist wahrscheinlich für dich leichter umsetzbar
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;}
Code: Select all
<p class="spalten">...</p>
Re: New Responsive Template - JekyllAndHyde
Oder einfach nur sound dann evtl. mit @mediaquerries die Spaltenzahl anpassen. Z.B.
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;
}
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.
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.
Re: New Responsive Template - JekyllAndHyde
Hallo Manuela,
willkommen im Forum!
willkommen im Forum!
Einfach am Ende der stylesheet.css einfügen (getestet nur mit den Browser-Entwickler-Tools)MANUELA wrote:Möchte bloß wegen 2-3 Spalten jetzt nicht Bootstrap einbinden.
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
Re: New Responsive Template - JekyllAndHyde
@meltimi
@Tata
@Ick
Klasse, Dank Euch für die zahlreichen Tipps, damit bekomme ich das bestimmt hin! GlG
@Tata
@Ick
Klasse, Dank Euch für die zahlreichen Tipps, damit bekomme ich das bestimmt hin! GlG
Re: New Responsive Template - JekyllAndHyde
Hallo Ludwig,lck wrote:Hallo Manuela,
willkommen im Forum!Einfach am Ende der stylesheet.css einfügen (getestet nur mit den Browser-Entwickler-Tools)MANUELA wrote:Möchte bloß wegen 2-3 Spalten jetzt nicht Bootstrap einbinden.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; } }
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>
Schönes WE, vG
Re: New Responsive Template - JekyllAndHyde
Danke!MANUELA wrote:zunächst mal Gratulation zu dem wirklich gelungenen - modernen - Template.
Ah ok, mit dem "Zweitem" sieht man besser . Hier zwei simple Beispiele, die könnten für dich passen.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.
Danke, ebenfalls.MANUELA wrote:Schönes WE, vG
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“ Ludwig's XH-Templates for MultiPage & OnePage
Re: New Responsive Template - JekyllAndHyde
Doch, eigentlich schon und auch ohne Bilder verwendbar, sind halt „nur“ 2 Spalten. Beispiele siehe hier unter „… mit Text mittig zentriert“.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.
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“ Ludwig's XH-Templates for MultiPage & OnePage
Problem mit automatisch gesetztem "fa-angle-double-right" bei Auflistung (ul, li)
Hallo,
habe ein seltsames Problem:
Füge ich Folgendes in einer Seite ein:
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.
Hat vielleicht jemand eine Idee?
Vorab vielen Dank,
beste Grüße
Manu
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>
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;
}
*/
Vorab vielen Dank,
beste Grüße
Manu