Different CSS property for each project

[mircofragomena]

Hi there,

I'm totally a newbie to Stacey, and not a master in coding either - hope you'll have some patience with me :) I've 10 projects, and I would like to give to each of this project a different background color in the project list, as well in its own page.

Is there a way I can create variables in the specific project.yml file, that recalls CSS assigning then the color?

For example: Pro1 -> color #1f39b9 Pro2 -> color #449d9c

Can I set this color in the project.yml file of the Pro1 as, for instance, BGColor: #1f39b9 so that Stacey assign the CSS code to the project background?

Hope it's clear, otherwise I can also show some of the mockups I've made to give you a better understanding of what I'd like to achieve. Thanks

[maxcmiller]

Yep, this is totally possible!

There are a number of ways you could accomplish this, a quick and easy way would involve inline styling. For example, to change the background color of a div element (or any element):

 <div style="background-color: #{{ page.bgcolor }};">
    ...
 </div>

And then, as you said, make sure to define the variable bgcolor: 1f39b9 (or whatever hex code) in your project.yml file.

[mircofragomena]

Thanks for the reply!

Works perfectly inside the project's page, but how can I make it work on the category-lists page as well? I've all the projects on this list, and to each div (so each project) I'd like to give it the color assigned in the project details. Since the list is a loop, how can I assign the color differently for each project?

:)

[maxcmiller]

I'm not sure about the exact code/template you're using, so I'm going to assume you're using the default category-lists.html template:

{% for child in page.root %}
  {% if child.children %}
    <ul class="projects">
    {% for child in child.children %}
      <li class="col seven {{ child.id }}" style="background-color: #{{ child.bgcolor }};">
        <p class="date col one">{{ child.date | date("Y, M-") }}</p>
        <h2 class="col five">
          {% if child.thumb %}
            <img src="{{ child.thumb.url }}" width="{{ child.thumb.width }}" height="{{ child.thumb.height }}" class="project-thumb" alt="">
          {% endif %}
          <a href="{{ child.url }}">{{ child.title }}</a>
        </h2>
      </li>
    {% endfor %}
    </ul>
  {% endif %}
{% endfor %}

The code should remain similar for whichever template you are using, just add the style="background-color: #{{ child.bgcolor }};" line to the element you wish to style, provided it's in a loop.

[mircofragomena]

This is great! It worked like a charm!

Man I really thank you so much! I'll probably come back at one point bothering the forum again, but so far you made me understand a lot of things about Stacey and its mark-up. Plus you solved me a really big problem :) even though it was small, it makes a lot of the style of my page!

I'll try to go on by myself now :) I need to open the projects using smooth transitions instead of loading a page in new. Well, I'll try, and hopefully I won't ask again! Thanks a lot!

Cheers

[maxcmiller]

No problem, I'm glad you were able to achieve what you wanted! By the way, if possible, mark this specific issue as closed :+1: