čtvrtek 23. listopadu 2017

Boxíky (menu, články)

čtvrtek, listopadu 23, 2017 bez komentáře
V novém návodu se dozvíte, jak si změnit tvar, rámování a pozadí boxíků...

Můj návod.

Kopírovat se zdrojem! 

Teď se dostáváme do části, kdy je lepší si rozmyslet, jak chcete, aby blog vlastně vypadal. Jestli chcete menu jedno nebo dvě a podobně. Takže v administraci si otevřete Motiv a dejte Přizpůsobit... Zvolte Rozvržení a vyberte si podle svého. Já dám jeden sloupec vpravo a zápatí rozdělené na tři části...  Je to hlavně z toho důvodu, pokud si pak budete chtít udělat nějaké hezké podtržení názvů například v menu, budete potřebovat pevně danou šířku. Kdybyste to změnili později, museli byste si to celé opravit a dělat nový obrázek... Ale to až jindy. Pak zvolte Upravit šířky. Obvykle na celý blog dávám těch 1000px, to je šířka celého blogu (menu a články, šířka hlavičky) a pak menu můžeme nechat na 260px... Nahoře tlačítko Použít na blog...




A teď už k samotnému nastavování. Vrátíme se do Motivu a Upravit HTML. V šabloně si najdete .main-inner .widget (to je nastavení boxíků menu) a pak .post-outer (nastavení boxíků článků).


background - opět znamená pozadí, buď ponecháte nebo změníte, já si obvykle všechno přepíšu podle svého, aby se mi tam nemíchalo původní nastavení šablony;
border - je rámování, pixely určují šířku rámečku, solid znamená, že jde o jednoduchou čáru. Aby byla změna dostatečně vidět, zvolím si růžovou (vy si vyberte jakou chcete, opět na této stránce);
padding - odsazení textu od okrajů (ze všech stran je to 10px odsazené);
margin - mezery mezi jednotlivými boxíky (20px určuje mezeru nahoře a dole);
box-shadow - stín rámečku. Já udělám stín modrý, aby byl pro vás dobře vidět (vy si vyberte jakou chcete, opět na této stránce). Čím světlejší, tím lepší, bude to jemnější;
border-radius - zaoblení rohů (v pixelech určujete velikost zaoblení, můžete si velikost zvolit sami, já dám cvičně 10px)

  background-color: #ffffff;
  border: 1px solid #FF0066;
  padding: 10px;
  margin: 20px -16px;
  box-shadow: 0 0 $(shadow.spread) #252BE4;
  border-radius: 10px;


Menu bude vypadat takto:


Rámečky mohou mít každý roh jiný. Například můžete mít stranu vlevo zaoblenou a stranu v pravo udělat hranatou. Stačí napsat:

  border-radius: 0 10px 10px 0;



Začíná se vždycky horní levý roh, horní pravý roh, dolní pravý roh, dolní levý roh.


A teď nastavení článků. Nejdříve se zbavíme zbytečností. Takže smažte ty červené části viz obrázek...




Plus ještě tuto část nad .post-outer taky smazat (tady by vám to totiž spojovalo všechny články společným bílým pozadím):



Abyste změny viděli, vložte si nějaký zkušební článek, klidně jednu větu. To je jedno. Pak se vraťte do šablony. A do .post-outer vložíte obdobné nastavení jako v menu, aby byly boxíky stejné.

.post-outer {
  background-color: #ffffff;
  border: 1px solid #FF0066;
  padding: 10px;
  margin: 20px -16px;
  box-shadow: 0 0 $(shadow.spread) #252BE4;
  border-radius: 10px;
}

Vznikne toto:


Pokud se vám zalíbily možnosti různých rohů, tak to změňte následovně:


.main-inner .widget {
  background-color: #ffffff;
  border: 1px solid #FF0066;
  padding: 10px;
  margin: 20px -16px;
  box-shadow: 0 0 $(shadow.spread) #252BE4;
  border-radius: 0 10px 10px 0;
}

.post-outer {
  padding-bottom: 10px;
  background-color: #ffffff;
  border: 1px solid #FF0066;
  padding: 10px;
  margin: 20px -16px;
  box-shadow: 0 0 $(shadow.spread) #252BE4;
  border-radius: 10px 0 0 10px;
}

A výsledek je takovýto:


Tím opouštíme základ boxíků... Příště nastavíme horní menu... :-)



Sdílení článku:
Sdílet emailem Sdílet gmailem Sdílet Facebookem Sdílet Googlem Plus Sdílet Twitterem Sdílet Pinterestem Sdílet Tumblrem Sdílet Bloggerem Sdílet Wordpressem Sdílet whatsappem

Autorka článku:

Lucy Lillianne Vždycky mě bavilo hrát si s grafikou, dělat blogy a jejich vzhledy. Nikdy jsem se nepovažovala za nějakého experta a ani nikdy nebudu. To, co sem publikuji jsou věci, které by se mohly někomu do budoucna hodit nebo i mě samotné, pokud bych nějaký postup zapomněla... Každopádně jsem ráda, že sem tam si nějaký článek najde svého čtenáře nebo rovnou uplatnění :-)

štítky

0 komentářů:

Okomentovat


  • Tipy pro blogery

    Nápady a postřehy, odkoukané fígle, prostě vše, co by se vám mohlo hodit při práci na vašem vlastním blogu...

  • Moje grafika

    Amatérské pokusy o grafiku, mnohdy vytvořené s obrovským štěstím nebo díky volně stažitelné předchystané práci...

  • Calibre program

    Pár návodů s postupy, které jsem objevila díky experimentům s programem nebo diskuzním fórům na netu. Calibre slouží ke správě elektronických knih...