As you build your Uscreen site, you may want to hide specific elements from your storefront without deleting them. This article provides workarounds on how to hide categories, content, and other elements using custom code.
⚠️ WARNING: Custom code implementation is beyond the scope of our support and is used at your own risk.
These solutions may stop working after platform updates as our code structure evolves. If you encounter issues, we recommend consulting with a developer.
Hide Categories
If you want to hide a category visually from your catalog, you can use custom CSS code. This method allows you to keep the category in your system while making it invisible to users browsing your Catalog.
Step 1: Find your Category ID
Navigate to Content > Organize
Click Edit on the category you wish to hide
Look at the URL bar and grab the ID (the numbers highlighted in the URL)
🔗 Learn more about Getting the Category ID
Step 2: Prepare the code
Replace the asterisks in the following code with your category ID(s):
To hide a single category:
[data-category-id='****']
{ display: none; }
To hide multiple categories:
[data-category-id='****'],
[data-category-id='****'],
[data-category-id='****']
{ display: none; }
Step 3: Apply the code to your site
Navigate to the Head Code
Paste your code inside the HTML
<style> custom code here </style>tags:<style>
[data-category-id='1234']
{ display: none; }
</style>Click Save Changes
Hide Content Thumbnail
The thumbnail of a published content (video, collection, or live stream) appears in the Catalog when at least one category is assigned.
To hide content from the Catalog:
Navigate to Content > Videos/Collection/Live Streaming
Find the content you wish to hide and Edit
Unassign all categories
Click Save Changes
📝 NOTE: Content without categories won't appear in the catalog, but can still be searched using the Search function.
🔗 Learn more about Catalog Search
Hide Other UI Elements
You can hide various UI elements throughout your storefront using custom code. Here are some common examples:
Featured Category Overlay
This hides the dark/light gradient overlay from the Featured Category slider.
.themeless-featured-slide
{ display: none; }
🔗 Learn more about Featured Category
Card Titles
This hides the content titles below each thumbnail.
.card-title
{ display: none; }
Thumbnail Badges
This hides the badges (duration/collection count) from the thumbnails.
.content-card-badge
{ display: none; }
Find Elements to Hide
To identify elements you want to hide:
Right-click on the element and select Inspect (or press F12)
Look for a unique identifier (ID or class) in the HTML code
Create a CSS selector targeting that element
Add the code to your Head Code section
🔗 Learn more about Code Customization
💡 TIP: When using custom CSS, always start with specific selectors to avoid unintentionally hiding other elements.
FAQs
Will hiding elements affect my mobile or TV apps?
Will hiding elements affect my mobile or TV apps?
Custom code only affects your website. All hidden elements using these methods will still be visible in mobile and TV apps.
Will hiding elements delete them from my site?
Will hiding elements delete them from my site?
Hiding elements is purely visual. All content remains in your system and can still be accessed through direct links or search.
What if the custom code doesn't work?
What if the custom code doesn't work?
Custom code can be affected by existing customizations on your site. If you encounter issues, we recommend consulting with a developer. Our support team cannot assist with implementing custom code.
Can I temporarily hide elements and show them later?
Can I temporarily hide elements and show them later?
Yes, you can add or remove the custom CSS code at any time to show or hide elements as needed.
📝 NOTE: Custom code only affects your website and not mobile or TV apps, and requires the Uscreen Plus plan.