poniedziałek, 7 kwietnia 2014

Jak to jest zrobione?

No więc w tym poście pokaże wam jak zrobiłam szablon "Together, we are stronger".
Może sie wydawać, ze to trudne, ale to tylko pozory.
No więc zaczynamy.

1)Jeśli juz mamy wybrany nagłówek. Musimy zdobyć do niego link. Ja używam www.imageshack.us
Klikamy upload: 


Natępnie wybieramy nagłówek któy nas interesuje:


 Zdjecie się ładuje:


 Klikamy Go to My Images:

Wybieramy link i go kopiujemy:


Wchodzimy w edytor szablonów w bloggerze:

W punktach:
Strona: 
Kolor tła:"przezroczyste"
Tło kart:
Kolor tła: transparent
Kolor po zaznaczeniu: transparent
Kolor obramowania: transparent
Nagłówek z datą: 
Kolor obramowania: transparent
Tło posta:
Kolor tła: transparent
Kolor obramowania: transparent
Kolor skosu: transparent
Tekst gadżetów:
Kolor alternatywny: transparent
Tło gadżetów:
Kolor tła: transparent
Kolor obramowania: transparent
Kolor skosu: transparent
Tło paska bocznego:
Kolor tła: transparent
Obrazy:
Kolor tła: transparent
 Kolor obramowania: transparent
Pager: 
 Kolor tła: transparent
 Stopka:
 Kolor tła: transparent

ZACZNIEMY ZA CHWILE PISAĆ ŁĄTWY CSS
JEDNAK WCZEŚNIEJ POLECAM ZMIENIC W "SZABLONY: 


 Jeśli mamy już to ustawione przechodzimy do 
DODAJ ARKUSZ CSS

 Tu zaczynaja się schody, jednak nie tak wysokie. 

Zaczynamy od pisania selektora "body"
body STAWIAMY SPACJE I DAJEMY NAWIAS KLAMROWY, ZNACZY OTWIERAMY POLECENIE JAKIE CHCCEMY ZASTOSOWAĆ {
background-image: url(TUTAJ WSTAWIAMY LINK NASZEGO NAGŁÓWKA) I STAWIAMY ŚREDNIK (;)
background-position: WYBIERAMY POZYCJE GDZIE MA SIE ZNAJDOWAĆ NAGŁOWEK- PODSTAWOWE TO: "top" "center" "bottom" "left" "right" OCZYWIŚCIE WPISUJEMY BEZ CUDZYSŁOWIA; NA KOŃCU KAŻDEGO POLECENIA WSTAWIAMY ŚREDNIK (;);
background-size:TUTAJ WYBIERAMY ROZMIAR NAGŁÓWKA W PIKSELACH (px) I ZNWOU NA KOŃCU STAWIAMY ŚREDNIK (;)
NA KOŃCU MUSIMY ZAMKNĄĆ POLECENIE NAWIASEM KLAMROWYM }

MOJ SELEKTOR body WYGLADA TAK :

IDZIEMY DALEJ


header {
height: TUTAJ WPISUJEMY WYSOKOSĆ W PIKSELACH (px) I ZNWOU ZAMYKAMY ŚREDNIKIEM I NAWIASEM KLAMROWYM;
}
U MNIE WYGLADA TO TAK:
DALEJ ZAJMIEMY SIĘ RAMKĄ POSTA:
W TYM CELU WPISUJEMY SELEKTOR '#Blog1' ISTNIEJA INNE SELEKTORY NA TO ALE JA UŻYWAM TEGO


#Blog1 {
background-color: ; WPISUJEMY NUMER KOLORU, W TYM CELU JA KORZYSTAM Z PROGRAMU "JUST COLOR PICKER (LINK DO STRONY GDZIE MOŻNA POBRAĆ: TU)
border" którego zaraz użyjemy jest to ramka
top-góra
bottom- dół
left-lewo
right- prawo
radius- zaokrąglenia 

np. 
border-top: grubość w pikselach (px) rodzaj ramki (nizej dam wam obrazek z rodzajami) i kolor w ukłądzie szesnastkowym czyli np. #ffffff i zamykamy średnikiem;

RODZAJE RAMEK:


U MNIE WYGLĄDA TO TAK:

WIDZIMY ŻE NASZ WYGLĄD POSTA NADAL NIE JEST DOBRY.
TERAZ ZAJMIEMY SIĘ WYŚRODKOWANIEM TEKSTU, KOLOREM POD SAM TEKST I MARGINESAMI.

PISZEMY KOLEJNY SELEKTOR

.post {
background-color:KOLOR TŁA POD SAM TEKST (ZOBACZ);
padding: USTALAMY ODSTĘP WEWNĘTRZNY TEKSTU OD RAMKI W PIKSELACH (px);
margin-left: SZEROKOŚĆ MARGINESÓW W PIKSELACH(px);
margin-right: 1px;
border-radius: 38px;
text-align: RODZAJ WYRÓWNANIA TEKSTU(są: "justify" "left" "right" "center" TAK JAK W WORDZIE) NO I ZAMYKAMY POLECENIE ŚREDNIKIEM A POTEM KLAMERKĄ ;
}
NASZ SZABLON WYGLADA TERAZ TAK:

 ZMIENIAMY POŁOŻENIE DATY:
