Custom CSS

Kérték, hogy írjak már ~~a dzsojsztikról~~ erről a témáról pár szavat, szóval írok.

Elősör nézzük a bugrókát.

Nyitásként is be kéne menni az about:config-ba és a toolkit.legacyUserProfileCustomizations.stylesheets property-t belőni true-ra.
Utána a menüben a "Help/Troubleshooting Information" alatt lesz egy olyan bejegyzés, hogy "Profile Folder". Az ott jelzett könyvtárban pedig vagy van egy 'chrome' nevű könyvtár, vagy létre kell hozni. A könyvtáron belül pedig a userContent.css (plaintext) file-t kell létrehozni, ha nincs még létrehozva. A tartalmához adjuk hozzá a következő CSS kódot:

@-moz-document domain(hup.hu)
{

}

Ennek a belsejébe mehet majd minden custom CSS, amit a hupra akarunk applikálni később. (Restart needed.)

Footnote: Itt csak régi-bugróka-klónok vannak (PaleMoon, IceWeasel, IceWeasel-UXP), amikből a fenti feature hibádzik, szóval kipróbálni nem tudtam, csak leírni. Ha mégse működne, vagy valaki mégis inkább addont használna, itt a Stylus, itt meg a CSS-override. (Előbbi 1.3 MB, utóbbi 20 kB.)

Akkor nézzük a krómot is.

Itt sokkal rosszabb a helyzet, mert a kugli természetesen már rég eltávolította ezt a feature-t és ami helyette van (Local Overrides), az meg - írd és mondd - nem jó semmire (ebből a szempontból). Illetve egy nagyon béna módon lehet erre használni, azt azért leírom.
Nyitásként nyissuk ki a hupot. Tapossunk rá az F12-re. A "Sources" tabon lesz egy "Overrides" altab (Nem Alt-Tab!) a "Filesystem"-től egyel jobbra. Bökjünk rá a "Select folder for overrides" gombra és válasszuk ki a könyvtárat, ahova majd a custom CSS mehet. Miután leokéztuk a bevinnyogását, hogy neki oda access jog kell, megjelenik egy kis mappa a listában. Másszunk át a "Page" fülre és keressünk egy hupos CSS-t, mondjuk a sites/default/files/css elérés alatt. Jobb klikk, "Save for overrides". Menjünk vissza az overrides fülre és nyissuk ki a CSS-t. Na most, ez nem addition, hanem override, azaz ez a klónozott CSS él a másik helyett. Ez egyrészt azt jelenti, hogy az eredeti CSS-t benne kell hagyni és vagy azt átírni, vagy ahhoz hozzábiggyeszteni a sajátunkat, másrészt meg azt, hogy ha a hup ebben a fájlban cserél valamit, akkor ezt a local copy-t törölni kell és ismét klónozni. (Ennek elméletileg az összesben működnie kell, a brétől a kroperán át a krómplórerig, de nem esküszöm meg rá.)
Ha valaki esetleg tudná, hogy hogyan lehet úgy belőni, hogy használja az általunk létrehozott fájlokat, azt megköszönöm, ha leírja kommentben. (Az add to workspace nem működik, bármilyen könyvtárat adok hozzá a workspace-hez, az nem csinál semmit, ill. ha már benne volt a fában, akkor meg épp eltünteti. Ez ilyen kugli logika. És még a YTFE unintuitív...)

Mit lehet még tenni, hogy ezt az egyszerű dolgot, hogy custom CSS meg tudjuk oldani a világ legmodernebb és legnépszerűbb brózerében? Igen, fel kell tenni egy extension-t, that's the web2 way... Ez azért jó, mert egyrészt zabálja az erőforrásokat, másrészt akár a brózer, akár az extension vált verziót, valami tuti eltörik. (Most mondjam, hogy ezt a régi - Presto motoros - Opera már ~20 éve is tudta OOB, mindenféle kiegészítő nélkül? Alien a haladás...és hajbi 4 prez, csakazértis.) Itt a Stylish nevű extension. Ez lightweight-ebb (feleakkora) és recentebb (pár hetes), mint a tavaly óta nem frissült Stylebot. Az egykori User CSS a kommentek tanúsága szerint már nem működik, mondjuk nem csoda 2017-ben frissült utoljára. Kár érte, mert hatodakkora volt, mint a Stylish és tizedakkora, mint a Stylebot. Mindenesetre a Stylish-t kipróbáltam, működik. Ráböksz, ott a hamburgermenü, lehet újat létrehozni, szerkeszteni, stb.

TCH blogja
A hozzászóláshoz be kell jelentkezni
350 megtekintés

