bloggerblogger-dynamic-views

BLOGGER Emporio give color based on label


In Homepage trying to give color .feed-view .post-wrapper .snippet-thumbnail-container based on label. For example for label "Italiano" background-color:red and for label "English" background-color:blue,

<b:if cond='data:view.isHomepage'><style>.feed-view .post-wrapper .snippet-thumbnail-container{background-color:red!important}</style></b:if>

with this code all thumbnails get red in Homepage but when i add label condition ...

<b:if cond='data:view.isHomepage and data:post.labels any (l =&gt; l.name == &quot;Italiano&quot;)'><style>.feed-view .post-wrapper .snippet-thumbnail-container { background-color: red !important}</style></b:if>

with this code no color at all. My mistake is in condition post.labels but i can't find exactly what is the the mistake.

At the end only my Home Page should look like this: enter image description here


Solution

  • Search the theme for the below code (it may appear more than once, you can update them all, or keep testing until find the one you need to update):

    <b:includable id='postWrapperClasses'>
      <b:class cond='data:post.featuredImage' name='image'/>
      <b:class cond='not data:post.featuredImage' name='no-image'/>
      <b:class cond='data:post.labels and not data:post.labels.empty' name='has-labels'/>
    </b:includable>
    

    And add this line to it, this will set a custom class if the post contains a label you choose.

    <b:class cond='data:post.labels any l => l.name == "Italiano"' name='SOME-CLASS'/>
    

    Then you can customize it using css

    .SOME-CLASS .snippet-thumbnail-container {
        background: red !important;
    }