SELEKTOR: 'h2.date-header span'
h2.date-header span {
text-align: POŁOŻENIE DATY( MAMY DO WYBORU "center" "left" "right";
margin-bottom/top: ODLEGŁOŚĆ OD MARGINESU DOLNEGO/GÓRNEGO
;
}

 TERAZ TYTUŁ POSTA:
SELEKTOR: "h3.post-title"

h3.post-title {
text-align: center;
margin-bottom: -8px;
margin-top: -8px; ;
}

ZANIM ZROBIMY KOLEJNY KROK W CSS-IE I WPROWADZIMY KOLEJNY SELEKTOR MUSIMY PODJĄĆ DECYZJE O UKŁADZIE BLOGA. CZYLI ILE KOLUMN I JAK UŁOŻONYCH CHCEMY.  W TYM CELU PRZECHODZIMY DO "UKŁAD"
I WYBIERAMY:
WRACAMY DO CSS PO WYBRANIU UKŁADU
TWRAZ ZAJMIEMY SIĘ KOLUMNĄ LEWĄ/PRAWĄ (TĄ KTÓRĄ WYBRALIŚMY)
JA WYBRAŁAM OBIE WIĘC NAJPIERW ZAJMĘ SIĘ LEWĄ
PISZEMY SELEKTOR:
".column-left/right-inner"

.column-left-inner {
position: relative(PISZEMY TEN KOD ABY MÓC PÓŹNIEJ W PROSTSZY SPOSÓB OKREŚLIĆ DOKŁADNE POŁOŻENIE KOLUMNY);
top: -160px(WYSOKOŚĆ W PIKSELACH(px);
right: 90px(USTALAMY W KTÓRĄ STRONĘ CHCEMY PRZEMIEŚCIĆ KOLUMNĘ);
width: 250px(SZEROKOŚĆ RAMKI, JEŚLI WAM ODPOWIADA TA KTÓRA JUŻ JEST NIE MUSICIE TEGO PISAĆ);}
KOLEJNE KOLUMNY OKREŚLAMY W TAKI SAM SPOSÓB ZMIENIAJAC JEDYNIE NAZWĘ SELEKTORA.

TERAZ ZAJMĘ SIĘ KOLUMNĄ ŚRODKOWĄ.

.column-center-inner {
position: relative;
right: 30px;
top: 20px;
width: 640px;}

A TERAZ PRAWĄ:
.column-right-inner {
position: relative;
right: -30px;
top: -100px;
width: 200px;}

TERAZ ZAJMIEMY SIĘ WYGLĄDEM KOLUMN
SELEKTOR: ".column-right/left-inner .widget" 
WPISAŁAM .widget PONIEWAŻ WTEDY RAMKA NIE BEDZIE JEDNA ALE ICH BEDZIE WIELE.
CHODZI O TO:


.column-right-inner .widget {
background-color: RGBa(146, 156, 159, 0.2);
border-top: 6px solid #E9EAEE;
border-bottom: 6px solid #E9EAEE;
border-right: 2px solid #E9EAEE;
border-left: 2px solid #E9EAEE;
border-radius: 60px;
padding-bottom: 28px;
text-align: justify;
}

.column-left-inner .widget {
background-color: RGBa(146, 156, 159, 0.2);
border-top: 6px solid #E9EAEE;
border-bottom: 6px solid #E9EAEE;
border-right: 2px solid #E9EAEE;
border-left: 2px solid #E9EAEE;
border-radius: 60px;
padding-bottom: 28px;
text-align: justify;
}
ABY WYŚRODKOWAĆ TEKST W KOLUMNACH NALEŻY WPISAĆ:

h2 {
text-align: center;
}
JEŚLI SPOJRZYMY NA NASZ SZABLON JEST ON PRAKTYCZNEI GOTOWY JEDNAK COŚ NAM PRZESZKADZA. OH. TAK JEST TO NAPIS KTÓRY ZASŁANIA JAKĄS CZESĆ NASZEGO NAGŁOWKA. ABY GO USUNAĆ NALEZY WEJŚĆ W TYTUŁ BLOGA

I KOLOR TYTUŁU ZMIENIAMY NA PRZEZROCZYSTY.
JEŚLI NASZ BLOG POSIADA TAKŻE OPISA. WCHODZIMY W OPIS BLOGA I TAM ZMEINIAMY AN PRZEZROCZYSTE.

Mam nadzieję, że pomogłam. 
JEŚLI MACIE JAKIEŚ PYTANIA, PISZCIE W KOMENTARZACH. NA WSZYSTKIE ODPOWIEM.

1 komentarz: