Spark 12.2.21 Custom CSS?

Hi David, I am not a part of the product team at Skuid but I did want to be sure to clarify that we encourage all customers to update to the latest versions of Skuid.  If you are not on Version 12 yet however the new API (v2) is not available.  V1 pages will continue to work and you can still use the theme builder and CSS.  If you build a new page with v2 components then that is where you would leverage the Design System Studio. 

Thanks Ben… my question related to on Milau we have a large amount of custom css our commercial app requires. This was able to be added to the "custom css’ section in the theme.

The Design Scheme doesnt have this ability as far as we can see but for us it is critical. We could potentially place the css in the head section of every page but wondered if there was a better way to get it in to the style section of the application now under Spark.
 

David, we’re looking into ways we could allow for CSS customization, but code/markup customization is always a double-edge sword, so we want to find ways to do it while mitigating the risk of technical debt. Can you elaborate on what critical CSS functionality you’re wanting to leverage? Thanks!

Probably easier to post the file (below)

Summary : 

hides skuid edit page tab from side of page
sets page includes when loading to be same background color
font on any chart is set to poppins (it always displays in their standard without the css)
hides the dropdown bos to pick between user and group for ownership fields on edit
phone vs computer differences
removes the outline around icons/buttons etc that the browser puts in automatically
changes how radio checkboxes look
cursor on hover
changes font family to be different letter spacing as the letters werent spaced enough from standard poppins
css to make dropdown menus to look like the tabset menus
change the kanban look/feel as it is limited in theme without css, and this is where I add space when no card so we don’t get that bug where if the column is empty you can’t add a new one with the click and drag
Hides popup X button as we always have custom actions on close for popups we dont want users to bypass
searchbox css on tables and other components to match the skuid search component look/feel


Thanks for taking a look


/Remove Edit skuid box on each page/
#skuidEditBtn {
    display: none!IMPORTANT;
}

/Keeps loading page includes same background colour as top page/
div.blockUI.blockOverlay{
    background: transparent !IMPORTANT
}

/Removes line below vertical tabs that add in scroll bars/
li.ui-tabs-active:after {
    display: none !IMPORTANT;
}

/Removes collapsible wrapper open icon/
.nx-basicfieldeditor-section-header .uipa-icon {
    display: none !IMPORTANT;
}

/Removes extra padding on collapsible wrapper header on the left/
.tfg-collapsiblewrapper-header {
    padding-left: 0 !IMPORTANT;
}

/Removes extra padding on collapsible wrapper header on the left/
.nx-basicfieldeditor-section-header {
    padding-left: 0 !IMPORTANT;
}

/Removes padding around pages - including on Page Includes/
.nx-page .nx-page-content {
    z-index: 1;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    background: transparent;
    position: relative;
}

/Sets chart titles and font to family/
.sk-chart-standard .highcharts-title {
    font-family: Poppins;
}

/Remove radiobutton picklist type background colour/
.nx-checkboxwrapper, .nx-radiowrapper {
    background: transparent;
}

/Hides drop down menu on user field for user or group for any class as ownerfield on pages/
.ownerfield .nx-basicfieldeditor-item-select-label {
    display: none !IMPORTANT;
}

/Hides drop down menu on user field for user or group for any class as ownerfield on pages/
.ownerfield .nx-field.nx-polymorphic>label, .nx-field.nx-polymorphic>select {
    display: none;
}

/*Hides any element with css class phonedisplay when on screens size is a vertical tablet or bigger */
@media only screen and (min-device-width: 770px){
  .phonedisplay  {display: none !IMPORTANT;}
}

/Hides any element with css class computerdisplay when on screens size is smaller than a vertical tablet/
@media only screen and (max-device-width: 769px){
  .computerdisplay  {display: none !IMPORTANT;}
}

/Hides Skuid Errors from showing - Do not activate on dev org/
.nx-page-problems-wrapper {
    display: none !IMPORTANT;
}

