BS5Theme

Pojmy

• Téma – vaše nastavenia (farby, písmo, odsadenia…). Má názov a ukladá sa do vášho účtu.
• Preset – hotová téma, z ktorej môžete začať. Nájdete ich na úvodnej obrazovke a v Galérii presetov.
• Náhľad – plocha vpravo, na ktorej vidíte tému na komponentoch, ukážkových stránkach alebo vlastnom HTML.
• Panel – bočné okno s nastaveniami, ktoré otvoríte tlačidlami v ľavej lište.

Čo budete potrebovať

• Počítač s moderným prehliadačom (aplikácia je určená pre desktop).
• Účet v aplikácii, ak chcete tému uložiť (registrácia je v kapitole Účet). Export do ZIP-u funguje aj bez prihlásenia.

Krok 1 – Otvorte aplikáciu

1. Otvorte bs5theme.4asuite.com.
2. Zobrazí sa úvodná obrazovka Začnite tému s tlačidlami Vytvoriť novú tému a Používateľská príručka, nižšie sú Posledné témy a Presety.

Krok 2 – Začnite tému

Máte dve možnosti:

A) Od nuly

1. Kliknite na Vytvoriť novú tému.
2. V dialógu Nová téma zadajte Názov témy a potvrďte tlačidlom Vytvoriť tému.

B) Z presetu

1. Na úvodnej obrazovke v časti Presety kliknite na kartu presetu (zoradiť ich môžete podľa Najobľúbenejšie / Najnovšie). Všetky presety otvoríte tlačidlom Zobraziť všetky presety.
2. Pri karte použite Použiť preset.
3. Preset sa načíta ako vaša rozpracovaná téma a môžete ho upravovať.

Krok 3 – Upravte farby

1. V ľavej lište kliknite na ikonu Farby (skratka Alt+C).
2. Dole v paneli uvidíte farby primary, secondary, light, dark, info, success, warning, danger a tiež povrchové farby (pozadie, text, odkaz).
3. Kliknite na farbu – stane sa aktívnou.
4. V hornej časti panela vyberte odtieň v pickeri alebo upravte posuvník H / S / L (odtieň, sýtosť, svetlosť).
5. Zmena sa okamžite prejaví v náhľade.

Farby môžete aj získať z obrázka – pozri Získanie farieb z obrázka.

Krok 4 – Vyberte písmo

1. Kliknite na ikonu Typografia (Alt+T).
2. Vyberte skupinu písma (Sans, Serif, Mono) a z menu Google Fonts konkrétne písmo.
3. Rozbaľte sekcie ako Základný text alebo Nadpisy a nastavte veľkosť, výšku riadku či hrúbku.

Krok 5 – Skontrolujte výsledok

1. Kliknite na ikonu Komponenty, príklady, presety v ľavej lište.
2. V karte s komponentmi vyberte Všetky komponenty alebo prepnite na záložku Príklady (ukážkové stránky ako Admin dashboard, Cenník, Registrácia…).
3. Náhľad môžete prepnúť na svetlý alebo tmavý režim a zmeniť jeho šírku ťahaním okraja.

Krok 6 – Uložte alebo exportujte

• Uložiť: Súbor → Uložiť tému (Ctrl+S). Ak nie ste prihlásený, aplikácia vás vyzve na prihlásenie.
• Exportovať: Súbor → Exportovať ZIP (Ctrl+E). Prehliadač stiahne ZIP s CSS, JS a zdrojovými Sass súbormi. Podrobnosti: Import / Export.

Ak sa pomýlite

• Upraviť → Späť (Ctrl+Z) a Upraviť → Znova (Ctrl+Y) vrátia alebo zopakujú zmenu.
• Upraviť → Obnoviť predvolené vráti tému na východiskové hodnoty.

1. Rozhranie aplikácie

Obrazovka má tieto časti:

• Horný pruh – logo (návrat na úvodnú obrazovku), menu Súbor / Upraviť / Zobraziť / Pomoc, prepínač svetlého/tmavého režimu aplikácie, prepínač jazyka a tlačidlo Účet.
• Ľavá lišta – tlačidlá, ktoré otvárajú panely: Nastavenia, Farby, Typografia, Rozloženie a odsadenie, Tvary, Komponenty a Komponenty/príklady/presety.
• Panel – po kliknutí na ikonu v lište sa otvorí bočný panel s nastaveniami. Zatvoríte ho krížikom v jeho hlavičke.
• Plocha náhľadu (stage) – živý náhľad témy.

