katalog grafików
katalog granger
katalogowo
konstruktywna krytyka blogów
Mara-senpai

Co będzie?

  • Aktualizacja instrukcji 0/15
  • Simple Dark szablon
  • Simple Magic szablon

Witajcie na odnowionej stronie Rinne Lasair!

Nowa strona już jest, ale nadal czeka na kilka poprawek.

zobacz post

Nowy szablon Simple Magic już wkrótce!

Już niedługo pojawi się nowy szablon Simple Magic, który będzie zawierał możliwość dodania video na stronie startowej oraz będzie go można dowolnie edytować przez projektanta.

Zajrzyj do sklepu!

Rinne Lasair posiada teraz własny, oficjalny sklep. Znajdziecie tam również darmówki do pobrania!

przjedź do sklepu
W tej instrukcji dowiecie się jak stworzyć własny, responsywny szablon na blogspocie. Instrukcja przeznaczona jest dla trochę bardziej zaawansowanych osób, które potrafią posługiwać się HTMLem. Tutaj macie link do starej instrukcji Jak dopasować szablon do każdej rozdzielczości?
Krok 1.
Stwórzcie sobie blog próbny, wejdźcie w HTML i usuńcie wszystko, prócz

 <b:widget id='Blog1' locked='true' title='Posty na blogu' type='Blog'>
dużo rzeczy w środku
</b:widget>


Krok 2.
Na samej górze dodajcie:

<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' name='viewport'/>   
   <head>
  <b:include data='blog' name='all-head-content'/>
 <title><data:blog.pageTitle/></title>

 <b:skin><![CDATA[

]]></b:skin>

       </head>
       <body>


Pod </b:widget> dodajcie:

       </body>
</html>


Krok 3. 
Teraz musimy utworzyć sekcje, w której będą się znajdować nasze widgety. Wszystko działa na podobnej zasadzie co <div>. Możecie utworzyć ich ile tylko chcecie, ale pamiętajcie o zmianie nazwy id="nazwa"

<b:section id='kolumna-1'>
nasz widget, czyli np. cały kod Blog1 

</b:section>


Krok 4.
Zapiszcie szablon i zobaczcie czy wszystko działa. Otwórzcie swój blog w nowej karcie, czyż nie wygląda pięknie? ^o^ Teraz możecie wejść w układ, dodać więcej widetów, dodać nowe sekcje. Po tym trzeba wejść w CSS, albo w projektancie, albo w HTML:

 <b:skin><![CDATA[
tutaj daj swój kod css
]]></b:skin>
 


Krok 5. 
Podstawowy kod, od którego powinniście zacząć wygląda tak:

body {
margin:0px;  
padding:0;
font-family: open sans;
font-size:13px;
color:#ddd;
background: #0e0e18;
}

a { text-decoration:none;  color: #ddd; list-style-type: none; list-style-image: none; }
a:visited { color: #666; }
a:hover { color:#fff; }


Krok 6.
Teraz należy przejść do edycji sekcji w CSS. Jak stworzyć responsywny szablon, czyli taki, który na każdej rozdzielczość będzie wyglądać dobrze? Zasada jest prosta: width: %; i position: relative;.

#kolumna-1 {
width: 50% ;
margin-left: 25% ;
position: relative ;
}


Wystrzegajcie się używania position: absolute;. Ta funkcja jest bardzo przydatna, jednak trzeba dokładnie wiedzieć kiedy ją stosować, dlatego polecam poczytać o niej trochę więcej.

Krok +
Jeżeli macie dużo widetów bez tytułów, polecam i tak je nazywać, a następnie jedynie usunąć ich tytuł w CSS [ selektor h2 { display: none; } ]. To bardzo ułatwia pracę, gdy potrzebujesz coś znaleźć lub gdy chcesz coś edytować, a nie możesz tego zrobić na blogu i musisz przez układ. Ja wiele razy miałam tak, że nie mogłam znaleźć odpowiedniego widgetu HTML/JS, a z tą prostą metodą życie stało się łatwiejsze. W HTML widgety wyglądają tak:

  <b:widget id='LinkList1' locked='false' title='Tytuł danego widgetu' type='LinkList'>


więc łatwo możecie znaleźć dany selektor.
Dodatkowo jest to zapewne duże ułatwienie dla ludzi, którzy będą używać stworzonego przez ciebie szablonu.

Krok ++
Żeby szablon prezentował się dobrze, nie zapominajcie o edycji ciasteczek!  

div#cookieChoiceInfo {
z-index:999999999999999999999999999999999999999999999999999999999;
background: #0c0c0c;
color:#fff;
font-size: 10px !important;
font-family: open sans;
}
#cookieChoiceInfo &gt; div &gt; span.cookie-choices-text { font-size: 10px;}
#cookieChoiceInfo &gt; a:nth-child(2),a#cookieChoiceDismiss {
color:#ddd;
font-size:10px;
font-weight:bold;
}

#cookieChoiceInfo &gt; a:nth-child(2):hover, a#cookieChoiceDismiss:hover {
color:#666;
}

Brak komentarzy:

Prześlij komentarz

Facebook

Kontakt

W sprawie współpracy lub pytań/pomocy rinne.lasair@gmail.com
W sprawach dotyczących zamówień lub sklepu/produktów noskowicz.klaudia@gmail.com
W każdej sprawie można również pisać na facebooka
Numer konta bankowego do przelewów: 96 1020 5558 0000 8802 3176 1645

Dodatkowe informacje

Cennik, Usługi, FAQ oraz formularz kontaktowy znajdują się na stronie głównej.
Portfolio jest na chwilę obecną niedostępne.