/Hides elements with any focus outline that shouldn’t be there/
.nofocus *:focus {
    outline: none !important;
}

/Hides elements with any focus outline that shouldn’t be there/
.nofocus:focus {
    outline: none !important;
}

/Hides elements with any focus outline that shouldn’t be there/
.nx-radio:focus {
    border-color: none !important;
    background-color: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

/Changes cursor to pointer on hover over/
.CursorPointer {
    cursor: pointer !IMPORTANT;
}

/Changes cursor to pointer on hover over/
.cursorpointer {
    cursor: pointer !IMPORTANT;
}

/Spaces font family between letters and lines/
.div {
letter-spacing: 5px;}

/Corrects spacing on filters on table to match drop down box and search box/
.nx-actionselect-text {
    padding-top: 4px;
    padding-bottom: 3px;
    font-size: 13px;
    padding-right:10px;
    padding-left:10px;
}

/Corrects spacing on filters on table to match drop down box and search box/
.nx-actionselect-dropdown-item {
    padding-bottom: 1px!IMPORTANT;
    padding-left: 2px!IMPORTANT;
    padding-top: 2px !IMPORTANT;
    padding-right: 2px !IMPORTANT;
}

/*Queue - Kanban cards background etc */
.nx-queue-item-inner.ui-draggable.ui-draggable-handle {
    border-color: #e0e0e0;
    border-width: 1px;
    border-right-width: 1px;
    border-left-width: 1px;
    border-top-width: 1px;
    border-bottom-width: 1px;
    color: #7f7f7f;
    background-color: #ffffff;
    border-style: solid;
    box-shadow: 2px 2px #efefef;
    border-radius: 2px 2px 2px 2px;
}

/*Queue - Kanban cards background etc */
.nx-queue .nx-list-contents {
    min-height: 25px;
}

/*Queue - Kanban cards background etc /
.nx-queue .nx-list-contents.ui-state-highlight {
    min-height: 100px;
}

/On hover sets dropdown arrow on table filters to be blue/
.nx-actionselect-arrow>div.ui-icon:hover {
    color: #006dcc;
}

/On hover sets dropdown filter label on table filters to be blue/
.nx-conditiontoken>.ui-multiselect:hover {
    color:#006dcc;
}

/Dropdown css to make all look better/
 select {
   -moz-box-sizing: border-box;
   position: relative;
   padding: 5px 5px;
   background: #fff;
   border-radius: 5px;
   box-shadow: 0 2px 2px #eaf0f6;
   cursor: pointer;
   outline: none;
   transition: all 0.3s ease-out;
   font-family: Poppins;
}

/padding on buttonset/
.sk-buttonset-group {
    padding-top:10px;
    padding-bottom:10px;
}

/Remove Close Header on popups/
.ui-dialog-titlebar.ui-widget-header.ui-corner-all.ui-helper-clearfix.ui-draggable-handle {
    display: none;
}

/Remove extra padding on bottom of popups/
.ui-dialog-content.ui-widget-content {
    min-height: 100% !IMPORTANT;
}

/ Changes background color of slider */
.sk-pagepanel.sk-pagepanel-overlay.sk-pagepanel-right.sk-pagepanel-open {
    background-color: #eaf0f6;
    padding-right: 0px !important;
    
}

/Sets search box same width as buttons/
.nx-editor-header input.searchbox {
    display: inline-block;
    padding-top: 4px;
    padding-bottom: 4px;
    margin-bottom: 5px;
    padding-left:10px;
    margin-top: 0;
}

Summary : 

That’s really helpful, thank you David. Just so you know (in case you didn’t), even though CSS is not currently supported in V2, you can still upgrade to the latest version of Skuid and use/edit/create V1 pages. V1 and V2 pages can live together in the same org. Thanks!

Thanks Matt… we havent done that. Were a little nervous to make the change in case we broke something. Maybe it is time!