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: bold !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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_CLXhbMZ4-JAYQW8ptOuwdB_UbJo08l1qBKLpI3qMBWMvrKfGOfADangmNg6tfHFZHO78YHGVyepz6yHYzo5RbUMTuTcyw6bAfCoP2aIxTFcpFVvdqSMP58u24E5zO5V3C0RWSpeenbs/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: bold !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?