< návrat zpět

Diskuse


Téma: Lze vkládat vlastní CSS rss

Zaslal/a 19.1.2018 7:55

zdravím, rád bych se zeptal jestli je možné vkládat někde vlastní úpravy css, jak to je např na wordpressu - custom css.

Aniž bych musel zasahovat do šablony.

Děkuji

Zaslat odpověď >

#020956
Jirka Daněk
Samozřejmě, že css motivu jde přetlouct pomocí css registrovaného extendem. Což ostatně u některých rozšíření využíváme.
_extend('reg','tpl.head', function ($args) {
$args['output'] .= "\n<link rel='stylesheet' type='text/css' href='" . _indexroot . "plugins/extend/<rozsireni>/style.css'>";
});

Ale pokud se úpravy týkají pouze motivu, tak od toho je layout.css. Tohle řešení je vhodnější opravdu pro dostylování prvků, které do systému rozšířením dodatečně přidáváš.
#020957
avatar
Díky :-)
#021050
avatar
Je teda zapotřebí vytvořit nový plugin dle návodu který si zasílal zde
http://sunlight.shira.cz/dokumentace/pluginy/extend#a_struct

Ono uplně nestačí napsat část kódu a pracuj, protože začátečník s tím těžko pochodí.
Možná by nebylo na škodu kdyby někdo ten plugin nebo co je k tomu za potřebí udělal.

To je totiž dost důležitá věc, já z většiny tu šablonu přepisuju tím smyslel že přepisuju ty css soubory a jednotlivé třídy přepisuju na vlastní, nebo přídávám nové.

Jednoduší by bylo, kdyby v administraci bylo pole pro vlastní styly, kde bych ty styly házel a mělo by to přednost před vším a přepsalo to dle toho. Asi je toto dost složitá věc to chápu.

Tam jde o to, že když přepisuju ty styly a následně příjde třeba nová aktualizace tak to přepíše vše co jsem tam upravil.

Jelikož neumím PHP tak nejsem schopný z této části kódu něco vytvořit, nevím jak...
Ale zhruba chápu jak to bude fungovat :D

Pochopil jsem že je nutný vytvořit nějaký php soubor který nahraju do plugins/extend/admin
A poté následně ještě nahrát složku pluginu kde bude tedy obsažen style.css kde už budu vkládat vlastní styly.
#021051
Jirka Daněk
Zkusím odpovědět na všechno, co jsi zmínil. 1
V původním dotazu byl požadavek "Aniž bych musel zasahovat do šablony.", předpokládám tedy, že chceš stylovat prvky aniž by jsi upravoval existující šablonu. Takže zbývá jediná možnost a to externí styly pomocí pluginu. Mohl jsem místo kompletního kódu také odepsat jen "Ano lze pluginem". Právě protože zde jsou i začátečníci, tak většinou odpovídám i s funkčním kódem, ale musíš projevit trochu iniciativy a nejen slepě kopírovat kusy kódu.

Je samozřejmé, že upravuješ, přejmenováváš a přidáváš třídy do šablony, k tomu tam jsou soubory system.css a layout.css, které slouží k doladění šablony pro tvou potřebu. Pak jsou prvky, které přidávají různé pluginy a je nesmysl nutit admina kopírovat styly do šablony a proto je tu možnost jakou jsem popsal v předchozím příspěvku.

Napsat plugin, který to umožní není problém, ale jednodušší by to stejně nebylo, protože stejně styly musíš ukládat do souboru a tím jak bude kynout bude se načítání protahovat. Jakákoliv úprava šablony, pak znamená měnit styly na dvou místech. Pro optimalizaci načítání by se dalo sice minifikovat tento soubor, ale zase to je pak needitovatelný, takže to postrádá tebou zmíněnou výhodu. Minifikovat "on the fly" je zase zbytečný krok navíc, kanón na vrabce.

"Tam jde o to, že když přepisuju ty styly a následně příjde třeba nová aktualizace tak to přepíše vše co jsem tam upravil."
Aktualizace čeho? Systému? Málokdy dělá změny v CSS a určitě ne v šablonách.

A teď k tomu poslednímu bodu. Vezmeme to podle návodu...
1. Vytvoříš si ve složce plugins/extend/ například složku mojestyly a v ní soubor mojestyly.php.

2. Do něj nakopíruješ
<?php

/* ---- kontrola jadra ---- */
if (!defined('_core')) die;

/* ---- funkce pluginu ---- */

/**
* [TEST PLUGIN] Ukazkova funkce
* @param array $args
*/
function _plugin_test_udalost($args)
{

$args['output'] .= '<p>Výstup ukázkové funkce při události <code>tpl.content.before</code>';

}

/* ---- registrace pluginu ---- */

_extend('reg', 'tpl.content.before', '_plugin_test_udalost');
ze struktury toho samplu vidíš podobnost s tím co jsem psal já a tak to tam nakopíruješ.
<?php

/* ---- kontrola jadra ---- */
if (!defined('_core')) die;

/* ---- funkce pluginu ---- */
_extend('reg','tpl.head', function ($args) {
$args['output'] .= "\n<link rel='stylesheet' type='text/css' href='" . _indexroot . "plugins/extend/mojestyly/style.css'>";
});


3. Soubor uložíš s kódováním UTF-8
4. Vytvoříš soubor style.css, který bude následně obsahovat tvé CSS
5. Pokud tu složku pojmenuješ místo mojestyly takto web.mojestyly, tak se ti budou tyto styly načítat pouze na webu a nebudou se zbytečně načítat i v administraci, kde nejsou potřeba.
6. To je vše.

