17. augusta 2016

Ako upraviť nadpisy v lištách


Jednou z prvých vecí, ktoré som riešila po vytvorení webovej stránky pomocou redakčného systému Blogger bola úprava nadpisov v postranných lištách (sidebar). Redakčný systém totiž na úpravu postranných líšt neponúka veľa možnosti. Našťastie si vieme pomôcť s kaskádovými štýlmi (CSS), pomocou ktorých môžeme náš blog odlíšiť od množstvá iných.



V redakčnom systéme Blogger vkladáme CSS kód tak, že klikneme na: 
ŠABLÓNA, prispôsobiť, ROZŠÍRENÉ, PRIDAŤ CSS.


Ak chceme vytvoriť vlastný CSS kód, musíme vychádzať zo všeobecnej definície kaskádových štýlov, ktorá vyzerá nasledovne:

selektor {
vlastnosť1: hodnota1;
vlastnosť2: hodnota2 hodnota3;
...
}

Selektor pre nadpisy v postranných lištách v redakčnom systéme Blogger je: sidebar h2 . Bočné lišty sa môžu v rôznych šablónach rôzne členiť, čo zobrazuje schéma s označeniami selektorov. 

Pri úprave nadpisov si vyberieme selektor pre nadpis, ktorý chceme upravovať. Ak chceme upravovať nadpisy vo všetkých postranných lištách použijeme .sidebar h2 Keďže ide o selektor triedy (v HTML kóde je definovaný pomocou atribútu class) používame pri vytváraní kaskádového štýlu pred selektorom bodku. Ak chceme upravovať iba niektoré nadpisy použijeme vybraný selektor #sidebar-left-1 Ide o selektor ID (v HTML kóde je definovaný pomocou id). Preto používame pri vytváraní kaskádového štýlu pred selektorom mriežku. Ak poznáme selektory, môžeme začať upravovať vlastnosti. Celkom dobrý prehľad vlastností a hodnôt, ktoré k ním možno priradiť je napríklad na stránke Jak psat web.

Na inspiráciu k úprave nadpisov pomocou CSS som pripravila niekoľko ukážok. Tieto môžete buď priamo vložiť do šablóny redakčného systému, prípadne ich ďalej upravovať a zdokonaľovať.

Ukážka 1:

/*nadpisy v postranných lištách*/

.sidebar h2 
{  text-align: center; /*zarovnanie názvu na stred*/                    
text-transform: uppercase; /*názov veľkými písmenami*/
letter-spacing: 0.20em; /*medzera medzi písmenami*/
color:white;/*farba písma*/
background-color: #4d7f1e;/*farba pozadia*/
}

