Apply CSS class to V2 Page Component

Mark L
Mark L ✭✭✭✭
edited June 29, 2020 in Questions
In V1 pages you could easily add a CSS class to a component. On V2 pages I'm not seeing this. Is this still possible in V2?

(running skuid version 12.1.7)

V1 tab set component:

V2 tab set component (no CSS class?):

Tried copying the XML from the V1 page into the component on the V2 page as well that doesn't seem to work either.

Additionally, it looks like on V2 pages adding CSS is not available? Is that correct? Am I missing something?




  • Matt Brown
    Matt Brown 🛠️ 
    edited June 29, 2020
    Hi Mark, that is correct. V2 does not currently support CSS customization. This is something we're considering implementing as an extension of the Design System Studio. Can you give some examples of the kinds of styles you'd want to apply with CSS?

    XML copy/paste should work for models and actions, but most components will have to be rebuilt. We are working to improve the migration path to make it easier to move from V1 to V2. Thanks!
  • Mark L
    Mark L ✭✭✭✭
    edited April 17, 2020
    Hi Matt,

    In our V1 pages we have tons of custom styles:

    - a no-print CSS class to hide certain elements from printing -- essential for our pages
    - override certain component display for better display (eg. smaller font in a particular table, hide checkboxes from a particular table, hide model name from a particular table)
    - override certain component display for greatly enhanced functionality

    Here's one customization that opens up a world of enhanced functionality that I was trying to better document and upload to the SKUID github when I noticed it's not something I can do on a V2 page:

    CSS to Hide the tabs in a tab set:

    .hide-tabs > ul:first-of-type {
        display: none !important;

    I've been using this to hide the tabs of a tab set. What that allows me to do is better organize my pages by grouping things into tab sets and put back-end comments for designers at the top of the tabs that the end-user doesn't see.

    This also lets me put display logic on each tab and if I have custom display logic working organize that display logic much better on the back-end while keeping the tab set hidden from my users.

    Example screenshot of the editor UI -- in our example, tab 1 has its display logic set in such a way that it is not displaying, and tab 2 is set up to be displaying

    What the end user sees on the page:

    Notice that the end user sees the contents of tab 2 without seeing the tab set tabs at the top. This opens up so much better organization of pages that use conditional display logic.

    Before I had to basically just put different display logic items one right after the other on the page and had no idea which was which and had to click on them and look at the display logic to know what I was looking at.

    Now if I have different display logic items I can just put them all into one hide-tabs tabset with different display logic on each tab, and label each tab to let me know precisely which one is which as I'm working in the editor. This makes the custom display items much better organized on the page and makes it a lot easier for me to figure out what's going on with my page just by looking at the UI editor.

    Additionally even without custom display logic I can just create a hide-tabs tabset around something and label the tab with essentially a "comment" to give me a better idea of what a component is for in the UI editor. It's like adding notes for designers directly to the elements on the page visible only to the page editor and not the end user.

    Example page XML that uses hide-tabs:

    <skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="false" showheader="false">
    <tabset rememberlastusertab="false" defertabrendering="true" uniqueid="sk-28Li-266" cssclass="hide-tabs">
    <tab name="// Hidden Tab 1 with Display Logic set to not display">
    <richtext multiple="false" uniqueid="sk-28jj-463">
    <contents>&lt;p&gt;Content to display if tab 1&amp;nbsp;display logic is true&lt;/p&gt;
    <renderconditions logictype="and">
    <rendercondition type="fieldvalue" operator="=" enclosevalueinquotes="true"/>
    <tab name="// Hidden Tab 2 with display logic set to display" loadlazypanels="true">
    <richtext multiple="false" uniqueid="sk-28jr-545">
    <contents>&lt;p&gt;Content to display if tab 2&amp;nbsp;display logic is true&lt;/p&gt;
    <renderconditions logictype="and"/>
    <cssitem location="inline" name="Hide Tabs" cachelocation="false">.hide-tabs &gt; ul:first-of-type {
        display: none !important;
    <styleitem type="background" bgtype="none"/>

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!