You can apply CSS styles in a few different ways in Core Studio:
- Global styles using ThemeRoller Mobile
- Using a custom CSS file
- 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 3rd option, I find that to be very flexible because you can expand it with client-side JS as needed.
Overview
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:
Other Code 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')...