Ez egyrészt azt jelenti, hogy az eredeti CSS-t benne kell hagyni és vagy azt átírni, vagy ahhoz hozzábiggyeszteni a sajátunkat, másrészt meg azt, hogy ha a hup ebben a fájlban cserél valamit, akkor ezt a local copy-t törölni kell és ismét klónozni.

Ezen annyit lehet segíteni, hogy a local overrideod első sorából importálod az eredeti CSS-t. Pl.:

@import url("https://hup.hu/sites/default/files/css/...");

body {
  font-size: larger;
}

Persze a címet ettől még frissíteni kell, de picit egyszerűbb, mint letölteni az eredetit és belemásolni a saját kódot.

Ha valaki esetleg tudná, hogy hogyan lehet úgy belőni, hogy használja az általunk létrehozott fájlokat, azt megköszönöm, ha leírja kommentben. (Az add to workspace nem működik, bármilyen könyvtárat adok hozzá a workspace-hez, az nem csinál semmit, ill. ha már benne volt a fában, akkor meg épp eltünteti. Ez ilyen kugli logika. És még a YTFE unintuitív...)

Röviden: sehogy. A feature nevében benne van mit tud, ha az oldal nem ismeri az általad létrehozott fájlokat, akkor nem is fogja használni. Ezt fejlesztőknek találták ki (hint: dev tools), hogy ne kelljen lokálisan elindítani egy webszervert (meg minden egyéb hóbelevancot a választott technológiák függvényében) ha meg akarsz nézni egy kliensoldali módosítást. Így meg lehet nézni több oldalon is ugyanazt a változtatást, és nem veszik el, ha véletlenül, vagy a működéséből adódóan újratölt az oldal.

Igen, fel kell tenni egy extension-t, that's the web2 way... Ez azért jó, mert egyrészt zabálja az erőforrásokat, másrészt akár a brózer, akár az extension vált verziót, valami tuti eltörik.

Ezek az extensionök nagyjából annyit csinálnak, hogy ha van az adott oldalhoz override, akkor beszúrnak a head-be egy <link rel="stylesheet"> vagy <style> taget. Minden más extra a menühöz, beállítási felülethez tartozik, így aktívan erőforrást nem pazarolnak, legfeljebb a böngésző indítását lassítják pár msec-kel. Persze nem azt mondom, hogy a több MB-os méret egy ilyen faék egyszerű feature-höz indokolt, de jó eséllyel ez csak a fejlesztő bénasága.

1 szavazat

A hozzászóláshoz be kell jelentkezni

Ezen annyit lehet segíteni, hogy a local overrideod első sorából importálod az eredeti CSS-t. Pl.:
@import url("https://hup.hu/sites/default/files/css/...");

body {
  font-size: larger;
}
Persze a címet ettől még frissíteni kell, de picit egyszerűbb, mint letölteni az eredetit és belemásolni a saját kódot.

Jogos az észrevétel, köszi.

Röviden: sehogy. A feature nevében benne van mit tud, ha az oldal nem ismeri az általad létrehozott fájlokat, akkor nem is fogja használni. Ezt fejlesztőknek találták ki (hint: dev tools), hogy ne kelljen lokálisan elindítani egy webszervert (meg minden egyéb hóbelevancot a választott technológiák függvényében) ha meg akarsz nézni egy kliensoldali módosítást. Így meg lehet nézni több oldalon is ugyanazt a változtatást, és nem veszik el, ha véletlenül, vagy a működéséből adódóan újratölt az oldal.

Ezt én is leírtam, hogy "ez nem addition, hanem override", csak reménykedtem, hogy van valami rejtett, nem dokumentált feature hozzá...

Ezek az extensionök nagyjából annyit csinálnak, hogy ha van az adott oldalhoz override, akkor beszúrnak a head-be egy vagy taget. Minden más extra a menühöz, beállítási felülethez tartozik, így aktívan erőforrást nem pazarolnak, legfeljebb a böngésző indítását lassítják pár msec-kel.

Az extension-nek tudnia kell, hogy be kell-e szúrnia CSS tag-et, tehát muszáj futnia; vagy oldalbetöltésekkor, vagy tabváltáskor, vagy időzítve, de valamikor ellenőriznie kell, hogy szúrni, vagy nem szúrni. Ez egy. Kettő, maga a JS VM sandbox instance létrejön hozzá és aktív, maximum épp JS kódot nem hajt végre, amikor az extension nyugiban van, de maga a VM attól még működtet plusz egy darab JS futókörnyezetet és a memóriából is elvesz. És akkor még itt van a lamerfaktor is, hogy nem biztos, hogy a fejlesztő ésszerűen csinált mindent, ld. a saját észrevételed: