Selektory CSS

CSS Tutorial

Selektory CSS

Napisałam dla Was już parę instrukcji, ale zdałam sobie sprawę, że nie przedstawiłam Wam najbardziej podstawowej rzeczy - selektorów CSS, które jakby nie patrzeć są potrzebne przy jakichkolwiek zmianach. Dlatego dziś przedstawię Wam listę tych selektorów.
Ostatnio dostałam kilka maili od osób z pytaniami "Jaki jest kod na wyśrodkowanie nagłówka" "Jak zmienić nagłówki gadżetów" i jeszcze wiele wiele więcej. Selektory pomogą Wam w otrzymaniu odpowiedzi na dane pytanie.

Selektory ogólne

body - odpowiada za cały blog
.content-outer -  Obejmuje on obszary - nagłówka, postów, kolumny bocznej, pagera.
 #Blog1 - odpowiada za obszar całego postu wraz z jego datą i pagerem bloga
.Attribution - podpis w stopce bloga czyli miejsce gdzie jest napis Technologia Blogger
.navbar - pasek nawigacyjny na górze bloga
.cookie-choices-info - ramka z informacją o ciasteczkach
.cookie-choices-info .cookie-choices-text - tekst (informacja o ciasteczkach)
.cookie-choices-info .cookie-choices-button - przyciski w informacji o ciasteczkach
a:hover - wszystkie linki po najechaniu na nie myszką
.feed-links - napis Subskrybuj: Posty (Atom)

Nagłówek

.header - nagłówek bloga
.Header h1 - tytuł bloga
.Header .description - opis bloga, pod nagłówkiem

Posty

.post-outer - odpowiada tylko za obszar postu, bez daty i pagera.
.date-outer - odpowiada za obszar całego postu wraz z datą bez pagera.
.date-header  lub h2.date-header - cały obszar nagłówka z datą (na całą długość postu)
.date-header span - tylko nagłówek z datą
.post-footer - stopka postu
h3.post-title - cały obszar tytułu wpisu (na całą długość)
h3.post-title a - tylko obszar tytułu wpisu
h3.post-title a:hover - tytuł postu po najechaniu na niego myszką
.post-author - autor w stopce wpisu
.comment-link - komentarze w stopce wpisu
.post-footer-line-2 - etykiety w stopce wpisu
.post-body  - obszar samego wpisu bez daty i tytułu wpisu
.post-body img  - wszystkie zdjęcia umieszczone w poście
.jump-link - przycisk czytaj więcej w poście
.jump-link:hover - przycisk czytaj więcej w poście po najechaniu na niego myszką
.post blockquote - cytaty w poście
.column-center-inner - odpowiada za obszar postu wraz z datą, stopką postu oraz pagerem.

Komentarze

.comment-header - nagłówek komentarzy z nazwą komentującego,datą i godziną. Przykład możecie zobaczyć u mnie na blogu
.comments h4 - nagłówek komentarzy nad wszystkimi dodanymi komentarzami pod postem.
.comment p  - wszystkie komentarze
.comments .comment .comment-actions a, .comments .thread-toggle a - przyciski odpowiedz i usuń pod komentarzem.
.comments .comment .comment-actions a:hover, .comments .thread-toggle a:hover - przyciski odpowiedz i usuń pod komentarzem po najechaniu na nie myszką.
.avatar-image-container - avatary obok komentarzy

Kolumna boczna

.column-right-inner - odpowiada za obszar całej prawej kolumny,selektor ten może nam posłużyć do ustawienia ramki kolumny lub tła
.column-left-inner - odpowiada za obszar całej lewej kolumny,selektor ten może nam posłużyć do ustawienia ramki kolumny,tła lub wielkości czcionki.
.column-right-inner .widget - dotyczy wszystkich gadżetów w prawej kolumnie
.column-left-inner .widget - dotyczy wszystkich gadżetów w lewej kolumnie

Gadżety

.sidebar .widget h2 - odpowiada za wszystkie nagłówki gadżetów w kolumnach bocznych
.widget h2 - odpowiada za wszystkie nagłówki gadżetów wraz z datą
.main-inner .widget h2 - odpowiada za wszystkie nagłówki gadżetów w kolumnach bocznych oraz za nagłówek z datą
#Label1  - cały obszar etykiet wraz z tytułem gadżetu.
.label-size a - tylko etykiety
#Label1 h2 - nagłówek gadżetu etykiety
#Label1 a:hover - linki etykiet po najechaniu na nie myszką
#BlogArchive1 - gadżet archiwum
#BlogArchive1 h2 - Nagłówek gadżetu archiwum
#BlogArchive1 a - linki w archiwum
#BlogArchive a:hover - linki archiwum po najechaniu na nie myszką
#ArchiveList  - sam lista archiwum bez nagłówka gadżetu
#Stats1  - gadżet statystyki
#Stats1 h2  - Nagłówek gadżetu statystyki
#Text1 - cały gadżet z tekstem, liczba 1 jest zmienna zależy od tego jaki nasz gadżet Tekst ma numerek, żeby to sprawdzić wystarczy wejść w układ-otworzyć nasz gadżet z Tekst i na górze przewinąć link do samego końca tam nam się pojawi jaki numer ma nasz gadżet.
#Image1 - cały gadżet z obrazkami na blogu, tutaj również liczba jest zmienna jak w przypadku gadżetu tekst i tak samo się to sprawdza.
#FollowByEmail1 - cały gadżet obserwuj przez e-mail
#HTML1 - cały gadżet HTML/JavaScript, tutaj również liczba jest zmienna jak w przypadku zdjęć i tesktu.
#Followers1 - cały gadżet z obserwatorami bloga
.popular-posts - cały gadżet popularnych postów
.popular-posts  .item-thumbnail img  - miniaturka popularnych postów
#BlogArchive1_ArchiveMenu - archiwum, styl menu
.FollowByEmail .follow-by-email-inner - gadżet obserwuj przez e-mail
.FollowByEmail .follow-by-email-inner .follow-by-email-address - pole do wpisywania adresu w gadżecie obserwuj przez e-mail
.FollowByEmail .follow-by-email-inner .follow-by-email-submit - przycisk do subskrypcji w gadżecie obserwuj przez e-mail

Strony/menu

.tabs-outer lub .tabs-inner - pasek stron
.tabs-inner .widget li a - same strony
.tabs-inner .widget li.selected a - aktywna strona tzn. strona na której obecnie się znajdujemy
.tabs-inner .widget li a:hover - strony po najechaniu myszką
#PageList1 - cały gadżet ze stronami
#PageList1 a - same strony
#PageList1 a:hover  - strony po najechaniu myszką

Stopka bloga/pager bloga

.footer-outer - stopka bloga
.footer-outer h2 - nagłówki gadżetów w stopce bloga
.blog-pager  - cały obszar pagera bloga (starsze, nowsze posty)
.blog-pager a - tylko obszar przycisków starsze, nowsze posty i strona główna
.blog-pager a:hover  - przyciski starsze, nowsze posty i strona główna po najechaniu na nie myszką
a.home-link - przycisk strona główna w pagerze bloga
a.home-link:hover - przycisk strona główna w pagerze bloga po najechaniu myszką
a.blog-pager-older-link - przycisk starsze posty
a.blog-pager-older-link:hover - przycisk starsze posty po najechaniu myszką
a.blog-pager-newer-link  - przycisk nowsze posty
a.blog-pager-newer-link:hover - przycisk nowsze posty po najechaniu myszką

Czytaj dalej

Jak wykonać aktywny przycisk czytaj więcej + odpowiedzi na pytania

CSS Tutorial

Jak wykonać aktywny przycisk czytaj więcej + odpowiedzi na pytania

Tak naprawdę jest to bardzo proste do zrobienia i wielkiej filozofii w tym nie ma. Taki aktywny buton "czytaj więcej" możemy wykonać za pomocą kodów CSS. Pokażę wam dwa kody i różne opcje jak taki buton można dostosować do własnych potrzeb.
Pierwsze co należy zrobić aby taki buton posiadać to oczywiście zastosować na swoim blogu zwijanie tekstu. Taką możliwość mamy podczas tworzenia postu. Opcja ta znajduje się obok ikonki,która umożliwia nam wstawianie filmów.

Trzeba pamiętać aby kliknąć w tą ikonkę po fragmencie tekstu,który ma się wyświetlać jako nasz wstęp,oczywiście można tą opcje zastosować po głównym zdjęciu,które wstawiliśmy na początku wtedy pojawiać nam się będzie tylko pierwsze zdjęcie i buton,który zaprowadzi nas do wpisu.

Jak widać po wybraniu opcji zwijania tekstu pojawia nam się szara kreska,która pokazuje nam,w którym miejscu oddzieliliśmy nasz tekst i która jego część będzie widniała na stronie głównej.
Nasz buton obecnie jest mały i słabo widoczny,ale dzięki temu tutorialowi zmienimy to. Zaczynamy.

Jeśli nie chcesz posiadać aktywnego butony (który się zmienia po najechaniu myszką) omiń punkt II.

I. Najpierw zajmiemy się kodem,który odpowiada za wygląd "czytaj więcej" przed najechaniem na niego myszką.

1. Nasz buton znajduje się obecnie po lewej stronie,ale co zrobić aby znajdował się po środku lub po prawej stronie? Należy wpisać ten kod:

.jump-link a, #blog-pager-post a {text-align: center; } lub .jump-link a, #blog-pager-post a {text-align: right; }

Nasz odnośnik do wpisu został ustawiony.

2. W tym punkcie zmienimy wielkość i rodzaj czcionki "czytaj więcej" za pomocą tego kodu:

.jump-link a, #blog-pager-post a {font: normal 30px Times New Roman;} 

 pogrubienie to są wartości zmienne,pierwsza to wielkość czcionki,a druga to rodzaj,można się tu pobawić i dopasować wedle uznania.

3. Teraz dodajmy "efekty specjalne" takie jak: tło,marginesy,zaokrąglenia,ramka,kolor linku.

A. Kod odpowiadający za tło naszego butonu: (pamiętamy o tym,że wartości pogrubione to wartości zmienne)

.jump-link a, #blog-pager-post a {background-color: #f8ecf3;} 

lub

.jump-link a, #blog-pager-post a {background-image: url(adres do obrazka);}

B. Marginesy:

.jump-link a, #blog-pager-post a {margin: 0px 265px 0px 265px;}

Pierwsza wartość to margines górny,odpowiada on za odległość między tekstem/zdjęciem,a buttonem.
Druga wartość to margines prawy,dzięki niemu możemy ustawić długość naszego butonu.
Trzecia wartość to margines dolny,odpowiada za odległość między tym co znajduje się pod butonem.
Czwarta wartość to margines lewy i ma takie samo zastosowanie jak margines prawy

C. Zaokrąglenia:

.jump-link a, #blog-pager-post a {border-radius: 10px 10px 10px 10px;}

Pierwsza wartość odpowiada za górny lewy róg
Druga wartość odpowiada za górny prawy róg
Trzecia wartość odpowiada za dolny prawy róg
Czwarta wartość odpowiada za dolny lewy róg

D. Ramka:
Rodzaje ramek: solid - linia ciągła, double - linia podwójna, dashed- linia kreskowana, dotted - linia kropkowana 

.jump-link a, #blog-pager-post a {border-style: solid;}

Grubość ramki:

.jump-link a, #blog-pager-post a {border-width: 1px;}

Kolor ramki:

.jump-link a, #blog-pager-post a {border-color: #cccccc;}

E. Kolor linku:
Aby kolor linku zmieniał nam się po najechaniu wystarczy w projektancie szablonów wejść w zakładkę linki.

