19. Edycja Gadżetów: O mnie

Cześć! Postanowiłam skupić się na pojedynczych gadżetach. W dzisiejszym poście przestawię Wam całą konstrukcję #Profile1, czyli O mnie. Na pierwszy rzut oka, wydaję się być nudnym dodatkiem. Zazwyczaj nie zwraca się na niego uwagi, jednak ładnie edytowany może grać kluczową rolę w szablonie.


Tak wygląda surowy wygląd gadżetu O mnie:

Zacznijmy od selektorów:

#Profile1 - Cały gadżet O mnie

#Profile1 h2 - tytuł gadżetu

.profile-img - zdjęcie, avatar

.profile-link - wyświetl mój pełny profil

.profile-data - nasza nazwa, nick

.g-profile - logo bloggera przy nicku

Każdy z powyższych elementów możemy dowolnie edytować. Zmieniać kolor, ustawiać tło, przesuwać w inne miejsce. 

Poniżej prezentuję Wam przykładowe kody na zmianę wyglądu tego gadżetu

#Profile1 h2 { display: none ; } #Profile1 { padding: 20px ; } .profile-img { border-radius: 50%; } .profile-link { text-transform: uppercase ; font-size: 8px; letter-spacing: 2px ; background: #e07985 ; color: #fff !important ; padding: 5px ; display: block ; text-align: center ; position: absolute ; right: 5px ; width: 150px ; border-radius: 10px ; } .profile-data a{ font-size: 20px ; text-transform: uppercase ; color: #e07985 !important ; display: block ; padding: 0px ; position: relative ; top: 5px ; } .g-profile { background: transparent !important; }

#Profile1 h2 { display: none ; } #Profile1 { padding: 20px ; } .profile-img { width: 40px ; height: 40px ; } .g-profile { background: transparent !important ; } .profile-data { font-size: 30px ; text-transform: uppercase ; letter-spacing: 2px ; display: block ; position: relative ; left: -25px ; top: 5px ; } .profile-link { font-size: 8px ; text-transform: uppercase ; letter-spacing: 2px ; position: relative ; top: -10px ; }

#Profile1 h2 { display: none ; } #Profile1 { padding: 20px ; } .profile-img { display: none ; } .profile-data { Font-weight: normal !important ; text-transform: uppercase ; letter-spacing: 1px ; } .profile-link { font-size: 7px ; text-transform: uppercase ; letter-spacing: 1px ; color:#fff !important; background: #000 ; padding: 5px ; position: relative ; top: -10px ; border-radius: 3px ; }

#Profile1 h2 { display: none ; } #Profile1 { padding: 20px ; } .profile-img { border: solid 6px #701420 ; height: 50px ; width: 50px ; position: relative ; z-index: 100 ; } .g-profile { background: transparent !important ; } .profile-data a{ color: #fff!important ; text-transform: uppercase ; letter-spacing: 2px; background: #701420 !important; padding: 2px ; height: 11px !important; display: block ; } .profile-link { font-size: 8px ; text-transform: uppercase ; letter-spacing: 2px ; color: #fff !important ; background:#aa6d74 ; display: block ; padding: 15px ; position: relative ; z-index: 1 ; top: -7px ; }

#Profile1 h2 { display: none ; } #Profile1 { padding: 20px ; } .profile-img { border-radius: 100% ; border: solid 3px #717372 ; position: relative ; z-index:10 ; left: -10px ; } .profile-link { display: none ; } .g-profile { background: transparent !important ; } .profile-data a{ display: block ; background: #717372 !important; color: #fff !important ; font-weight: normal !important ; text-transform: uppercase ; font-size: 8px ; letter-spacing: 2px ; padding: 10px ; position: absolute ; width: 240px ; padding-left:80px !important ; z-index: 0 ; top: 55px ; }

W ten prosty sposób można edytować, pozornie nudnie wyglądający widżet na naszym blogu.
Może macie propozycje na kolejne instrukcje? Dajcie znać w komentarzach.