CSS and JavaScript customization allow you to fine-tune aspects of your Uscreen website that aren't directly editable through the Theme Editor. This guide provides general guidance on identifying elements and applying custom code to your site.
📝 NOTE: Custom code implementation is beyond the scope of our support. This article serves as general guidance only. For specific implementation help, consider consulting with a developer familiar with the platform.
Finding CSS & JavaScript Selectors
Step 1: Identify What You Want to Change
First, determine exactly which element you want to modify.
For example, you might want to change the color of the title of the video thumbnail.
Step 2: Use Browser Developer Tools
Right-click the element you want to modify and select Inspect or press Ctrl+Shift+C (Cmd+Option+C on Mac)
This opens your browser's Developer Tools, showing the HTML structure and CSS properties
Hover over the HTML tag in the Elements tab, or click the element selector tool (🔍) and click on your target element
Step 3: Find the CSS Selector
You have two options for selecting elements:
Class Selector: Look for its CSS class (starting with a period) or CSS ID (starting with a hashtag) in the Styles panel
Example:
.card-title
Precise Selector: Right-click on the HTML element in the Elements panel, select Copy → Copy selector
Example:
#catalog_content > div > div:nth-child(2) > div > div > ds-swiper > swiper-slide.self-start.hotwired.swiper-slide-active > a.card-title
💡 TIP: The precise selector method is generally recommended as it targets only the specific element you want to change, while class selectors might affect multiple elements across your site.
Apply the Custom Code
For CSS Customization
Navigate to Website
Go to the Advanced tab
Scroll to the bottom and click Custom CSS or Head Code
Input your custom style
Click Save Changes
ℹ️ INFO: The Common Pages (CSS) section supports CSS directly, and styles inserted here will affect common pages.
The Head Code section supports CSS inside the HTML <style> tag and affects all pages of the storefront.
For JavaScript Customization
Navigate to Website
Go to the Advanced tab
Scroll to the bottom and click Head Code or Checkout Code
Input your custom script
Click Save Changes
ℹ️ INFO: Both the Purchase Code and Head Code section supports JS inside the HTML <script> tag. Scripts inserted in the Purchase Code only affect the checkout page.
Advanced Elements & Limitations
Shadow DOM Elements
Some Uscreen elements use Shadow DOM, which encapsulates styling and structure. These elements are more difficult to target with standard CSS:
Shadow DOM creates a separate DOM tree within an element
Standard CSS selectors cannot directly target elements inside Shadow DOM
You may need to use JavaScript to access and modify these elements
Example approach: Use
querySelectorto find the host element, then access itsshadowRootproperty
Turbo-Frame & Dynamic Content
Uscreen uses Turbo-Frame for some dynamic content loading, which affects how your CSS and JavaScript interact with the page:
Content loaded via Turbo-Frame may not be present when your code first runs
Your selectors might not find elements that load after your code executes
Consider using
MutationObserveror interval-based approaches to apply styles to dynamically loaded content
Scoped CSS Limitations
Scoped CSS in Uscreen means some styles are isolated to specific components:
Your global CSS may not override component-specific styles
You might need to use higher specificity selectors or
!importantdeclarationsSome components have internal styling that cannot be easily overridden
FAQs
Will my custom code affect my mobile and TV apps?
Will my custom code affect my mobile and TV apps?
No, custom CSS and JavaScript only apply to your web storefront. Mobile and TV apps have separate styling that cannot be modified through code snippets.
How do I back up my custom code?
How do I back up my custom code?
We strongly recommend regularly backing up your code snippets by copying them to a text editor or document.
📝 NOTE: The Code Snippets feature is available for Uscreen Plus. If you're not currently on Uscreen Plus, please reach out to sales@uscreen.tv to discuss an upgrade.