Diskuse

Téma: Template "Portfolio"-test

Hodil by se mi test na šablonu, kterou připravuju na v. 8.1.
Asi nej změny jsou v kodu a v použití. Předchozí motivy odemně ještě jedou na kodu, který jsem měl na betě na testu. Nyní je vše potřebné (systém i hlavní css-ko) ve flexboxu. Má pouze jeden layout, víc jich neni potřeba. Případné změny pro postupku boxů v responzivě snadno provedete v souboru "main.css".
Stadartně jsem nastyloval na
.column-content {
order: 1;
width: auto;
flex-grow: 1;
}
.boxes-left {
order: 2;
width: 100%;
}
.boxes-right {
order: 3;
width: 100%;
}
Stačí tedy pro vaší potřebu jen změnit pořadí boxů ve vlastnosti "order".
Nové použití:
Nastyloval jsem v tomto motivu sekce pro boxy, nově tedy máte k dispozici horní sloupec nad obsahem, standartně levý a pravý sloupec u obsahu, dolní sloupec pod obsahem a dokonce i patu webu. Vše obsluhujete pomocí zavedení boxů do sloupců, jako tomu je u levého a pravého sloupce. Do těchto sekcí tedy zapisujete pomocí boxů.
img
Předstylovaný hcm, které mohou být vložený do paty webu, která má tmavé pozadí.
Nově jsem ikonky na fórum nastyloval jako obrázky pro třídy (Shira jich napsal dostatek), takže jsem je jako vložené img zakázal. Tuto změnu jsem udělal pro případné použití a možnou změnu na tmavé nebo světlé pozadí. Pokud si tedy nastylujete jedno fórum pro tento motiv v tmavém režimu, tak můžete změnit ikonky diskusí. Dále oproti předchozím motivům jsem ponechal vše infa fóra v responsivě. Jen jsem přidal případné ikonky pro rozlišení položek.
Dále máte i ikonky obálek u pošty (otevřená nebo zavřená) pro lepší orientaci přečtených a nepřečtených zpráv.
Motiv si múžete stáhnout zde: www.pro-shiru.jednoduse.cz/upload/portfolio-test.zip
Ukázka motivu: www.pro-shiru.jednoduse.cz
stopUzamčeno - nelze přidávat nové příspěvky.
Template bylo hodně předěláno. Potřebuju vaší zpětnou vazbu.
Ukázka je už dostupná.
Nový link ke stažení, kde je toto template ve světlém a tmavém vzhledu. Stáhnete si obojí.
www.pro-shiru.jednoduse.cz/upload/tfsl.zip
Je v beta verzi, protože bude potřeba dostylovat nové věci co budou v 8.1, ale to pak mám dostylovaný zachvilku.
Opravdu potřebuju vaší zpětnou vazbu
Mně se akorát nelíbí ikonky vpravo nahoře. První vypadá jako logout ale je to login. Druhá je registrace, ale to by mi z toho nedošlo.
Dík za reakci. Pokud to bude takhle vyhovovat, předělám i tyhle dvě ikonky na obrázky stránek a dám opět ke stažení. Já udělal ty předchozí ikonky podle toho, co maj na stránkách ostatní. ;)
Ahoj ještě jsem zjistil, že máš nastaveno pozadí v "knize" na tmavou barvu a černý text. Určitě se to nechá upravit, ale bylo by asi lepší mít v základu čitelné pozadí.
Ahoj ještě jeden nápad, zda "dolní sloupec" nezarovnávat horizontálně (tak jako v patičce), aby se "pata" mohla případně použít jen na odkaz na systém (zmenšit výšku). Nevím jak by to bylo složité aby si to uživatel případně mohl upravit.
Pozadí v knize? V jakym motivu v tom tmavém nebo světlém. Jdu juknout. Co se týká dolního sloupce, tak ten by se měl zobrazit jen při jeho použití. Jdu to překontrolovat.
Barvení při "target" v tmavém motivu bylo opraveno.

Dolní sloupec se při nepoužití nazapočítává. Tak nevim co myslíš.
Jinak motivy jsem aktualizoval, tak si je stáhněte znova.

