Nowy szablon Dark magic!
Już teraz możesz pobrać darmowy szablon Dark magic na swojego bloga. Wystarczy że wyślesz maila o treści na adres
Right now you can download free template Dark magic on your blog! You just need to send me a raven!
przjedź do posta
Zastanawialiście się kiedyś jak to jest, że podstawowe szablony bloggera można edytować przez projektanta? Zmieniać fonty, kolory, tła. Okazuje się, że jest to całkiem proste do zrobienia i jak najbardziej możliwe do zastosowania w szablonie od zera.
główna
sklep
portfolio
tutoriale
ankieta
propozycje
Krok 1.
Wchodzimy w edycje HTML szablonu, tam trzeba teraz zmienić CSS, czyli <b:skin>
Krok 2.
Dzięki kodowi powyżej możemy w projektancie zmienić czcionkę na blogu, jej kolor, oraz tło bloga. Jak to działa?
I to tyle :D Generalnie jak się już oko przyzwyczai to jest to całkiem proste, problem jedynie tkwi w tym, żeby to dobrze rozplanować xD
Jak dodać obraz w tle przez projektanta?
Wystarczy dodać ten kod, który wyciągnęłam z szablonu prostego od bloggera huehue 😈 Usunięcie czegoś sprawi, że tło przestanie działać, natomiast jak najbardziej można dodawać swoje własne variable :>
Wchodzimy w edycje HTML szablonu, tam trzeba teraz zmienić CSS, czyli <b:skin>
<b:skin><![CDATA[
/* Variable definitions
====================
<Group description="Główny tekst" >
<Variable name="bodyfont" description="Czcionka na blogu" type="font" default="normal normal 13px open sans" value="normal normal 13px open sans"/>
<Variable name="bodycolor" description="Kolor czcionki na blogu" type="color" default="#a8a6a0" value="#a8a6a0"/>
<Variable name="bodytlo" description="Kolor tła na blogu" type="color" default="#111" value="#111111"/>
</Group>
*/
/* Content
----------------------------------------------- */
body{ font: $(bodyfont); color: $(bodycolor); background: $(bodytlo); }
]]></b:skin>
/* Variable definitions
====================
<Group description="Główny tekst" >
<Variable name="bodyfont" description="Czcionka na blogu" type="font" default="normal normal 13px open sans" value="normal normal 13px open sans"/>
<Variable name="bodycolor" description="Kolor czcionki na blogu" type="color" default="#a8a6a0" value="#a8a6a0"/>
<Variable name="bodytlo" description="Kolor tła na blogu" type="color" default="#111" value="#111111"/>
</Group>
*/
/* Content
----------------------------------------------- */
body{ font: $(bodyfont); color: $(bodycolor); background: $(bodytlo); }
]]></b:skin>
Krok 2.
Dzięki kodowi powyżej możemy w projektancie zmienić czcionkę na blogu, jej kolor, oraz tło bloga. Jak to działa?
<Group description="Główny opis elementu, który zmieniamy" >
<Variable name="nazwa" description="Drugi opis, przydatny gdy mamy więcej rzeczy w grupie" type="font" default="podstawowy wygląd, gdy kodujesz" value="trzeba wpisać to samo, gdy będziesz edytować szablon w projektancie tutaj będzie się to zapisywać"/>
<Variable name="nazwa2" description="Trzeci opis" type="color" default="kolor" value="kolor"/>
<Variable name="nazwa3" description="Czwarty opis" type="color" default="kolor" value="kolor"/>
</Group>
selektor { font: $(nazwa); color: $(nazwa2); background: $(nazwa3); }
<Variable name="nazwa" description="Drugi opis, przydatny gdy mamy więcej rzeczy w grupie" type="font" default="podstawowy wygląd, gdy kodujesz" value="trzeba wpisać to samo, gdy będziesz edytować szablon w projektancie tutaj będzie się to zapisywać"/>
<Variable name="nazwa2" description="Trzeci opis" type="color" default="kolor" value="kolor"/>
<Variable name="nazwa3" description="Czwarty opis" type="color" default="kolor" value="kolor"/>
</Group>
selektor { font: $(nazwa); color: $(nazwa2); background: $(nazwa3); }
I to tyle :D Generalnie jak się już oko przyzwyczai to jest to całkiem proste, problem jedynie tkwi w tym, żeby to dobrze rozplanować xD
Jak dodać obraz w tle przez projektanta?
Wystarczy dodać ten kod, który wyciągnęłam z szablonu prostego od bloggera huehue 😈 Usunięcie czegoś sprawi, że tło przestanie działać, natomiast jak najbardziej można dodawać swoje własne variable :>
/* Variable definitions
====================
<Variable name="keycolor" description="Main Color" type="color" default="#66bbdd" value="#cc6611"/>
<Group description="Backgrounds" selector=".body-fauxcolumns-outer">
<Variable name="body.background.color" description="Outer Background" type="color" default="#66bbdd" value="#eeaa00"/>
</Group>
<Variable name="body.background" description="Body Background" type="background"
color="$(body.background.color)" default="$(color) none repeat scroll top left" value="$(color) none repeat scroll top left"/>
*/
/* Content
----------------------------------------------- */
body {
background: $(body.background);
}
====================
<Variable name="keycolor" description="Main Color" type="color" default="#66bbdd" value="#cc6611"/>
<Group description="Backgrounds" selector=".body-fauxcolumns-outer">
<Variable name="body.background.color" description="Outer Background" type="color" default="#66bbdd" value="#eeaa00"/>
</Group>
<Variable name="body.background" description="Body Background" type="background"
color="$(body.background.color)" default="$(color) none repeat scroll top left" value="$(color) none repeat scroll top left"/>
*/
/* Content
----------------------------------------------- */
body {
background: $(body.background);
}
Subskrybuj:
Komentarze do posta (Atom)
Brak komentarzy:
Prześlij komentarz