Jak dodać możliwość edycji szablonu przez projektanta?

» instrukcja » Jak dodać możliwość edycji szablonu przez projektanta?

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.

Krok 1.
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>

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); }

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);
}

Brak komentarzy:

Prześlij komentarz