Style links on a blog homepage

Hello everybody,
I’ve grabbed the latest version of Baseblog and updated it to the latest Kirby version. In addition: I am quite a php newbie.

Now I have already changed the startpage template so that articles on the blog page are no longer shortened, but appear in full length.

The problem is that all links on the homepage have no styling. (Already in the article view) How do I get it, that links are also styled on the start page?

Thanks!

I don’t quite understand what you mean with links on the start page? Do you mean links inside of the article text?

What have you changed to show full length articles?

According to the stylesheet, all links are styled red, so that should apply to links on the homepage as well unless there are no links. And in the demo all links (Headline, readmore link, tags) are styled red, so links do get styles.

The excerpt method strips all html, so maybe the links are missing?

Do you mean links inside of the article text?

Yes

What have you changed to show full length articles?

Code of blog.php

`<?php snippet('header') ?>

<?php snippet('menu') ?>
<?php if(param('tag')): // show tag results ?>
<?= '<h1 class="result">Articles tagged with “<mark>' , $tag , '</mark>”</h1>'; ?>

<ul class="results">
  <?php foreach($articlesByTag as $article): ?>
  <li>
    <h2><a href="<?= $article->url() ?>"><?= $article->title()->html() ?></a></h2>
    <div class="meta">
      <time datetime="<?= $article->date('c') ?>"><?= $article->date('F dS, Y'); ?></time>
      
      <?php if ($article->tags() != ''): ?> |
      
      <ul class="tags">
     
       <?php foreach($article->tags()->split(',') as $tag): ?>
        <li><a href="<?= url('tag:' . urlencode($tag)) ?>">#<?= $tag ?></a></li>
        <?php endforeach ?> 




      </ul>
      <?php endif ?>

    </div>
  </li>
  <?php endforeach // article overview ends ?>
</ul>

<?php else: // show latest articles ?>

<h1 class="vh">Blog</h1>

<?php foreach($articles as $article): // article overview ?>

<?php if($article->template() == 'article.text'): // text posts ?>
<article>
  <header>
    <h1><a href="<?= $article->url() ?>"><?= $article->title()->html() ?></a></h1>
    <div class="meta">
      <time datetime="<?= $article->date('c') ?>"><?= $article->date('F dS, Y'); ?></time>
    
    
     <!-- <?php if($article->tags() != ''): ?> |
      <ul class="tags">      
      <?php foreach($article->tags()->split(',') as $tag): ?>
      <li><a href="<?= url('tag:' . urlencode($tag)) ?>">#<?= $tag ?></a></li>
      <?php endforeach ?> 
      </ul>
      <?php endif ?> -->


    </div>
  </header>
       <p><?= $article->text()->kirbytext() ?>

</article>

<?php elseif($article->template() == 'article.link'): // link posts ?>
<article>
  <header>
    <h1><a href="<?= $article->customlink() ?>"><?= $article->linktitle()->html() ?> →</a></h1>
    <div class="meta">
      <time datetime="<?= $article->date('c') ?>"><?= $article->date('F dS, Y'); ?></time>
      <?php if($article->tag() != ''): ?> |
      <ul class="tags">



      <!--  <?php foreach($article->tags()->split(',') as $tag): ?>
        <li><a href="<?= url('tag:' . urlencode($tag)) ?>">#<?= $tag ?></a></li>
        <?php endforeach ?> -->


      </ul>
      <?php endif ?>
      | <a href="<?= $article->url() ?>">direktlink</a>
    </div>
  </header>
  <?= $article->text()->kt() ?>
</article>

<?php elseif($article->template() == 'article.video'): // video posts ?>
<article>
  <header class="meta">
    <time datetime="<?= $article->date('c') ?>"><?= $article->date('F dS, Y'); ?></time>
   
   
   <!-- <?php if($article->tags() != ''): ?> |
    <ul class="tags">
       <?php foreach($article->tags()->split(',') as $tag): ?>
      <li><a href="<?= url('tag:' . urlencode($tag)) ?>">#<?= $tag ?></a></li>
      <?php endforeach ?>
    </ul>
    <?php endif ?> -->

    
    | <a href="<?= $article->url() ?>">permalink</a>
  </header>
  <?= $article->text()->kt() ?>
</article>
<?php endif ?>

<?php endforeach // article overview ends ?>

<?php endif // tag results / latest articles ends ?>


<?php if($pagination->hasPages()): // pagination ?>
<nav class="pagination cf">
  <?php if($pagination->hasPrevPage()): ?>
  <a class="button prev" href="<?= $pagination->prevPageURL() ?>">&lsaquo;&lsaquo; zurück</a>
  <?php endif ?>
  <?php if($pagination->hasNextPage()): ?>
  <a class="button next" href="<?= $pagination->nextPageURL() ?>">mehr &rsaquo;&rsaquo;</a>
  <?php endif ?>
</nav>
<?php endif ?>
<?php snippet('footer') ?>`

The excerpt method strips all html, so maybe the links are missing?

How do i change this?

That link is not reachable. Please post code here.

1 Like

I’ve inserted the code in the answer above.

Hm, you are using the kirbytext method to render your article content, so that should actually render your links. Have you inspected your site in developer tools?

Is it online somewhere?

The site isn’t online.

Overall i’ve gave links no style, to not style the navigation and the header …

With “.content a {}” in the css i style the links in the article - maybe I’m doing something wrong here?

I can’t see any content class in your html? So .content a {}will not have any effect.

I skipped the content of the braces for the sake of clarity, and now it has caused confusion. :slight_smile:

The code is:

.content a {
text decoration: underline;
text-decoration-style: dotted;
}

That’s not what I meant. I said I can’t see any html element in your blog.php template that has a class “content”. Where in the code you pasted above is that element? Have I overlooked something?

This all has nothing to do with Kirby in particular, this is basic HTML and CSS stuff.

I don’t think so, with the content-class i was able to styled the link in the article - that’s how the problem first occurred to me.

And as I wrote in the first post, I’m not really very knowledgeable about kirby and php.

Thanks!

As I said, this has nothing to do with Kirby at all, this is basic HTML and CSS.

If you wrap this code

<?= $article->text()->kirbytext() ?>

(BTW. There is a stray p tag in your blog.php)

in a div with class content, your styles will apply:

<div class="content">
  <?= $article->text()->kirbytext() ?>
</div>

Otherwise, they will not.

Thank you very much, even if that was just a tutoring for me and no special request regarding Kirby.