Naštýlovanie slideru webstránky
Slider naštýlujeme nasledovne. Na najvyššej úrovni (čiže parent) sa nachádza trieda .carousel
, ktorej nastavíme automatickú výšku, vďaka čomu sa výška prispôsobí výške obrázku a nezávisle je možné do slideru zadať text ľubovoľnej dĺžky.
.carousel {
height: auto;
}
V triede .carousel-caption
sa nachádza obalený nadpis a podnadpis v slideri. Vďaka Bootstrapu máme text preddefinovane nacentrovaný, stačí ho iba odsadiť o 90px od spodku obrázku, čo dosiahneme pomocou atribútu bottom
.
.carousel-caption {
bottom: 90px;
}
V ďalšom kroku je potrebné prepísať preddefinovaný štýl pre nadpis definovaný Bootstrapom. Cez debugger zistíme, ako sa k triede dostaneme a upravíme farbu textu na bielu, nastavíme pomocou font-weight
písmo na bold alebo bolder (ako ti to viac vyhovuje) a odstránime preddefinovaný tieň okolo textu, tým, že k atribútu text-shadow
pridáme none
.
.carousel-caption > h1 {
color: #fff;
text-shadow: none;
font-weight: bolder;
}