How to apply CSS styles to specific UI elements

You can apply CSS styles in a few different ways.

1. Global styles: https://auroramultimedia.com/aurora-academy/?wchannelid=rj93h37xbv&wmediaid=0kbzwzvfid
2. Using a custom CSS file
3. Using JS to apply CSS styles

Option #2 is implemented similar to option #1, but you import your own CSS file, not a global file created by ThemeRoller. I’ll focus on the 3^rd option, I find that to be very flexible because you can expand it with client-side JS as needed.

With your interface file selected, go to the outline and click on the top level item in the tree. In Control Panel Properties at the bottom, add a new JS Override file. In this file, the first thing you will want to do is enclose all the style code in the following: 

$(function() { … });

This is shorthand jQuery notation for “once the page finishes loading, do this…”. Inside of that, you are ready to interact with the DOM using jQuery/JS to affect the CSS.

For instance, if you wanted to make a button red, you might write:

 $('.myButton).css("background-color", "red");

In this notation, '.myButton' applies to any element with the class ‘myButton’ associated with them. ‘.css’ is declaring that we are modifying the CSS of that object. And ("background-color", "red") is simply assigning the property. To apply a class to a specific element, assign a CSS class name in the Core Studio properties window to all objects you want that to apply to.

Here is a sample that will make normal looking buttons into a tab:

Before:

Code:

After:

Samples:

// remove all text shadows
$('div').css("text-shadow", "none");

// top tab button
$('.tab-top').css("border-bottom-left-radius", "0px");
$('.tab-top').css("border-bottom-right-radius", "0px");
$('.tab-top').css("border-bottom", "0px");
$('.tab-top').css("box-shadow", "0px 0px 0px rgba(0,0,0,0)");

// bottom tab button
$('.tab-bottom').css("border-top-left-radius", "0px");
$('.tab-bottom').css("border-top-right-radius", "0px");
$('.tab-bottom').css("border-top", "0px");
$('.tab-bottom').css("box-shadow", "0px 0px 0px rgba(0,0,0,0)");

// right tab button
$('.tab-right').css("border-top-left-radius", "0px");
$('.tab-right').css("border-bottom-left-radius", "0px");
$('.tab-right').css("border-left", "0px");
$('.tab-right').css("box-shadow", "0px 0px 0px rgba(0,0,0,0)");

// left tab button
$('.tab-left').css("border-top-right-radius", "0px");
$('.tab-left').css("border-bottom-right-radius", "0px");
$('.tab-left').css("border-right", "0px");
$('.tab-left').css("box-shadow", "0px 0px 0px rgba(0,0,0,0)");

// tab group inner button
$('.tab-inner').css("border-radius", "0px");
$('.tab-inner').css("border-right", "0px");
$('.tab-inner').css("border-left", "0px");
$('.tab-inner').css("box-shadow", "0px 0px 0px rgba(0,0,0,0)");

// allow a button to have multi-line text
$('.multi-line-text').css('white-space', 'normal');
$('.multi-line-text').css('line-height', 'normal');
$('.multi-line-text').css('padding-top', '0px');
$('.multi-line-text').css('display', 'flex');
$('.multi-line-text').css('justify-content', 'center');
$('.multi-line-text').css('align-items', 'center');

// transparent image (or other object)
$('.transparentImage').css("opacity", "0.2");

// icon padding top
$('.icon-pad-top > i').css('top', '32px');

//rotate icon 45 degrees
$('.rotateIcon45').children().css("transform", "rotate(45deg)");
$('.rotateIcon45').children().css("display", "inline-block");

In the above example, .children() is used because the icon resides within another container, and is the only object in that container.  This is one option, another more precise option is to specify the object type we want to target within the container, in this case an HTML  tag.  that could be accomplished like $('.rotateIcon45 > i')...