Blogerzy wszystkich platform, łączcie się!

Dyskusje Blogerów, Fotoblogerów i Vlogerów - fora blogowe, graficzne, ogólnotematyczne
rozmowy o blogach, porady, instrukcje, ciekawostki z internetu



::
Autor Wiadomość
Martyna2707 
Blogger.Klub

Dołączyła: 24 Sie 2017
Posty: 0

Wysłany:    [Szablon Hilary] Jak zmienić wygląd etykiet w pasku bocznym

Cześć

Czy któś mógłby mi pomóc uzyskać taki efekt?



Zdjęcie pochodzi ze strony Blonparia, a dokładnie z tego wpisu:

Kod

http://blonparia.blogspot.com/2014/03/kategorie-wygladajace-jak-strony.html


Wszystko mam już skonfigurowane, nie umiem tylko w CSS'ie napisać kodu, który powodowałby taki wygląd jak na ostatnim zdjęciu w tamtym poście.

Na wszelki wypadek adres mojego bloga:

Kod

http://mydlosomami.blogspot.com/ (szablon Hilary)
 
  podziel się tym postem na:




Utwórz darmowe konto na forum --- Zaloguj się --- Polub Blogowicza na FB!
Dołącz do społeczności na G+ --- Dołącz do grupy Bloggerów na FB

Htsz 
Blogger Product Expert
Blogowicz.Team


Zaproszone osoby: 83
Imię: Arkadiusz Narowski
Pomógł: 810 razy
Wiek: 33
Dołączył: 01 Sty 2006
Posty: 8867
Miasto: Wrocław

Wysłany: 2017-08-25, 00:34   

Martyna2707, w komentarzach pod instrukcją na bonparia widzę, że autorka bloga nie podzieliła się z tobą rozwiązaniem. Ja też nie zdradzam wszystkich swoich trików za darmo, szczególnie jak ktoś zamierza prowadzić stronę komercyjną. Podpowiem jednak jak ugryźć temat wyglądu gadżetu z etykietami.

Po pierwsze wejdź do ustawień i zmień sposób prezentowania z chmury na normalną listę. To powinno pomóc w wyświetlaniu ich jeden pod drugim - jeżeli nie, to znaczy, że coś w CSS blokuje (prawdopodobnie float: left; albo display: inline-block;).

Przydatne będą selektory i znaczniki HTML znajdujące się w tym widżecie:

Kod

.Label
.widget-content
.list-label-widget-content
div
ul
li
a


Ogólnie to wszystko kręci się wokół podstaw CSS. Przydatne ustawienia (poczytaj sobie o tym):

Kod

background-color
color
display
float
margin
padding
text-align
border
font-size
na przykład margin i padding odpowiadają za marginesy zewnętrzne i wewnętrzne. W kursach HTML i CSS znajdzesz konkretne przykłady.

Przykładowy zapis stylu dla elementu jakim jest link w komórce listy:

Kod

.Label ul li a {background-color: pink; color: #ffffff; padding: 5px; margin: 5px 0; float: none; display: block;}


Gdzie wkleić kod? Możesz do sekcji CSS, warto też sprawdzić co jest już zdefiniowane i to ewentualnie zmodyfikować.
______________________________________________________
nie radzisz sobie? :arrow: pomoc indywidualna oraz blogi i strony na zamówienie
zapraszam do przewodnika po forum oraz grupy Blogger Polska! na fb

Think before you post™ | ^_^ na każdego posta znajdzie się riposta™

Jeżeli nasze posty pomogły rozwiązać Twoje problemy możesz odwdzięczyć się, udostępniając link do tego forum na swoim blogu, fanpejdżu lub stronie!
Nie zapomnij kliknąć
lubię to! na facebooku. :^^:
 
  podziel się tym postem na:
Martyna2707 
Blogger.Klub

Dołączyła: 24 Sie 2017
Posty: 0

Wysłany: 2017-08-25, 01:30   

Bardzo dziękuję! Ogólnie to brakowało mi tylko tego:

Kod

Label ul li a


Nie wiedziałam jak odnieść się do jednej komórki :)
Wszystkie podstawowe funkcje CSS'a, które wymieniłeś, zdążyłam już poznać kiedy edytowałam inne elementy bloga.
 
  podziel się tym postem na:
