Page 4 of 12
Re: New Responsive Template - JekyllAndHyde
Posted: Fri Dec 15, 2017 5:34 pm
by MANUELA
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
Re: New Responsive Template - JekyllAndHyde
Posted: Sat Dec 16, 2017 1:10 am
by meltemi
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:
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).
Re: New Responsive Template - JekyllAndHyde
Posted: Sat Dec 16, 2017 3:53 am
by Tata
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;
}
}
Re: New Responsive Template - JekyllAndHyde
Posted: Sat Dec 16, 2017 12:47 pm
by lck
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;
}
}
Re: New Responsive Template - JekyllAndHyde
Posted: Sat Dec 16, 2017 12:54 pm
by MANUELA
@meltimi
@Tata
@Ick
Klasse, Dank Euch für die zahlreichen Tipps, damit bekomme ich das bestimmt hin! GlG
Re: New Responsive Template - JekyllAndHyde
Posted: Sat Dec 16, 2017 1:14 pm
by MANUELA
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
Re: New Responsive Template - JekyllAndHyde
Posted: Sat Dec 16, 2017 4:23 pm
by lck
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.
Re: New Responsive Template - JekyllAndHyde
Posted: Sat Dec 16, 2017 5:37 pm
by MANUELA
Perfekt, danach habe ich gesucht! Dankeschön! VG
Re: New Responsive Template - JekyllAndHyde
Posted: Sun Dec 17, 2017 8:35 pm
by lck
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“.
Problem mit automatisch gesetztem "fa-angle-double-right" bei Auflistung (ul, li)
Posted: Wed Dec 20, 2017 12:08 pm
by MANUELA
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