Show category description without category logo

Contribute Feature

AI-generated summary

The discussion revolves around displaying category descriptions without category logos. davidkingham currently uses a 1x1 transparent PNG as a workaround but would like a feature to turn on category descriptions without logos. sam agrees that this would be a good feature and suggests using custom CSS styling to clean up the existing setup. tshenry provides a CSS solution to hide category logos and their margins for specific categories. davidkingham confirms that this solution works perfectly in the meantime.

1

It seems the category description only displays if you have a category logo, which I don’t want for every category. I have been using a workaround by using a 1x1 transparent png, but this also adds space between the category name and description that doesn’t look great. I would like to have an option of turning on the category description without having to upload an image.

You can see how I have things setup now here: https://community.naturephotographers.network/

2

You have data-category-id here so you can just add some custom CSS styling here to clean stuff up.

Agree about allowing description without logo.

<tr data-category-id="24" class="has-description has-logo">
          <td style="border-color: #C4ABE3" class="category">
            <div>
              <h3 id="ember1346" class="ember-view">
<!---->

<a href="/c/weekly-challenge" class="category-title-link">
  <div class="category-text-title">
<!---->    <span class="category-name">Weekly Challenge</span>
  </div>
</a>
  <div>  <img src="https://npn-ndfapda.netdna-ssl.com/original/1X/295f85682dcd3061281509ff0ee529a939ad81f2.png" class="category-logo">
</div>
</h3>
              <div class="category-description">
                The Weekly Challenge photo critique gallery is intended for theme-based photos that fit any of the other NPN photo critique galleries.
              </div>
              <div class="clearfix"></div>
            </div>
<!---->          </td>
          <td class="topics">
            <div title="0 topics"><span class="value">0</span></div>
            <div id="ember1350" class="unread-new ember-view"><!----><!----></div>
          </td>
<!---->        </tr>
3 Likes
3

Ah yeah, despite it being a 1x1 transparent png, there are some CSS margins in place that are causing the additional space.

It sounds like this could turn in to a feature, but in the mean time, this should be the CSS to completely hide the images (and their margins) for your categories that don’t have logos:

// Hide category logos
[data-category-id="24"],   // Weekly Challenge
[data-category-id="20"],   // Technical
[data-category-id="59"],   // Other Discussions
[data-category-id="40"],   // Field Reports
[data-category-id="31"],   // Classifieds
[data-category-id="33"] {  // Community Events
    img.category-logo {
        display: none;
    }
}
5 Likes
4

Thank you, that works perfectly in the meantime!

1 Like