Ako otvoriť panel: kliknite na ikonu v ľavej lište alebo použite skratku (pozri Klávesové skratky).

Číselné nastavenia v paneloch majú rovnaké ovládanie: tlačidlá − a + na jemnú zmenu, posuvník, zobrazenú hodnotu a tlačidlo Predvolené, ktoré hodnotu vráti na východiskovú. Väčšina panelov má aj tlačidlo Obnoviť …, ktoré vráti celý panel (alebo jeho sekciu) na predvolené hodnoty.

2. Úvodná obrazovka

Zobrazí sa pri prvom otvorení, po kliknutí na logo a po Ctrl+Alt+H.

Ako otvoriť poslednú tému

1. Na úvodnej obrazovke nájdite kartu v časti Posledné témy.
2. Kliknite na ňu. Ak aktuálna téma má neuložené zmeny, aplikácia sa opýta, či ich chcete zahodiť.
3. Téma sa načíta do editora.

3. Panel Nastavenia

Otvoríte ho ikonou Nastavenia v ľavej lište alebo Alt+S.

Pomenovanie témy

1. Otvorte panel Nastavenia.
2. Do poľa názvu témy napíšte názov.
3. Stavový riadok pod poľom ukazuje, či ide o neuloženú rozpracovanú tému.

Zdieľanie témy ako preset (len prihlásení používatelia)

Po prihlásení sa v paneli zobrazí pole Nazov presetu a tlačidlo Zdielat ako preset:

1. Zadajte názov presetu (pole sa predvyplní názvom témy).
2. Kliknite na Zdielat ako preset.
3. Stav pod tlačidlom oznámi, že preset bol zdieľaný, alebo zobrazí chybu. Zdieľané presety potom spravujete v paneli Účet → Moje presety.

4. Farby

Otvoríte ich ikonou Farby alebo Alt+C.

Panel má hore plochu na výber farby a dole 8 farieb Bootstrapu (primary, secondary, light, dark, info, success, warning, danger) a tri povrchové farby: pozadie, text a odkaz.

5. Typografia

Otvoríte ju ikonou Typografia alebo Alt+T.

6. Rozloženie a odsadenie

Panel Rozloženie a odsadenie (Alt+G) obsahuje:

• Container – maximálnu šírku containeru pre jednotlivé breakpointy a vodorovné odsadenie containeru; tlačidlo Obnoviť container.
• Grid – počet stĺpcov a šírku medzery (gutter); tlačidlo Obnoviť grid.
• Odsadenie – základný spacer, hustotu odsadenia (Kompaktné / Predvolené / Vzdušné), odsadenie karty, odsadenie sekcie a odsadenie tlačidiel a formulárov; tlačidlo Obnoviť odsadenie.

Postup: otvorte panel → upravte hodnotu posuvníkom alebo tlačidlami − / + → sledujte náhľad.

7. Tvary

Panel Tvary obsahuje:

Hodnoty vrátite tlačidlom Obnoviť tvary.

8. Komponenty

Panel Komponenty nastavuje odsadenia a veľkosti jednotlivých prvkov.

Postup: otvorte panel → rozbaľte sekciu → zmeňte hodnotu → náhľad sa zameria na príslušný komponent. Tlačidlo Obnoviť komponenty vráti všetky hodnoty.

9. Náhľad: komponenty, príklady, presety

Panel Komponenty, príklady, presety určuje, čo sa zobrazuje na ploche náhľadu. Má štyri záložky (ikony):

Postup: otvorte panel → vyberte záložku → kliknite na položku → náhľad sa prepne.

Ďalšie ovládanie náhľadu

• Svetlý/tmavý náhľad: náhľad môžete prepnúť na tmavý alebo svetlý režim.
• Šírka náhľadu: ťahaním okraja plochy zmeníte šírku náhľadu.
• Zobraziť všetky komponenty: ak sa pri úprave nastavenia zobrazí len príslušná časť náhľadu, tlačidlom Zobraziť všetky komponenty sa vrátite na celý náhľad.

10. Vlastné HTML

Funkcia umožňuje zobraziť vlastnú stránku v náhľade a vidieť na nej vašu tému.

1. Otvorte dialóg: v paneli náhľadov záložka Vlastné HTML alebo Ctrl+Shift+H.
2. Vložte HTML do textového poľa, alebo pretiahnite či vyberte súbor .html / .htm v oblasti na súbor.
3. Voliteľne pridajte odkazy (URL) na CSS súbory tlačidlom na pridanie riadku.
4. Kliknite na tlačidlo použitia (Použiť preview / Apply). Náhľad sa zmení až po tomto kliknutí.
5. Tlačidlom Reset sa vrátite na predvolený náhľad.

Obmedzenia

• Použije sa iba HTML obsah. Skripty, štýly a externé zdroje (assety) sa z HTML odstránia.
• Samostatný HTML súbor („bundle") s vlastným JavaScriptom sa nepodporuje – treba ho rozbaliť na statické HTML.
• Vlastné HTML sa ukladá spolu s témou.

11. Galéria presetov

Otvoríte ju cez Zobraziť → Galéria presetov, tlačidlom Zobraziť všetky presety na úvodnej obrazovke alebo tlačidlom Otvoriť galériu presetov.

1. V poli Hľadať presety napíšte hľadaný text.
2. V zozname Zoradiť presety zvoľte Najobľúbenejšie alebo Najnovšie.
3. Listujte tlačidlami Predchádzajúca strana / Ďalšia strana.
4. Použiť preset načíta preset do editora (ak má aktuálna téma neuložené zmeny, aplikácia sa opýta, či ich zahodiť).
5. Páči sa mi / Odstrániť lajk označí preset ako obľúbený. Lajkovať môžu iba prihlásení používatelia.

12. Správa témy

Všetko nájdete v menu Súbor a Upraviť.

13. Účet

Tlačidlo Účet v pravom hornom rohu otvára bočný panel.

14. Jazyk a režim aplikácie

• Jazyk: v hornom pruhu kliknite na tlačidlo s kódom jazyka (SK / EN) a vyberte slovenčinu alebo angličtinu. Stránka sa prepne.
• Svetlý/tmavý režim aplikácie: tlačidlo so slnkom/mesiacom v hornom pruhu alebo Zobraziť → Prepnúť svetlý/tmavý režim. Mení vzhľad samotnej aplikácie, nie vašej témy. Voľba sa pamätá v prehliadači.

15. Klávesové skratky

Na macOS sa namiesto Ctrl používa Cmd.

Prehľad

Export témy do ZIP-u

<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.bundle.min.js"></script>

sass scss/bootstrap-custom.scss css/bootstrap.css

Export z účtu

1. Prihláste sa a kliknite na Účet.
2. Na záložke Moje témy nájdite tému.
3. Kliknite na Exportovať pri nej.

„Import": načítanie témy a presetu

Aplikácia nepodporuje nahratie ZIP-u ani theme.json. Spätne načítať môžete iba témy a presety uložené v aplikácii.

Vloženie vlastného HTML (import do náhľadu)

Vlastné HTML nie je export ani import témy, ale spôsob, ako vidieť tému na vlastnej stránke.

1. Ctrl+Shift+H alebo záložka Vlastné HTML v paneli náhľadov.
2. Vložte kód alebo pretiahnite súbor .html / .htm.
3. Voliteľne pridajte URL CSS súborov.
4. Kliknite na tlačidlo použitia.

Skripty, štýly a externé zdroje sa z HTML odstránia; samostatné HTML s vlastným JavaScriptom sa nepodporuje. Podrobnosti: Features – Vlastné HTML.

Začiatok

Potrebujem účet? Na vyskúšanie a na export ZIP-u nie. Na uloženie témy a zdieľanie presetu áno. Bez prihlásenia sa rozpracovaný stav drží len lokálne v prehliadači. Pozri Účet.

Funguje aplikácia na telefóne? Aplikácia je navrhnutá pre prácu na počítači. Na malých obrazovkách nie je práca s panelmi a náhľadom pohodlná.

Ako zmením jazyk? Kliknite na tlačidlo SK / EN v hornom pruhu a vyberte jazyk.

Ako prepnem tmavý režim? Tlačidlom so slnkom/mesiacom v hornom pruhu. Zmení sa vzhľad aplikácie. Ak chcete tmavý režim svojej témy, použite prepínač svetlého/tmavého režimu v paneli Farby.

Ukladanie

Prečo sa téma neuloží?

• Nie ste prihlásený – prihláste sa cez Účet.
• Téma nemá názov – zadajte ho v paneli Nastavenia.
• Už máte tému s rovnakým názvom – zvoľte iný názov.
• Server je nedostupný – téma sa uloží lokálne v prehliadači a synchronizácia so serverom zlyhá. Skúste to neskôr.

Stratil som rozpracovanú tému. Dá sa vrátiť? Poslednú zmenu vrátite cez Ctrl+Z. Rozpracovaný stav sa drží aj v prehliadači, ale najbezpečnejšie je tému uložiť (Ctrl+S).

Chcem zahodiť všetky úpravy. Upraviť → Obnoviť predvolené. Téma sa vráti do východiskového alebo načítaného stavu.

Kam sa ukladajú témy? Do vášho účtu na serveri. Zoznam nájdete v paneli Účet → Moje témy a na úvodnej obrazovke v časti Posledné témy.

Farby

Čo robí zamknutie farby? Zamknutú farbu neprepíše ani paleta získaná z obrázka, ani harmonizácia stavových farieb.

Ako vymením dve farby? Potiahnite jeden farebný štvorec na druhý, alebo jeden urobte aktívnym a dvojklikom kliknite na druhý.

Aké obrázky môžem použiť na získanie farieb? Obrázok vyberiete zo súboru, pretiahnete do plochy alebo vložíte snímku obrazovky zo schránky (Ctrl+V).

Zmena farby sa neprejavila. Skontrolujte, či je farba odomknutá a či je otvorený náhľad, v ktorom sa príslušná farba používa (napr. Všetky komponenty).

Náhľad

Vidím len časť komponentov. Pri úprave nastavenia sa náhľad zameria na príslušný komponent. Tlačidlom Zobraziť všetky komponenty sa vrátite na celý náhľad.

Moje vlastné HTML sa nezobrazuje tak, ako mám. Do náhľadu sa vkladá iba HTML obsah – skripty, štýly a externé zdroje sa odstraňujú. Stránky, ktoré potrebujú JavaScript, sa v náhľade nebudú správať ako originál. Samostatné HTML súbory s vlastným JavaScriptom aplikácia nepodporuje.

Vlastné HTML sa nezmenilo po vložení. Náhľad sa zmení až po kliknutí na tlačidlo použitia. Pred tým je HTML len v poli.

Export

Čo dostanem po exporte? ZIP so skompilovaným bootstrap.css a bootstrap.min.css, bootstrap.bundle.min.js, zdrojovým Sass (scss/), snímkou témy theme.json a README.txt. Podrobne: Import / Export.

Export trvá dlho. Prvý export témy sa kompiluje zo Sass, čo môže trvať niekoľko sekúnd. Ďalšie sú rýchlejšie.

V ZIP-e je obyčajný Bootstrap bez mojej témy. Server tému nedokázal skompilovať. README.txt v ZIP-e to uvádza. Skompilujte scss/bootstrap-custom.scss sami (sass scss/bootstrap-custom.scss css/bootstrap.css).

Niektoré moje nastavenie sa v exporte neprejavilo. Niektoré nastavenia ovplyvňujú iba živý náhľad, lebo Bootstrap pre ne nemá premennú. Zoznam je v README.txt v ZIP-e.

Dá sa ZIP alebo theme.json načítať späť do aplikácie? Nie. Načítať môžete iba témy uložené v účte a presety. Pozri Import / Export.

Aký Bootstrap je v exporte? Bootstrap 5.3.3.

Účet

Nepríde mi overovací kód. Skontrolujte priečinok so spamom a kliknite na Poslať nový kód (po odoslaní chvíľu beží odpočet).

Zabudol som heslo. V paneli Účet zvoľte obnovenie hesla a zadajte e-mail. Aplikácia vám pošle e-mail na obnovenie.

Prečo nemôžem lajkovať preset? Lajkovať môžu iba prihlásení používatelia.

Ako zdieľam svoju tému ako preset? Prihláste sa, otvorte panel Nastavenia, zadajte názov a kliknite na Zdielat ako preset. Publikovanie spravujete v Účet → Moje presety. Pozri Panel Nastavenia.

Skratky

Aké klávesové skratky existujú? Pozri Klávesové skratky.