Bővebben felirat formázása
A Bővebben gombra a CSS-ben a .blogmorelink vonatkozik, ezen belül formázhatod a Bővebben gombot - nem a linket, hanem a gombot: hátterét, méretét. Így:
.blogmorelink {
background-color: #000000; /*gomb háttere*/
border: 1px solid #cccccc; /*gomb kerete*/
width: 20%; /*gomb szélessége, ha 100-at adsz meg, végig ér a poszt alatt*/
}
A Bővebben feliratot, azaz a linket a következőképpen tudod formázni:
.blogmorelink a:link, .blogmorelink a:visited { /*Bővebben link*/
}
.blogmorelink a:hover { /*Bővebben link, amikor ráviszed az egeret*/
}
Ezt azután pedig ugyanúgy tudod formázni és alakítani, mint a sima linkeket.
Címkék formázása
A címkékre a .blogtags vonatkozik, és gyakorlatilag ugyanazon a módon tudod formázni, mint a Bővebben feliratot. A felső sávot és a "Címkék:" feliratot tehát a következőképpen:
.blogtags {
background-color: #ffffff; /*a címkék sáv háttere*/
font-family: georgia; /*Címkék: felirat betűtípusa*/
font-size: 11px; /*Címkék: felirat mérete*/
}
Ugyanúgy a címkék linkjeit is a fent leírt módon formázod:
.blogtags a:link, .blogtags a:visited { /*címke link*/
}
.blogtags a:hover { /*címkelink, amikor ráviszed az egeret*/}
Fontos: A Bővebben felirattal ellentétben, ha a .blogtags részhez teszel háttérszínt, az egész sáv hátterére fog vonatkozni. Ha az individuális címkéknek szeretnél hátteret, ahogy azt a blogon is láthatod, akkor a background-color-t a címkék linkjeihez tedd, azaz a .blogtags a:link... részhez. Azokhoz a jellemzőkhöz, amik eltérnek az oldalon használt alap linkeffekttől, írd hozzá azt, hogy !important, felkiáltójellel. Például ha az alap linkek kisbetűsek, de a címkéket/Bővebben gombot nagybetűsnek szeretnéd, akkor ez a jellemző így fog kinézni:
text-transform: uppercase!important;
Remélem, semmit sem felejtettem ki. Ha valami még mindig nem úgy működik, ahogyan kellene, írj kommentet és megoldjuk a problémát!
xoxo, Florae