Komercyjnie
noskowicz.klaudia@gmail.com

lub

Potrzebujesz w czymś pomocy lub chcesz napisać w sprawie współpracy?
rinne.lasair@gmail.com

Rinne ☽ Lasair
Klaudia ☾ Noskowicz

20.11 Skorpion ♏ | Gryfon | 165cm | Optymista

❤ DGD ~ Koty ~ BDO ~ Kosmos ~ Burza ~ Anime
💔 Horrory ~ Spoilery

Responsywne szablony na witrynę blogspot, loga, grafika 3d, animacje oraz tutoriale.

Główna Portfolio Blog
O mnie
Kontakt

Co będzie?

  • Responsywne półkafelkowe posty (czytaj dalej + decydujesz ile znaków ma się pojawiać) bez skryptów | Obrazek przed tytułem
  • Nowy główny pewnie niedługo :>
  • Burning moon 3d
  • Simple Dark szablon
  • Szablon do opowiadań
  • Szablon RPG

Szukaj

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 opistype="color" default="kolor"  value="kolor"/>
<Variable name="nazwa3" description="Czwarty opistype="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

by Rinne Lasair | credits: helplogger