17 ledna, 2018

Dnes vám nachystám úpravu spodních tlačítek, kterými se dostanete na domovskou stránku nebo listujete starými / novými články...

Můj návod.

Kopírovat se zdrojem! 

Můžete si opět vybrat více variant. Například mít odkazy jen jako text, text s obrázek, udělat z nich tlačítka a podobně...

Vyhledejte si v šabloně blog-pager a všechno mezi závorkami smažte a nahraďte:


padding: 15px;
margin-top: $(pager.space.top);


Pak vložte pod tyto řádky následující:


.home-link  {
background: #ffffff;
border: 1px solid #FF0066;
box-shadow: 0 0 $(shadow.spread) #084468;
border-radius: 10px;
padding: 10px;
}

#blog-pager-older-link a {
background: #ffffff;
border: 1px solid #FF0066;
box-shadow: 0 0 $(shadow.spread) #084468;
border-radius: 10px;
padding: 10px;
}

#blog-pager-newer-link a {
background: #ffffff;
border: 1px solid #FF0066;
box-shadow: 0 0 $(shadow.spread) #084468;
border-radius: 10px;
padding: 10px;
}

.home-link:hover, #blog-pager-older-link a:hover, #blog-pager-newer-link a:hover  {
background: #FFB591;
color: #FF6600;
}


home-link - domovská stránka
blog-pager-older-link - starší články
blog-pager-newer-link - novější články

background: #ffffff; - pozadí bílé
border: 1px solid #FF0066; - rámeček oranžový
box-shadow: 0 0 $(shadow.spread) #084468; - stín rámečku
border-radius: 10px; - zaoblení rámečku
padding: 10px; - mezera ze všech stran mezi textem a rámečkem

background: #FFB591; - pozadí světle oranžové (po najetí myši)
color: #FF6600; - barva písma (po najetí myši)



Další možností je obyčejný text. Takže z předchozího kroku pod blog-pager vložíte následující a jen si nastavujete barvu textu:

.home-link  {
padding: 10px;
color: #99CCFF;
}

#blog-pager-older-link a {
padding: 10px;
color: #99CCFF;
}

#blog-pager-newer-link a {
padding: 10px;
color: #99CCFF;
}

.home-link:hover, #blog-pager-older-link a:hover, #blog-pager-newer-link a:hover  {
color: #FF6600;
}




A jak si změníte text těchto odkazů? Najděte si v šabloně home-link... Přesněji část podle obrázku:


A <data:newerPageTitle/> si nahradíte vlastním textem... Můžete zvolit cokoli, dokonce můžete vkládat i symboly, takže můžete přidat šipky, nebo co vás napadne:



  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>nové články</a>
      </span>
    </b:if>

    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>staré články</a>
      </span>
    </b:if>

    <a class='home-link' expr:href='data:blog.homepageUrl'>domů</a>

    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>

  </div>

nebo třeba

  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>← nové články</a>
      </span>
    </b:if>

    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>staré články →</a>
      </span>
    </b:if>

    <a class='home-link' expr:href='data:blog.homepageUrl'>domů</a>

    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>

  </div>


Pro dnešek jen takový krátký návod. Tak co říkáte? :-)


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

4 komentáře:

  1. nefunguje mi to, nevíš co s tím může být za chybu?

    OdpovědětVymazat
  2. Ani mne to nefunguje hoci som to dala celé ako to je napísané neukazuje pri tlačitkách, že som ich upravila :)

    OdpovědětVymazat
    Odpovědi
    1. zkus si tam vlozit tuto variantu, kdy je misto # proste jen .

      .home-link {
      background: #ffffff;
      border: 1px solid #FF0066;
      box-shadow: 0 0 $(shadow.spread) #084468;
      border-radius: 10px;
      padding: 10px;
      }

      .blog-pager-older-link {
      background: #ffffff;
      border: 1px solid #FF0066;
      box-shadow: 0 0 $(shadow.spread) #084468;
      border-radius: 10px;
      padding: 10px;
      }

      .blog-pager-newer-link {
      background: #ffffff;
      border: 1px solid #FF0066;
      box-shadow: 0 0 $(shadow.spread) #084468;
      border-radius: 10px;
      padding: 10px;
      }

      .home-link:hover, .blog-pager-older-link a:hover, .blog-pager-newer-link a:hover {
      background: #FFB591;
      color: #FF6600;
      }


      pripadne bychom se pak domluvily pres messenger a nejak to vykoumaly...

      Vymazat

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