MŮJ ZÁPISNÍK

RECENZE KNIH

FILMOVÉ A SERIÁLOVÉ HODNOCENÍ

PEČENÍ A VAŘENÍ

23 listopadu, 2017

Boxíky (menu, články)

čtvrtek, listopadu 23, 2017 2 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... :-)


Pokud vás článek zaujal, můžete sdílet

Lucy Lillianne
V posledních letech jsem neskutečně podlehla knihám. Nejen jejich čtení, blogování o nich, ale i nakupování. Ráda si rozšiřuji knihovničku a velice mě mrzí, když vidím tolik knih, které nemohu mít. Přesto jsem ráda za každý kousek, který se mi dostane do rukou. Největší radost mi dělají žánry fantasy a sci-fi, v poslední době hodně ujíždím na apokalyptických a dystopických knihách a když si potřebuji odpočinout, často sáhnu po nějakém thrilleru nebo jiné napínavé četbě... Samozřejmě nepohrdnu ani lehčí četbou. Nejméně mě lákají romantické knihy, i když i tam občas dojde k nějaké výjimce. Doufám, že čtení mě bude bavit ještě dlouho, protože můj seznam je téměř nekonečný... :-)

2 komentáře:

  1. Takéto návody mi chýbali :) Klobúk dole, že máš na takéto veci trpezlivosť! :)

    OdpovědětSmazat

Každý vzkaz pro mě znamená mnoho, často vykouzlí úsměv na tváři a rozhodně potěší. Děkuji každému, kdo pro mě ztratí pár vteřin života :-)




@lucylillianne