We are transitioning over to a new forum platform. Please post new issues there. Existing threads will be dealt with here unless you choose to move them over. Visit the new forum


Thread tagged as: Problem, Runway

Category scoping parent category value

I'm working on a design that needs a colour for each category in a blog post, so I've defined a content region to

<perch:category id="catColor" type="text" label="Colour" suppress="true" replace="#|" format="LC" help="The hexidecimal value of the category's colour" />

So I'm setting that colour as the background-colour on the blog listing items:

<li class="blog-list-item"<perch:categories id="categories" set="blog"><perch:if exists="catColor"> style="background-color: #<perch:category id="catColor" type="text" replace="#|" format="LC" />" <perch:else /></perch:if></perch:categories>>

So far it all works nicely.

I'm outputting the categories of each blog post in the listing too and this is where my issue lies. The background of the blog list item is, say, blue. And there are buttons linking to the categories that each post belongs to; these buttons are white and the text should be the same as the background. So blue.

<a href="/blog/category/<perch:category id="catSlug" type="slug" />" class="p-category category-link"<perch:if exists="catColor"> style="color: #<perch:category id="catColor" type="text" replace="#|" format="LC" />"<perch:else /></perch:if>>

The problem comes when there's more than one category. With that code it outputs the blue background, the first category button text in blue and the second category button text in, say pink. The designer I'm working with would like to use the same colour text on the button as the list item background. I know there's a question in there of "why would it take the colour of one category over the other?" and we're planning to 'get around this' to a certain extent by generating the category links in random order and using the colour of the first one that's output. Not perfect, but should work.

Anyway, here's what I'm running up against: I can't scope the category output of the button text to the parent element's category… I was hoping I could use something like:

<li class="blog-list-item"<perch:categories id="categories" set="blog"><perch:if exists="catColor"> style="background-color: #<perch:category id="catColor" type="text" replace="#|" format="LC" />" <perch:else /></perch:if></perch:categories>>
  <perch:categories id="categories" set="blog" scope-parent="true">
      <ul class="category-list">
          <a href="/blog/category/<perch:category id="catSlug" type="slug" />" class="p-category category-link" style="color: #<perch:category id="parent.catColor" type="text" replace="#|" format="LC" />">

But it doesn't work. Is it something to do with the way I've written the code? Maybe just a typo or somethign? Or is is something that's just not possible. I've done it before but going from a category into its parent where the id of the item I'm calling from the parent isn't itself in a category and it works ok.

I hope that makes sense…



P.S. Here're my diagnostics:

Perch Runway: 2.8.30, PHP: 5.6.10, MySQL: mysqlnd 5.0.11-dev - 20120503 - $Id: 3c688b6bbc30d36af3ac34fdd4b7b5b787fe5555 $, with PDO
Server OS: Darwin, apache2handler
Installed apps: content (2.8.30), assets (2.8.30), categories (2.8.30), perch_blog (5.0), perch_forms (1.8.3), collection_2 (2.8.30), collection_1 (2.8.30)
App runtimes: <?php $apps_list = array( 'content', 'categories', 'perch_blog', 'perch_forms', );
PERCH_PATH: /Users/TemperTemper/Sites/Gospelware/gospelware.co.uk/web/cms
PERCH_CORE: /Users/TemperTemper/Sites/Gospelware/gospelware.co.uk/web/cms/core
PERCH_RESFILEPATH: /Users/TemperTemper/Sites/Gospelware/gospelware.co.uk/web/cms/resources
Image manipulation: GD
PHP limits: Max upload 32M, Max POST 32M, Memory: 128M, Total max file upload: 32M
F1: 2edba60ed1f613d6dd804feb202456a2
Resource folder writeable: Yes
HTTP_HOST: gospelware.local
DOCUMENT_ROOT: /Users/TemperTemper/Sites/Gospelware/gospelware.co.uk/web
REQUEST_URI: /cms/core/settings/diagnostics/
SCRIPT_NAME: /cms/core/settings/diagnostics/index.php
Martin Underhill

Martin Underhill 5 points

  • 3 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

I'm not quite sure what you're trying to do with the scope-parent, but it seems like the whole thing might be a lot easier if you wrote out a <style> block at the bottom of the template.

<perch:categories id="categories" set="blog">
<perch:if exists="catColor">

.blog-list-item {
    background-color: #<perch:category id="catColor" type="text" replace="#|" format="LC" />;

.category-link {
    color: #<perch:category id="catColor" type="text" replace="#|" format="LC" />;


Hi, I received the notification email saying "There has been a reply on thread "Category scoping parent category value" in the forum from Drew McLellan. You can read it here." but there's no reply on this thread… Weird… Could you try posting again? Thanks :)

That reply didn't appear when I posted it. I was using Safari. Decided to try it in Chrome and your (any my) reply is appearing fine. Safari funkiness!

Anyway, great idea on using the style block – that would use the colour of the first category listed, so my problem is solved.