Show/Hide Toolbars

Navigation: Using ASPRunnerPro > Visual Editor

ASPrunnerPro32x32     ASPRunnerPro manual


Customizing CSS

Scroll Prev Next More

Quick jump

 

How to change font in grid on the List page

How to make Bootstrap1 layout grid 100% width

How to hide "required" icon

How to change cursor to a hand icon while hovering over a dashboard element

How to change the color of menu items and project name

How to turn on word wrap for all table cells

How to change the color of a regular button

How to turn off word wrap for all table cells

How to change the color of a main button

Making the 'View details' icon bigger

How to change the color of the menu bar

How to change 'View details' icon mouseover tooltip

How to change the text color of breadcrumb item

How to change icon to the word "Details"

How to change the text color of breadcrumb container

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

How to change color of dashboard panel headers

How to change the color of the info on the Welcome page panels

How to set the image as the page background

How to make the login form semi-transparent

 

 
See also:

Building a nice looking login page with custom CSS

 

For example, let's say you want to add a background image only to one List page in the project. Select this List page in Visual Editor. Enable This page has custom settings. Click Custom CSS and add the following code:

 

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

 

When you have finished CSS customization, click the Closeclose_custcss_but button to return to the view mode.

 
You can also add some custom CSS in the Page Designer Cell/Element Properties.

editor_customcss

 

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

 

[data-brick=grid] {
font-size: 20px;
}

 

Before custom CSS was applied

After custom CSS was applied

custcss_font16_bef

custcss_font16_aft

Example 2. How to hide "required" icon

 

.icon-required {
display: none;
}

 

Before custom CSS was applied

After custom CSS was applied

custcss_req_bef

custcss_req_aft

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

 

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

 

Before custom CSS was applied

After custom CSS was applied

custcss_colofmen_items_bef

custcss_colofmen_items_aft

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

 

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

 

Before custom CSS was applied

After custom CSS was applied

custcss_colof_regbutt_bef1
 
 
 
 

custcss_colof_regbutt_aft1
 
 
 
 

custcss_colof_regbutt_bef2

custcss_colof_regbutt_aft2

custcss_colof_regbutt_bef3

custcss_colof_regbutt_aft3

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

 

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

 

Before custom CSS was applied

After custom CSS was applied

custcss_colof_mainbutt_bef1

custcss_colof_mainbutt_aft1

custcss_colof_mainbutt_bef2

custcss_colof_mainbutt_aft2

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

 

.bs-navform.bs-navform.bs-navform {
background: grey;
}

Before custom CSS was applied

After custom CSS was applied

custcss_colof_menubar_bef

custcss_colof_menubar_aft

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

 

ol.breadcrumb a {
color: red;
}

 

Before custom CSS was applied

After custom CSS was applied

custcss_colof_brcrumb_bef

custcss_colof_brcrumb_aft

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

 

ol.breadcrumb {
background: red;
}

 

Sample screenshot before

After custom CSS was applied

custcss_colof_brcrumb_bef

custcss_colof_brcrumb_cont_aft

Example 9. How to change color of dashboard panel headers

 

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

 

Before custom CSS was applied

After custom CSS was applied

custcss_colof_dashb_panel_bef

custcss_colof_dashb_panel_aft

Example 10. How to make Bootstrap1 layout grid 100% width

 

.bs-center, .bs-middle, .bs-grid, .bs-grid > table {
width: 100% !important;
}

 

Before custom CSS was applied

custcss_grid100_bef

After custom CSS was applied

custcss_grid100_aft

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

 

.bs-dbelement {
   cursor: pointer;
}

 

Before custom CSS was applied

After custom CSS was applied

custcss_dash_cursor_bef

custcss_dash_cursor_after

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

 

td.bs-gridcell {
white-space: normal;
}

 

After custom CSS was applied

custcss_wordwrapon

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

 

td.bs-gridcell {
white-space: nowrap;
}

 

After custom CSS was applied

custcss_wordwrapoff

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

 

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

 

Before custom CSS was applied

After custom CSS was applied

custcss_det_link_bef

custcss_det_link_aft

Example 15. How to change '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');

 

Before custom CSS was applied

After custom CSS was applied

custcss_det_tooltip_bef

custcss_det_tooltip_aft

Example 16. How to change icon to the word "Details".

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

 

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

 

Before custom CSS was applied

After custom CSS was applied

custcss_det_link_bef

custcss_details_link_aft

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

 

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

 

Before custom CSS was applied

After custom CSS was applied

css_tips1

css_tips2

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

 

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

 

Before custom CSS was applied

After custom CSS was applied

custcss_colof_welcome_bef

custcss_colof_welcome_after

Example 19. How to set the image as the page background

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

Before custom CSS was applied

After custom CSS was applied

custom_CSS_bs_backgr_bef_sm

custom_CSS_bs_backgr_after_sm

Example 20.  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 Example 19:

 

Before custom CSS was applied

After custom CSS was applied

custom_CSS_bs_login_transp_bef_sm

custom_CSS_bs_login_transp_after_sm

 

Quick jump

 

How to change font in grid on the List page

How to make Bootstrap1 layout grid 100% width

How to hide "required" icon

How to change cursor to a hand icon while hovering over a dashboard element

How to change the color of menu items and project name

How to turn on word wrap for all table cells

How to change the color of a regular button

How to turn off word wrap for all table cells

How to change the color of a main button

Making the 'View details' icon bigger

How to change the color of the menu bar

How to change 'View details' icon mouseover tooltip

How to change the text color of breadcrumb item

How to change icon to the word "Details"

How to change the text color of breadcrumb container

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

How to change color of dashboard panel headers

How to change the color of the info on the Welcome page panels

How to set the image as the page background

How to make the login form semi-transparent

 

See also:

Building a nice looking login page with custom CSS