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 (Arek)
Pomógł: 809 razy
Wiek: 33
Dołączył: 01 Sty 2006
Posty: 8863
Miasto: Wrocław

Wysłany: 2017-08-24, 23: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 lub dodać do obserwowanych na google+. :^^:
 
  podziel się tym postem na:
Martyna2707 
Blogger.Klub

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

Wysłany: 2017-08-25, 00: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 (Arek)
Pomógł: 809 razy
Wiek: 33
Dołączył: 01 Sty 2006
Posty: 8863
Miasto: Wrocław

Wysłany: 2017-08-25, 00: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 lub dodać do obserwowanych na google+. :^^:
 
  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, 16: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 (Arek)
Pomógł: 809 razy
Wiek: 33
Dołączył: 01 Sty 2006
Posty: 8863
Miasto: Wrocław

Wysłany: 2017-08-25, 16: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 lub dodać do obserwowanych na google+. :^^:
 
  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-2018 Wrocław | modified by Przemo © 2003 phpBB Group.
skocz na górę   |  shoutbox
 
Dodaj na Facebooku:
Dodaj na Google+:


Zobacz także:


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