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:

 

4 thoughts on “More custom CSS tricks

Leave a Reply

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