Page 1 of 1
Onepage teplate Styling
Posted: Sat Feb 24, 2018 11:04 pm
by Tata
Ich habe ein onepage Template gebastelt und seit gestern kann ich nicht finden, wie es fertigzustylen.
1. Von lck´s op_metro_02 habe ich einige selectors benuzt und ich weiss nicht, wie sie weiter zu stylen.
z.B.: es gibt
Code: Select all
div.onepage_page {
min-height: 100vh;
padding: 200px 30%;
}
Die "30%" habe ich in @mediaquerry eingestellt. Es ist aber bischen unpraktisch.
2. Wen ich einlogge, der Adminbereich ist 100% breit. Loginform ist versteckt und content ist absolut unsichtbar.
DEMO:
http://clear1610.cmsimple.sk
DOWNLOAD
Re: Onepage teplate Styling
Posted: Sun Feb 25, 2018 12:14 pm
by lck
Tata wrote: ↑Sat Feb 24, 2018 11:04 pm
Die "30%" habe ich in @mediaquerry eingestellt. Es ist aber bischen unpraktisch.
Tja, das ist halt immer das Problem bei einen Menü mit position: fixed.
Tata wrote: ↑Sat Feb 24, 2018 11:04 pm
Loginform ist versteckt
Abhilfe, das Login-Formular absolute positionieren:
Code: Select all
.xh_login {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
Tata wrote: ↑Sat Feb 24, 2018 11:04 pm
Wen ich einlogge, der Adminbereich ist 100% breit. ... und content ist absolut unsichtbar.
Da verweise ich mal wieder auf
diesen Tipp. Dann könntest du mit den Klassen adminedit und adminview vorangestellt, den Backendbereich nach deinen Wünschen anpassen. Zum Beispiel den content-Bereich auf 1200px reduzieren, oder das Menü absolut am rechten Rand positionieren mit einer Breite von 300px. Das Logo ausblenden usw. ...
Der Content ist da, nur ist im Englischen das Menü nicht sichtbar, da unter dem Adminmenü.
BTW: Beim Pagemanager, da fehlt der Speichen-Button. Ist per display: none; ausgeblendet. Anscheinend hast du den manipuliert? Es sind auch keine Häkchen zu sehen.
Re: Onepage teplate Styling
Posted: Sun Feb 25, 2018 1:12 pm
by lck
Tata wrote: ↑Sat Feb 24, 2018 11:04 pm
Die "30%" habe ich in @mediaquerry eingestellt. Es ist aber bischen unpraktisch.
Das padding würde ich auch nicht hier verwenden, also in der Klasse .onepage_page, sondern in der Klasse onepage_page_inner, mittig positionieren mit margin: 0 auto; und padding: 5% 3%; und nur das first-child mit einem padding-top von 300px anlegen. Das nötige offset bei :target könnte dann so aussehen:
Code: Select all
:target[class="onepage_page"]:before {
clear: both;
content: "";
display: inline-block;
height: 200px;
position: relative;
visibility: hidden;
}
.onepage_page:nth-of-type(1):before {
content: none;
}
Re: Onepage teplate Styling
Posted: Sun Feb 25, 2018 2:16 pm
by Tata
Danke, Ludwig. Hat geholfen. Nur weiss ich noch immer nicht, wie ich es bei anderen onepage Templates geschafft, auch den Editor schmaller zu machen.
Irgendwie habe ich auch die Vertikale Positionierung getrickst. Normal sollte es aber eifacher gehen, so gef'llt mir es nicht besonders mit pixels zu tricksen.
(Die oben gegebene Llinks sind aktualisiert.)
Re: Onepage template Styling
Posted: Sun Feb 25, 2018 3:30 pm
by lck
Tata wrote: ↑Sun Feb 25, 2018 2:16 pm
Nur weiss ich noch immer nicht, wie ich es bei anderen onepage Templates geschafft, auch den Editor schmaller zu machen.
Voraussetzung hierfür ist:
lck wrote: ↑Sun Feb 25, 2018 12:14 pm
Da verweise ich mal wieder auf
diesen Tipp.
Dann könnte man den content-Bereich nur im Edit-Mode anders stylen:
Code: Select all
.adminedit .content {
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 150px auto;
max-width: 1170px;
}
Re: Onepage teplate Styling
Posted: Sun Feb 25, 2018 5:01 pm
by Tata
Super!
Das
Code: Select all
.adminedit .content {
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 150px auto;
max-width: 1170px; /****** erstezen ******/
}
habe ich mit
Code: Select all
.adminedit .content {
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 150px auto;
padding: 0 30%; /****** ersezt ******/
}
aus
div.onepage_pagekopiert und ersetzt und jetzt ist der Editor eine exacte Kopie des Ansichts.
Re: Onepage teplate Styling
Posted: Sun Feb 25, 2018 9:39 pm
by lck
Tata wrote: ↑Sun Feb 25, 2018 5:01 pm
aus div.onepage_pagekopiert und ersetzt und jetzt ist der Editor eine exacte Kopie des Ansichts
Du woltest doch die 30% nicht verwenden
, aber egal, wenn's für dich passt.
Das margin sollte natürlich nur oben 150px sein, nicht auch unten, also margin: 150px auto 0; (0 oder etwas mehr, wie es gefällt)