Ważne jest aby kolor linku był inny od koloru linku po wskazaniu kursorem.

II. Aktywna części butonu.

Kody wyglądają tak samo jedyne co musimy dodać przed .jump-link, #blog-pager-post a to :hover,czyli ma to wyglądać tak:

.jump-link a:hover, #blog-pager-post a:hover

Po tym możemy wpisywać wszystkie te opcje co podane w punkcie 3. Pamiętaj jednak,że aby efekt był zamierzony to musisz pozmieniać niektóre wartości,aby różniły się wyglądem od butonu przed najechaniem na niego myszką.
Co możesz zmieniać? kolor tła,ramki,kolor ramek i ich grubość oraz zaokrąglenia.

Teraz nadszedł czas pytań i odpowiedzi. 

Monika z bloga classic&red nominowała mnie do  Liebster Blog Award 2014 i moim zadaniem jest odpowiedzieć publicznie na zadane przez nią pytania,które umieściła na swoim blogu i nominować kolejne osoby. Nominować nikogo nie będę,bo zupełnie nie mam pomysłu na pytania. 

1. W jaki sposób najchętniej wypoczywasz? 

- Najchętniej wypoczywam w stajni,spędzam tam każdą wolną chwilę.

2. Wymarzone miejsce na wakacje? 

- Raczej trzymam się zasady,że nie ważne gdzie,ważne z kim. Jak ma się odpowiednie osoby wokół siebie to każde miejsce staje się tym wymarzonym. 

3. Ulubiony deser? 

- Koktajl owocowy 

4. Jak według Ciebie powinna wyglądać idealna randka?

- Spacer po parku

5. Ufasz bardziej lekom z apteki,czy naturalnym środkom z Twojej kuchni? Weź pod uwagę działanie i ewentualne skutki uboczne.

- Zdecydowanie lekom. Jestem alergikiem i naturalne środki mogłyby mi zaszkodzi niż pomóc. 

6. Jaka jest dla Ciebie najważniejsza cecha u mężczyzn? 

- Cierpliwość 

7. Kot czy pies? 

- Pies 

8. Jaki film mi polecasz? 

- Na pewno być może 

9. Najzabawniejsza sytuacja,która Cię spotkała? 

- Pozostawię to dla siebie :) 

10. Ulubiona piosenka? 

- Nie mam ulubionej piosenki. 

11. Jaki jest twój kosmetyczny ulubieniec? 

- Oliwkowy balsam do ust z Ziaji 

Aktualizacja 11.02.2015

Czytaj dalej

Jak w prosty sposób zmienić wygląd etykiet

CSS Tutorial

Jak w prosty sposób zmienić wygląd etykiet

Etykiety - gadżet dzięki,któremu łatwiej jest nam coś znaleźć na blogu. Miło jest gdy nawet taki gadżet jak etykiety wygląda tak jak chcemy dlatego w dzisiejszym tutorialu pokarzę wam jak w prosty sposób odmienić nasze etykiety.


Do zmiany wyglądu etykiet będzie nam potrzebny następujący kod:

.label-size a{

 float: left; 

 height: 30px;

 line-height: 30px; 

 position: relative;

 font-size: 14px;

 margin-bottom: 10px;

 margin-left: 10px;

 padding:0 20px 0 20px;

 background:#000;

 color:#fff;

 text-decoration:none;

 -moz-border-radius-bottomright:0px;

 -webkit-border-bottom-right-radius:0px;

 border-bottom-right-radius:0px;

 -moz-border-radius-topright:0px;

 -webkit-border-top-right-radius:0px;

 border-top-right-radius:0px;

 }

