More custom CSS tricks

Categories PHP

These CSS snippets are designed to be pasted to Custom CSS section on Style Editor in PHPRunner/ASPRunnerPro.

Making page background fully transparent

  1. .function-list .rnr-c > *,
  2. .function-list .rnr-s-undermenu > *,
  3. .function-list .rnr-b-vmenu > *,
  4. .function-list .rnr-s-2 > *,
  5. .function-list .rnr-row > *,
  6. .function-list .rnr-toprow > *
  7. {
  8. background-color : transparent !important;
  9. background : transparent !important;
  10. }

Sample screenshot:

Changing Inline Add/Edit checkmark color

Save/Cancel icons in Inline Add/Edit are grey by default. Here is how you can assign colors to those icons.

  1. .saveEditing {
  2. color:green;
  3. }
  4. .revertEditing {
  5. color: red;
  6. }

Sample screenshot:

Adding images to buttons

Make all or some buttons more distinctive adding images. This sample code assumes your icons are 16x16px.

  1. #addButton1:before
  2. {
  3. content:' ';
  4. background-image: url('http://yourwebsite.com/images/image.gif');
  5. display: inline-block;
  6. width: 16px;
  7. height:16px;
  8. margin-right: 7px;
  9. vertical-align: -20%;
  10. }

Sample screenshot:

Here is the List of button IDs you can use

#addButton1:before - 'Add' button on the List page
#saveButton1:before - 'Save' button on Add/Edit pages
.function-login a.main:before - 'Submit' button on the login page
.function-remind a.main:before - 'Submit' button on Password reminder page
.function-change a.main:before - 'Submit' button on Change password page
#resetButton1:before - 'Reset' button on Add/Edit pages
#viewPageButton1:before - 'View' button on the Edit page
#backButton1:before - 'Back to List' button on Add/Edit/View pages
#editPageButton1:before - 'Edit' button on View page
#inlineAdd1:before - 'Inline Add' button on the List page
#extraButtonsToggler1:before - 'More' button on the List page
#selectButtonsToggler1:before - 'With selected' button on the List page

Changing tooltip properties

Here is how you can make edit form tooltips more prominent.

  1. div.shiny_box_body.rnr-list {
  2. margin: 0 5px;
  3. font-family: Tahoma;
  4. font-size: 14px;
  5. font-weight: bold;
  6. color: red;
  7. }

Sample screenshot:

 

7 thoughts on “More custom CSS tricks

  1. Can I display some details in line under the master record?
    Say I want to display more images that are stored in more details records in one single line under the master record like the layout in ebay show page of an item.

  2. The data-vcolumns attribute could be used but I’m not sure to change it programmatically in before display event

Leave a Reply

Your email address will not be published. Required fields are marked *