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
Aniž bych musel zasahovat do šablony.
Děkuji
Diskuse
Téma: Lze vkládat vlastní CSS
Zaslat odpověď
Jirka DaněkSamozř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
_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áš.Díky :-)
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.
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.
Zkusím odpovědět na všechno, co jsi zmínil. 🙂
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
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
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
5. Pokud tu složku pojmenuješ místo
6. To je vše.
Ale opakuji znovu, že styly, které se týkají přímo šablony by měly být v souboru
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é CSS5. 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ěly být v souboru
layout.cssJeš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
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
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 :-)
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 :-)
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 🙂
http://wall.cz/nastenka/extend-plugin-head-hcm-pro-sunlight-cms
http://upload.jdanek.eu/files/slcms/extends/head_hcm_edited.zip
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 🙂
http://wall.cz/nastenka/extend-plugin-head-hcm-pro-sunlight-cms
http://upload.jdanek.eu/files/slcms/extends/head_hcm_edited.zip
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
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
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
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
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í.Ahoj, pokusal sa uz niekto prerabat head plugin na 8 beta ? :)