Ale opakuji znovu, že styly, které se týkají přímo šablony by měli být v souboru layout.css
#021052
Jirka Daněk
Ještě jsem si vzpomněl, že dynamické načítání souborů se styly měl na svém webu petvo
http://wall.cz/nastenka/extend-plugin-head-hcm-pro-sunlight-cms. Nevím ovšem, zda je funkční na aktuální verzi systému, je to plugin starý asi 6 let. Případně můžeš zkusit mou funkční (ověřeno) upravenou verzi http://upload.jdanek.eu/files/slcms/extends/head_hcm_edited.zip
#021053
avatar
Moc díky za tvůj čas při vysvětlování, ano vše jsem to pochopil a udělal dle návodu.

Jen to shrnu.

1. Ve složce plugins/extend/ jsem vytvořil soubor mojecss.php
2. Do souboru mojecss.php jsem vložil následující kód

<?php

/* ---- kontrola jadra ---- */
if (!defined('_core')) die;

/* ---- funkce pluginu ---- */
_extend('reg','tpl.head.meta', function ($args) {
$args['output'] .= "\n<link rel='stylesheet' type='text/css' href='" . _indexroot . "plugins/extend/mojecss/style.css'>";
});

/**
* [TEST PLUGIN] Ukazkova funkce
* @param array $args
*/
function _plugin_test_udalost($args)
{

$args['output'] .= '<p>Výstup ukázkové funkce při události <code>tpl.content.before</code>';

}

/* ---- registrace pluginu ---- */

_extend('reg', 'tpl.content.before', '_plugin_test_udalost');


3. Vytvořil jsem ve složce plugins/extend/ soubor style.css

Následně jsem provedl test, jestli to funguje. Tak jsem do style.css vložil tohle

#header ul a {
background: #003d7b url(../images/img2.gif) repeat-x;
}

Jde o pouhé zaměnění barvy pozadí. Žádná změna se ale neprojevila. Zkoušel jsem přes inspect v prohlížeči zkontrolovat jestli to ten upravený styl vůbec načítá a dle všeho ano ale přednost má stále ten z layout.css. Zkoušel jsem tam za to přidát !important a pak to načetlo.

Ale zase to nenačítá ten obrázek z ../images/img2.gif tak bude asi nutné změnit cestu.
Změnil jsem jí na /plugins/templates/default/images/img2.gif jinak mi ten obrázek nenačítal.

Ale ve výsledku to asi funguje s tím přidaným important.

Jedna chybka tam je, zobrazuje se mi na úvodní stránce tohle - Výstup ukázkové funkce při události tpl.content.before

Těn plugin jsem zkoušel taky, to je vlastně to totožné jako ten návod co si posílal akorát to mám v administraci. A funguje to totožně ale musí tam být important což je docela otravný to tam pořád dopisovat a změnit se musí adresy na obrázky.

Ale jo funguje to jinak což je hlavní a ušetří mi to kupu času. Díky moc ještě jednou :-)
#021055
avatar
Tak jsem zjistil že u toho pluginu není ten !important duležitý a nemusí se přidávat.
Teda je možné že některé styly to vyžadovat budou.

Ale doporučuji ten plugin, je to vlastně to co jsem přesně potřeboval, škoda že to není v souborech ke stažení mohl jsem ti ušetřit práci hehe :-)

DOPORUČUJI všem kteří budou něco podobného potřebovat 1

http://wall.cz/nastenka/extend-plugin-head-hcm-pro-sunlight-cms

http://upload.jdanek.eu/files/slcms/extends/head_hcm_edited.zip
#021057
Jirka Daněk
1. Important tam samozřejmě nepatří, vím co to způsobuje. Je to tím, že platná je vždy až poslední CSS vlastnost a registrací do tpl.head.meta jsem to registroval, před styly šablony. Takže je potřeba to změnit na tpl.head, opravím to v předchozích příspěvcích ať to pak nikoho nemate.

2. Je dobré pak zvýšit číslo cache v administraci a tím si vynutit znovu načtení stylů.

3. Není to chyba, je to jen to, že kopíruješ slepě vše, smaž z toho pluginu celou tuto část
/**
* [TEST PLUGIN] Ukazkova funkce
* @param array $args
*/
function _plugin_test_udalost($args)
{

$args['output'] .= '<p>Výstup ukázkové funkce při události <code>tpl.content.before</code>';

}

/* ---- registrace pluginu ---- */

_extend('reg', 'tpl.content.before', '_plugin_test_udalost');

4. "Ale zase to nenačítá ten obrázek z ../images/img2.gif tak bude asi nutné změnit cestu.
Změnil jsem jí na /plugins/templates/default/images/img2.gif jinak mi ten obrázek nenačítal."

Samozřejmě, je to úplně jinde než šablona, takže nelze použít relativní cestu
#021058
Jirka Daněk
Chtělo by to zvládnout alespoň základy...
https://www.jakpsatweb.cz/css/css-kaskadovani.html

A důležité k !important
Dá se nastavit, aby vlastnost nebyla později přepsána.
Dělá se to klauzulí !important za zápisem CSS vlastnosti.
Při používání !important je nutné být opatrný, protože když se na to zapomene,
tak se pak děsně blbě ladí dlouhé stylopisy.

A proč není v zmíněný plugin v sekci Ke stažení je jednoduché, nemohu jen tak publikovat pluginy za někoho jiného. Všechny je udržuji sice funkční pro aktuální verzi, ale nemohu si přivlastňovat cizí práci. A v době kdy u petva plugin vznikl, ještě nebyla možnost zde pluginy publikovat. Tak proto zde není.