.label-size a:hover{background: #ccc;}

Teraz przeanalizujmy nasz kod krok po kroku

.label-size a{

 float: left; - położenie etykiet 

 height: 30px;  - wysokość     

 line-height: 30px; - wysokość  (ważne jest żeby w tych dwóch miejscach były takie same wartości) 

position: relative;

 font-size: 14px; - wielkość czcionki 

 margin-bottom: 10px; - margines dolny 

 margin-left: 10px; - margines lewy 

 padding: 0px 20px 0px 20px;  - wielkość naszych etykiet pierwsza wartość odpowiada za górną krawędź naszych etykiet, druga wartość odpowiada za długość prawego boku,trzecia wartość odpowiada za dolną krawędź etykiety,czwarta wartość odpowiada za długość lewego boku. 

 background:#000; - kolor naszych etykiet

 color:#fff; - kolor tekstu 

 text-decoration:none;

 -moz-border-radius-bottomright:0px;

 -webkit-border-bottom-right-radius:0px; - zaokrąglenie prawego dolnego rogu 

 border-bottom-right-radius:0px;

 -moz-border-radius-topright:0px;

 -webkit-border-top-right-radius:0px; - zaokrąglenie prawego górnego rogu 

 border-top-right-radius:0px;

 }

.label-size a:hover{background: #ccc;} - kolor etykiety po najechaniu na nią myszką 

Ps. Bardzo ważne jest aby przy tym nasze etykiety były wyświetlane w formacie chmury
Ps2. Zapraszam wszystkich fanów DIY do polubienia jedynej takiej strony na Facebooku. Stronę tworzą rękodzielnicy podsyłając do administratorów swoje pomysły wraz ze zdjęciami i dokładnymi instrukcjami STRONA - KLIK  strona dopiero się rozkręca,więc będzie naprawdę miło jak przybędzie trochę lajków :)
Ps3. Dajcie znać w komentarzu co myślicie o nowej szacie graficznej bloga,postawiłam jednak na kafelki - według mnie dzięki nim blog jest bardziej przejrzysty.

Czytaj dalej

Jak zmienić wygląd paska przewijania na blogu

CSS Tutorial

Jak zmienić wygląd paska przewijania na blogu

Pasek przewijania strony - mały szczegół,większość z nas nie zwraca nawet na niego uwagi jednak,fajnie to wygląda kiedy nawet taki mały szczegół komponuje się z naszym blogiem.
W dzisiejszym tutorialu pokaże wam jak w bardzo prosty sposób możemy odświeżyć nasz pasek przewijania na blogu.

Pamiętaj aby przed rozpoczęciem edycji szablonu zrobić kopię zapasową 

1. Przechodzimy do szablon - edytuj kod HTML 

2. Klikamy kursorem w dowolne miejsce a następnie za pomocą CTRL + F wywołujemy okno wyszukiwania.




3. W oknie wyszukiwania wpisujemy ]]></b:skin> i klikamy enter.

4. Kiedy już znajdziemy wyszukiwany  przez nas fragment kodu to nad nim wklejamy następujący  kod:

::-webkit-scrollbar {

background:#fff;             

width:10px; 

}

::-webkit-scrollbar-thumb {

-webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.5);

background-image: -webkit-linear-gradient(top, #3FB1AE  10%, #3FB1AE 51%);

}

::-webkit-scrollbar-track {

}

background:#fff; - kolor tła 

width: 10px - szerokość naszego paska