"Dolní sloupec" se nezarovnává horizontálně. Jen jsem na ukázku hodil plugin hcm na články a ten už se mi řadí vedle sebe. Není to jako v patičce webu ;)
Momentálně nestíham, ale snad o víkendu nahodím na web a po testu napíši poznatky
Promiň, ve světlém motivu je sice pozadí černé ale příspěvky jsou vidět.
Já měl na mysli původní motiv Portfolio.
Ano dolní sloupec funguje jak píšeš, chtěl jsem ho použít místo patičky na zobrazení "sponzorských" log. A patičku jsem chtěl nechat jen na odkaz na sunlight. Ale to si případně dořeším až v nové verzi systému, až bude motiv konečný. Testuji dál :-)
Motiv "portfolio" jsem zrušil. Bude tohle s názvem "tfsl" (template for SunLight).
Dělám ho bez všech php konfigurací kolem, prostě základ. Jeden layout "template.php" stačí díky samotným možnostem systému. Pokud někdo bude potřebovat více layoutů, tak možnosti má. Tuhle šablonu chci hodně přehlednou, aby druhým i bez juknutí do dokumentace došlo, jak se staví template.
Co se týká toho tvého příkladu s dolním sloupcem, tak nejjednodušší způsob je přidat další sloupec, do kterého si i nastyluješ systémové věci, jak budeš potřebovat. Další sloupec přidáš tak, že ho zapíšeš do souboru "pligin.json". Příklad zapisuji do svého "template.php"
vytvořím nový sloupec s názvem co si sám vymyslíš např "tralala".
Zde je zápis: (Hodím ti ho pod spodní sloupec):
"layouts": {
"default": {
"template": "layouts/template.php",
"slots": [
"top",
"left",
"right",
"bottom",
"tralala",
"footer"
]
}
},
Pak ještě vytvoříš překlad, to je to co pak čteš v systému v boxech. Otevři tedy složku "labels" v motivu a přidej zápis do cs.php a pak i do druhého v anglině kvůli překladu:
'default.slot.tralala' => 'tralala sloupec',V tomto motivu by to vypadalo takhle:
<?php
return [
'default.label' => 'výchozí',
'default.slot.top' => 'horní sloupec',
'default.slot.right' => 'pravý sloupec',
'default.slot.left' => 'levý sloupec',
'default.slot.bottom' => 'dolní sloupec',
'default.slot.tralala' => 'tralala sloupec',
'default.slot.footer' => 'sloupec pata',
];
V tuhle chvíli ti systém přídá třídu, která bude mít tenhle název:
.boxes-tralalaDo layoutu ho přidáš na místo, kde ho budeš chtít tedy v tomto motivu na tvůj příklad. Otevři soubor "template.php" a zapiš ho:
<?= Template::boxes('tralala') ?>A máš hotovo, jen si ještě dostyluj styl na tenhle sloupec s boxy. Sytém ti do zdroje hodí třídu
<div class="boxes boxes-tralala">
<div class="box-item">
<h2 class="box-title"></h2>
</div>
</div>
Styl tedy budeš psát v té druhé přožené třídě pro sloupec "boxes-tralala":
.boxes-tralala {
styl
}
a styl přímo pro ty boxy v tom sloupci "box-item":
.boxes-tralala .box-item {
styl
}
Jednoduchý. V tomhle motivu jsou už ukázkově nastylovaný třídy pro tyhle boxy, tak jenom najdi, jakej sloupec bys chtěl okopčit a jen pozměň ten název třídy.
U paty jsem to styloval tak, aby se boxy načítali v nejmenší velikosti 250px. Jakmile je dosaženo max počtu boxů na velikost, tak skočí do druhého řádku. Maj nastavený flex-grow na jedna, tedy budou brát zbytek volného místa. Min velikost je 250px ale dělí se o zbývající místo. Pokud tedy jeden box spadne do druhého řádku, tak zabere celý řádek. Toho využívám i u hcm s článkama vedele sebe. Dělí se o 50% místa, takže třetí článek spadne pod ně a natáhne se přes celý řádek.
U toho čekám na třídu od Shiry. Budu to dělení článku v hcm stylovat na horní sloupec, content a spodní sloupec.
;)
Díky za super návod, jak bude chvilka zkusím.
Strana: 1 2 další »