Onepage teplate Styling

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

Moderator: mikey

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

Onepage teplate Styling

Post by Tata » Sat Feb 24, 2018 11:04 pm

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
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: Onepage teplate Styling

Post by lck » Sun Feb 25, 2018 12:14 pm

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.
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

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

Re: Onepage teplate Styling

Post by lck » Sun Feb 25, 2018 1:12 pm

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;
}
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

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

Re: Onepage teplate Styling

Post by Tata » Sun Feb 25, 2018 2:16 pm

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.)
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: Onepage template Styling

Post by lck » Sun Feb 25, 2018 3:30 pm

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;
}
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

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

Re: Onepage teplate Styling

Post by Tata » Sun Feb 25, 2018 5:01 pm

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.
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: Onepage teplate Styling

Post by lck » Sun Feb 25, 2018 9:39 pm

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)
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

Post Reply