Ukážka 2:
/*nadpisy v postranných lištách*/
.sidebar h2
{
text-align: center;/*zarovnanie názvu na stred*/
text-transform: uppercase;/*názov veľkými písmenami*/
letter-spacing: 0.20em;/*medzera medzi písmenami*/
color:black!important;/*farba písma*/
background-image: linear-gradient(to left, #B9D0D2 0%, white 90%) !important;/*tieňovanie pozadia*/
}

Ukážka 3:

/*nadpisy v postranných lištách*/
.sidebar h2
{
text-transform: uppercase; /*názov veľkými písmenami*/
letter-spacing: 0.20em;/*medzera medzi písmenami*/
text-align: center;/*zarovnanie názvu na stred*/
background-color: transparent!important;/*priehľadné pozadie*/  
border-bottom: 2px dashed ;/*podčiarknutie*/
padding: 0px 0px 5px 0px;/* vnútorný okraj(hore vpravo dole vľavo)*/
color: #98AFC7 !important;/*farba písma*/
font-weight: bolt !important;/* hrúbka písma*/
}

Ukážka 4:

/*nadpisy v postranných lištách*/
 

.sidebar h2 
{
text-align: center;/*zarovnanie názvu na stred*/     
border-style:solid; /*druh ciary*/
border-radius:30px; /*zaoblenie*/
background-color: transparent!important;/*farba pozadia*/
border-color:green; /*farba orámovania*/
border-width:3px; /*šírka orámovania*/
transform: rotate(-10deg);/*otočenie*/
border-right: 10px solid blue; /*farebný oblúk vpravo*/
border-left: 10px solid yellow; /*farebný oblúk vľavo*/
margin: 40pt 0pt 30pt 0pt; top, /*vonkajší okraj: hore, vpravo, dole, vľavo*/
}

Ukážka 5:

.sidebar h2
{
text-transform: uppercase;  /*názov veľkými písmenami*/
letter-spacing: 0.20em;      /*medzera medzi písmenami*/
text-align: center;              /*zarovnanie názvu na stred*/
border-bottom: 4px solid #ffcb8c;  /*dolné orámovanie, hrúbka, typ čiary, farba*/
border-top: 2px solid #ffcb8c; /*horné orámovanie, hrúbka, typ čiary, farba*/
border-right: 1px solid #ffcb8c; /*pravé orámovanie, hrúbka, typ čiary, farba*/
border-left: 1px solid #ffcb8c; /*ľavé orámovanie, hrúbka, typ čiary, farba*/
padding: 5px 5px 5px 5px;     /* vnútorný okraj(hore vpravo dole vľavo)*/
background-color:transparent !important; /* priehľadné pozadie*/
}

Ukážka 6:



/*nadpisy v postranných lištách*/

.sidebar h2
{
background-image:url(https://3.bp.blogspot.com/-hOTMCMOQcRc/VwFEeyjXbCI/AAAAAAAADLU/9g7pnVKCV5IY5hnG2dggy65z11SdWKsWQ/s1600/titulka1.jpg) !important; /*obrázok na pozadí*/
background-position: center center !important;  /*pozícia*/
background-repeat: no-repeat; /*neopakuje sa*/
font-size: 18px !important; /*veľkosť písma */
text-align: center;  /* zarovnanie písma*/
text-transform: uppercase; /* veľké písmena */
padding: 8px; /*vnútorný okraj */
color: white;
}


Poznámka: obrázok, ktorý chcete použiť ako pozadie odporúčam uložiť do príspevku na vašej stránke, pričom príspevok nikdy nebudete publikovať. Následne po kliknutí pravým tlačidlom myši získate url adresu obrázka. Je to spoľahlivejšie ako vkladať obrázky z rôznych miest webu, ktoré môžu neskôr prevádzkovatelia stránok vymazať.

Ukážka 7:

/*nadpisy v postranných lištách*/

.sidebar h2
{
padding: 8px; /*vnútorný okraj */
margin: 35px ; /*vonkajší okraj */
width: 200px; /*šírka */
font-size: 1.5em; /*veľkosť písma */
border-radius: 30px; /*oblúk */
background-color: transparent !important ; /*farba pozadia */
color: #36b7d7; /*farba písma*/
border: 3px solid #36b7d7; /*orámovanie */
text-align: center !important; /*vycentrovanie písma */
}

Ukážka 8:

/*nadpisy v postranných lištách*/
.sidebar h2
 {
text-transform: uppercase;/*názov veľkými písmenami*/
letter-spacing: 0.20em;/*medzera medzi písmenami*/
text-align: right !important;/*zarovnanie názvu vpravo*/
color: #886757  !important;/*farba písma*/
font-weight: bolt !important;/* hrúbka písma*/
Text-decoration: underline;/* podčiarknutie písma*/
background-color:transparent !important;/* priehľadné pozadie*/
}

Ukážka 9:

/*nadpisy v postranných lištách*/
.sidebar h2
 {text-transform: uppercase; /*názov veľkými písmenami*/
letter-spacing: 0.20em;/*medzera medzi písmenami*/
text-align: center;/*zarovnanie názvu na stred*/
border: 2px solid #efe0cb;/*dolné orámovanie, hrúbka, typ čiary, farba*/
padding: 5px 5px 5px 5px;/* vnútorný okraj(hore vpravo dole vľavo)*/ 
background-color:transparent !important; /* priehľadné pozadie*/
color: #444444 !important;/* farba písma*/
}

Ukážka 10:
/*bočné lišty*/
.sidebar .widget 
{
border-top: 1px; /*sirka horného oramovania*/
border-top: double; /*oramovanie dvojitou ciarou*/
border-color: #625D5D; /*farba oramovania*/
width: 200pt; /*šírka*/
left: 0;/*umiestnenie od ľavého okraja*/
right:0;/*umiestnenie od pravého okraja*/
}

/*nadpisy v postranných lištách*/
 .sidebar h2 
{
background:white; /*pozadie nadpisu*/
color: #625D5D!important;/
*farba*/
text-align: center !important;  /*vycentrovanie nadpisu*/
letter-spacing: 0.15em; /*medzery medzi pismenami*/
line-height: 1.5; /*vyska nadpisu*/
margin-top: -10px !important; /*okraj posunuty hore*/
width: 100pt; /*šírka*/
left: 70px; /*umiestnenie od ľavého okraja*/
background-color: white !important; /* farba pozadia*/
}
V prípade, ak by niektorá z vlastností nefungovala, pravdepodobne to súvisí s predošlými nástaveniami šablóny. Dá sa to vyriešiť umiestnením !important do CSS kódu.

Tak snáď bude návod užitočný. Chceli by ste si na blogu prečítať aj ďalšie návody na úpravu vzhľadu blogu?

8 komentárov:

  1. Perfektní návod, díky moc! Sice už to jedním stylem upravené mám, ale uvítám změnu - navíc, když už si nepamatuju, jak jsem to přesně nastavila :D :))

    EVERYTHIN KATE

    OdpovedaťOdstrániť
  2. Super návod, až budu mít víc času, tak určitě vyzkouším!
    Beauty by K.

    OdpovedaťOdstrániť
  3. Skvelé! Tieto návody mám veľmi rada, už len nájsť odvahu do toho ísť :) raz som sa snažila zmeniť šablónu a teda trvalo mi to dosť dlho... nakoniec som sa vrátila späť k pôvodnej...

    OdpovedaťOdstrániť
    Odpovede
    1. Pri vkladani CSS kodov nie je velmi co pokazit. Ak by vysledok nebol idealny, kod sa vymaze a sablona sa vrati do povodneho stavu. Horsie to uz je s upravou HTML, tam clovek moze pokazit vzhlad sablony.

      Odstrániť
  4. Pěkné návrhy :) já to tam mám jednoduše podtržené, tolik možností by mě ani nenapadlo :)

    OdpovedaťOdstrániť
  5. Já jsem furt hroznej začátečník tady na blogspotu, proto se mi hodí každá rada, díky!
    Prolhaná Mrcha

    OdpovedaťOdstrániť
  6. Odpovede
    1. Postupne budem zverejnovat aj dalsie :-)

      Odstrániť

♥ ĎAKUJEM ZA KOMENTÁR ♥