Customizing CSS examples

 

The Custom CSS button allows you to add custom CSS code to the pages of your project.

 

Let's say, for example, you want to add a background image to a single List page in the project. Select this page in the Editor, enable This page has custom settings checkbox. Click Custom CSS and add the following code:

 

body.function-list {
height:100%;
background:transparent url("https://mywebsite.com/images/some_pic.jpg") no-repeat center center fixed;
background-size:cover;
}

 

When you have finished CSS customization, click the Close  button to return to the preview mode.

 

 

Note: in some cases your CSS will not be applied to the output. In this case you need to use !important rule to make sure your CSS code overrides the default CSS.

 

Example:
 

.r-grid {
font-size: 20px !important;
}

 

 

You can also customize CSS in the Page Designer Cell/Element Properties.

Examples of CSS customization

Example 1. How to change the font in a grid on the List page.

.r-grid {
font-size: 20px;
}

 

Example 2. How to hide the "required" icon.

.icon-required {
display: none;
}

 

Example 3. How to change the color of menu items and the project name.

.navbar-nav>li>a, a.navbar-brand {
color: red !important;
}

 

Example 4. How to change the color of a regular button.

.btn.btn-default {
background: red;
border-color: red;
}

 

Example 5. How to change the color of the main button.

.btn.btn-primary {
background: green;
border-color: green;
}

 

Example 6. How to change the color of the menu bar.

.navbar-nav {
background: grey;
}

 

Example 7. How to change the text color of a breadcrumb item.

ol.breadcrumb a {
color: red;
}

 

Example 8. How to change the text color of a breadcrumb container.

ol.breadcrumb {
background: red;
}

 

Example 9. How to change the color of dashboard panel headers.

.panel-primary > div.panel-heading {
background: #808080;
}

 

Example 10. How to change the cursor to a hand icon while hovering over a dashboard element.

.bs-dbelement {
   cursor: pointer;
}

 

Example 11. How to turn on the word wrap for all table cells.

td.r-ori-vert {
white-space: normal;
}

 

Example 12. How to turn off the word wrap for all table cells.

td.r-ori-vert {
white-space: nowrap;
}

 

Example 13. How to make the the 'View details' icon bigger.

span.glyphicon.glyphicon-th-list {
font-size: 150%;
}

 

Example 14. How to change the 'View details' icon mouseover tooltip.

Add the following to the JavaScript OnLoad event of the List page.

 

$("a[id^=details_]").attr('title', 'Do not show details');

 

Example 15. How to change the icon into the word "Details".

Add the following to JavaScript OnLoad event of the List page.

 

$("a[id^=details_]").find("span").attr("class","").text("Details");

 

Example 16. How to change the width, font size and color of the search suggest window.

.suggest_link,  .suggest_link_over  {
 color: red;
 font-size: 14px;
}
 
.search_suggest {
width: 300px;
}

 

Example 17. How to change the color of the info on the Welcome page panels.

.bs-welcome-content {
color: #CC7755;
}

 

Example 18. How to set an image as the page background.

body {
height:100%;
background:transparent url("/images/some_image.jpg") no-repeat center center fixed;
background-size:cover;
}

 

Example 19. How to make the login form semi-transparent.

.bs-pagepanel {
background: rgba(17,17,17,0.15) !important;
}d: rgba(17,17,17,0.15) !important;
}

 

Sample screenshot of the Login page with the background image set in the Example 19:

 

Example 20. How to display labels and values on the same line in mobile mode.

.function-view [data-itemtype="integrated_edit_field"] > * {
float: left;
}

 

See also:

•Building a nice looking login page with custom CSS

•Events: JavaScript OnLoad

•JavaScript API: Control object > add CSS Class

•About Editor

•Menu builder

•About Page Designer