background-image: -webkit-linear-gradient(top, #3FB1AE  10%, #3FB1AE 51%) - kolory naszego paska,jeśli ma być on w jednolitym kolorze to ten sam kolor musi byc zarówno przy 10% i przy 51% aby uzyskać efekt tzw ombre na naszym pasku zmieniamy kolor albo przy 10% albo przy 51% 

Jeśli chcemy mieć dwukolorowy pasek bez efektu ombre to zmieniamy 10 % na 51% (wartościami procentowymi możemy się bawić) 

Oto kilka przykładów: 

Czytaj dalej

Kategorie/etykiety wyglądające jak strony czyli podpinanie etykiet pod menu

Tutorial

Kategorie/etykiety wyglądające jak strony czyli podpinanie etykiet pod menu

W dzisiejszej instrukcji pokażę Wam jak w prosty sposób zrobić kategorie/etykiety wyglądające jak strony. Inaczej - jak podpiąć etykiety/kategorię pod strony/menu. Dzięki temu, posegregujemy sobie wszystkie wpisy w przejrzysty sposób.

Instrukcja, jest podana na podstawie menu Blogspota (Bloggera), jednak bez problemu można ją wykorzystać także na menu/stronach, które stworzyliśmy w kodzie HTML.

1. Dodajemy do postów etykiety

2. Wchodzimy w Układ - dodaj gadżet - etykiety

3. Zmieniamy z opcji "wszystkie etykiety" na "wybrane etykiety" i klikamy "edytuj" otworzy nam się lista etykiet i zaznaczamy te,które mają być wyświetlane i klikamy "zapisz"

4. Następnie znowu klikamy na "dodaj gadżet" i tym razem szukamy gadżetu "strony" 

5.Otworzy nam się okno ze stronami i klikamy "dodaj stronę z linkiem"

W przypadku menu w kodzie HTML przechodzimy do motyw - klikamy na trzy szare kropeczki w prawym rogu - edytuj kod HTML, klikamy kursorem obojętnie jakie miejsce w kodzie i wybieramy ctrl+f, wpisujemy daną frazę, która pozwoli nam znaleźć nasze menu w kodzie

6. Otworzy nam się okienko gdzie wpiszemy nazwę strony i dodamy do niej odnośnik (w polu adres internetowy (URL)), należy w nowych kartach otworzyć każdą kategorię "etykietę" aby skopiować link. Robimy tak z każdą etykietą, którą chcemy dodać.

W przypadku menu w kodzie HTML podmieniamy link przy danej kategorii lub jeśli nie mamy uzupełnionych linków, to podmieniamy dane oznaczenia - prawdopodobne oznaczenia to # lub LINK

Gotowe! Nasze etykiety są już podpięte do menu/stron i teraz każdy post, który przypiszemy danej etykiecie będzie się wyświetlał w odpowiedniej stronie :) 

Czytaj dalej

Usuwanie ramek, cieni z obrazów i edytowanie daty wpisów

CSS Tutorial

Usuwanie ramek, cieni z obrazów i edytowanie daty wpisów

W dzisiejszym wpisie podam kilka kodów, których ja bardzo poszukiwałam na początku zabawy z szablonem i które mogą nam się przydać. Wiele osób pisało do mnie z prośbą m.in. o te kody. Pomyślałam sobie "czemu nie, podzielę się tym co wiem" i zabrałam się za pisanie tego wpisu. Myślę, że wasze oczekiwania co do tego wpisu zostały spełnione, także korzystajcie do woli z podanych kodów.

Usuwanie ramek i cieni z obrazów (szablon Simple) : 

Wpisy 

.post-body img {border: 0 !important;
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
padding: 0px !important;
background: none !important;
}

Kolumna prawa 

.column-right-inner img {border: 0 !important;
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
padding: 0px !important;
background: none !important;
}

Kolumna lewa

.column-left-inner img {border: 0 !important;
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
padding: 0px !important;
background: none !important;
}

Dodanie tła do daty:

h2.date-header {background: #ffffff;}
h2.date-header {background:#ffffff repeat; }

Oczywiście kolor można zmieniać
Jeśli chcemy dodać własną grafikę w tle wpisujemy kod:

h2.date-header {background: #000000;}
h2.date-header {background: url(Link do obrazka)repeat; }

+ jak chcemy zmienić wysokość tła daty wpisujemy kod

h2.date-header {background: url(Link do obrazka)repeat; height: 150px;}

lub

h2.date-header {background: #000000 repeat; height: 150px;} 

(dotyczy tylko kiedy w tle mamy sam kolor bez grafiki)

150px można dowolnie zmieniać według własnego uznania

Kolejny kod, również dotyczy daty. Tym razem, kod zmieni nam położenie daty.

Zmiana położenia daty

h2.date-header {text-align: right; } - data po prawej stronie

h2.date-header {text-align: center; } - wyśrodkowanie

Czytaj dalej