Htsz 
Blogger Product Expert
Blogowicz.Team


Zaproszone osoby: 83
Imię: Arkadiusz Narowski
Pomógł: 810 razy
Wiek: 33
Dołączył: 01 Sty 2006
Posty: 8867
Miasto: Wrocław

Wysłany: 2017-08-25, 01:52   

Można to jeszcze zawężać stosując na początku selektor paska bocznego .sidebar (lub identyfikator #sidebar) albo podmieniając .Label na konkretny ID gadżetu: #Label1
______________________________________________________
nie radzisz sobie? :arrow: pomoc indywidualna oraz blogi i strony na zamówienie
zapraszam do przewodnika po forum oraz grupy Blogger Polska! na fb

Think before you post™ | ^_^ na każdego posta znajdzie się riposta™

Jeżeli nasze posty pomogły rozwiązać Twoje problemy możesz odwdzięczyć się, udostępniając link do tego forum na swoim blogu, fanpejdżu lub stronie!
Nie zapomnij kliknąć
lubię to! na facebooku. :^^:
 
  podziel się tym postem na:
Xenusiowa 
Blogger.Klub


Imię: Natalia
Dołączyła: 24 Sie 2017
Posty: 33
Miasto: Mszczonów

Wysłany: 2017-08-25, 17:23   

Ja osobiście preferuję tworzyć etykiety przez tworzenie odnośników, jakoś wygodniej mi z efektami. ;)
______________________________________________________
 
  podziel się tym postem na:
Htsz 
Blogger Product Expert
Blogowicz.Team


Zaproszone osoby: 83
Imię: Arkadiusz Narowski
Pomógł: 810 razy
Wiek: 33
Dołączył: 01 Sty 2006
Posty: 8867
Miasto: Wrocław

Wysłany: 2017-08-25, 17:38   

Xenusiowa, każde rozwiązanie ma swoje wady i zalety. Do listy linków musisz te adresy dodawać ręcznie za każdym razem, ale możesz zarządzać ich kolejnością i edytować linki. W przypadku gadżetu ze stronami, tylko statyczne podstrony można dodać z automatu, resztę wpisuje się ręcznie i nie można potem modyfikować ich zawartości (trzeba skasować i dodać nową pozycję). Gadżet etykiet pozwala na szybką zmianę sposobu wyświetlania tagów (na przykład chmura, według popularności) i selekcję tylko wybranych z listy wszystkich użytych do tej pory, bez konieczności pamiętania struktury adresu URL.

Od strony CSS wielkich różnic nie ma. Gadżet ze stronami na klasę .PageList, ten od tagów .Label a lista linków .LinkList. Każdy z nich zamknięty jest w zwykłej liście ul/li.
______________________________________________________
nie radzisz sobie? :arrow: pomoc indywidualna oraz blogi i strony na zamówienie
zapraszam do przewodnika po forum oraz grupy Blogger Polska! na fb

Think before you post™ | ^_^ na każdego posta znajdzie się riposta™

Jeżeli nasze posty pomogły rozwiązać Twoje problemy możesz odwdzięczyć się, udostępniając link do tego forum na swoim blogu, fanpejdżu lub stronie!
Nie zapomnij kliknąć
lubię to! na facebooku. :^^:
 
  podziel się tym postem na:
Wyświetl posty z ostatnich:   
::
Odpowiedz do tematu
Nie możesz pisać nowych tematów. Zobacz szczegóły.
Nie możesz odpowiadać w tematach. Zobacz szczegóły.
Nie możesz zmieniać swoich postów
Nie możesz usuwać swoich postów
Nie możesz głosować w ankietach
Nie możesz załączać plików na tym forum
Nie możesz ściągać załączników na tym forum
Dodaj temat do Ulubionych
Wersja do druku

Skocz do:  

Powered by phpBB & Weblove.pl © 2006-2019 Wrocław | modified by Przemo © 2003 phpBB Group.
skocz na górę   |  shoutbox
 
Dodaj na Facebooku:

Zobacz także:


Szablony wordpress
kod zniżkowy -10% za licencję
w koszyku wpisz: Blogowicz
Wyszukaj na Blogowiczu:
snapchat blogowicz instagram blogowicz