Boxíky (menu, články)

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... :-)