This topic is locked

adding icon on default buttons

10/28/2013 8:36:54 AM
PHPRunner General questions
T
Tayyab Ilyas author

Hi
How can i add icons to default buttons such as add / add inline/ print / delete etc?
Regards

C
cgphp 10/28/2013

You can get inspiration from this article: http://xlinesoft.com/blog/2013/10/26/building-a-nice-looking-login-page-with-custom-css/
Here it is the sample code the "Add new" button:

#addButton1 {

background-image: url('path/to/the/add/image') no-repeat 0 0px;

}
T
Tayyab Ilyas author 10/28/2013

The code gives error and when i have checked in chrome inspect element it says invalid property value.
Secondly its adding image at background however i wants to add icon/image on left of the button just as it shows in new menu tool (as an icon)

C
cgphp 10/28/2013

path/to/the/add/image is only a sample. You have to replace it with the real path of your image.

Using Chrome inspector, check the CSS of the menu and update the button as per your needs.

T
Tayyab Ilyas author 11/2/2013

Thanks Cristian,
It helped but what are IDs for
Logout

Change Password

Login/Submit
I did rest <img src='https://asprunner.com/forums/file.php?topicimage=1&fieldname=reply&id=72637&image=1&table=forumreplies' class='bbc_emoticon' alt=':)' /> Thanks Alot

C
cgphp 11/3/2013

Use Firebug for Firefox or Developer Tools for Chrome to inspect elements.

T
Tayyab Ilyas author 11/3/2013

I used but for the above 3 there is no ID, may be its a missing thing thing in PHPRunner?

Admin 11/4/2013

For the button on the Login page you can try the following:

.function-login a.main {

...

}
T
Tayyab Ilyas author 11/4/2013

I used below code but it does not apply properly, it applies some of CSS code but not all



.function-login a.main {

background-image: url('[https://asprunner.com/forums/file.php?topicimage=1&fieldname=reply&id=72671&image=1&table=forumreplies";)');

background-repeat: no-repeat;

background-position: 4px 4px;

text-indent: 15px;

}


Secondly what about other buttons like

logout

reset password

submit on password reminder page

"back to login page" on password reminder page
Another think on Register page "Register" button has same ID as Save button ID "
I suggest to add ID for all these buttons in next build.

Admin 11/4/2013

Tayyab,
we will consider adding IDs to all buttons and also we'll make sure that images can be added to all buttons without causing CSS conflicts.

Admin 11/11/2013

Here is a better way of adding icons to buttons via :before pseudo-element

#addButton1:before

{

content:' ';

background-image: url('https://asprunner.com/forums/file.php?topicimage=1&fieldname=reply&id=72805&image=1&table=forumreplies';);

display: inline-block;

width: 16px;

height:16px;

margin-right: 7px;

vertical-align: -20%;

}


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



Sample List page with a few icons added: