Custom Buttons
My contribution for the holidays is this template that allows you to create personalized buttons.
Happy Holidays!
Download and leave a review here...
49 replies
-
Thank you Steven and Happy Holidays! This will come in handy without all the effort.
‘Sam
-
Thank you Steven, as always, your gifts are very useful!
I wish you Happy Holidays and a creative new year 2024! -
-
-
Thanks for the link, also nice icons!
I guess it would also work with these with some tweaking in my code.
-
thanks for this amazing icons collection !
-
thanks, beautiful icons and easy implementation!
html("<!DOCTYPE html> <html> <head> <link rel='stylesheet' type='text/css' href='https://unpkg.com/@phosphor-icons/web@2.0.3/src/bold/style.css' /> <style> .ph-bold { font-size: 48px; } </style> </head> <body> <i class='ph-bold ph-warning-circle' style='color: red'></i> <i class='ph-bold ph-smiley' style='color: orange'></i> <i class='ph-bold ph-heart' style='color: hotpink'></i> <i class='ph-bold ph-cube' style='color: black'></i> <i class='ph-bold ph-apple-logo' style='color: silver'></i> <i class='ph-bold ph-twitter-logo' style='color: blue'></i> </body> </html> -
hello Sotirion, whe I try to implement your code (in a formula field?) I get an error. Do you have an idea what I did wrong?
Thank you
Kruna
-
The code above was missing a final close quote and close bracket on line 23
</html>")Regards John
-
I forgot a close quote. You can simplify further the code like below. Put it inside a function field.
html("<head> <link rel='stylesheet' type='text/css' href='https://unpkg.com/@phosphor-icons/web@2.0.3/src/bold/style.css' /> <style> .ph-bold { font-size: 48px; } </style> </head> <body> <i class='ph-bold ph-warning-circle' style='color: red'></i> <i class='ph-bold ph-smiley' style='color: orange'></i> <i class='ph-bold ph-heart' style='color: hotpink'></i> <i class='ph-bold ph-cube' style='color: black'></i> <i class='ph-bold ph-apple-logo' style='color: silver'></i> <i class='ph-bold ph-twitter-logo' style='color: blue'></i> </body>")
-
-
Hi Steven, Thank you very much for your awesome and great contribution!!
-
and thank you very much for your help, that did it!
I have a questions - pls keep in mind that I am not that firm with ninox, html and css, its mostly learning by doing and of course this awesome, amazing, great helping forum here to accomplish what I need for my db.
Having written that I was able to 'create' this button by combining both codes - if there are better solutions/suggestions, pls be my guest
html("<!DOCTYPE html> <html> <head> <link rel='stylesheet' type='text/css' href='https://unpkg.com/@phosphor-icons/web@2.0.3/src/thin/style.css' /> <style> .ph-thin { padding: 8px 8px; font-family: 'Lexend', sans-serif; align-items: center; } </style> </head> <body> <i class='ph-thin ph-arrow-circle-left' style='background-color:#0EB8FF;color:#004079;border-radius:5px;font-size: 4em !important;display: inline-flex; '> <h1 style='font-size:18px;display: inline-flex;color:white;justify-content: center;text-align:center;'> zurück zu Dashboard </h1> </i> </body> </html> </html>")Ok, after hours 'learnig by doing' I finally
noticed the difference between and concerning the icons (google and Phosphor).At the end it was easier for me to use code and add the styles, but when I was trying to style the :hover it's always the same on all other buttons. This is why I tried again the code from
RSCustomButton({ text: { label: "Home", color: "#F5F5F5", size: "15 px" }, button: { color: "#046262", hovercolor: "#1E90FF", btnid: "1" }, symbol: { color: "#FF8D2C" } }, "home");because it has btnid, but there I cant change the text/icon size.
Is there a way to combine the code somehow like to add a btnid to the first code above?
Thanks a lot.
Kruna
-
In my spare time, I'm working on creating an updated template that incorporates phosphor icons. If you're patient, I'll share it eventually. Thank you for all the positive responses.
-
thats fine Steven
. I'll be happy whenever you decide to share and I am also happy that you share all your know-how, so I can learn and develope my db. Thank you for that a lot!
-
-
Hi ,
while waiting for 's updated version of the buttons, I have adapted the above code so that you can add as many buttons as you want to a page, each with a different design.
On the first button inside a function field, you will place the following code:
html("<head> <link rel='stylesheet' type='text/css' href='https://unpkg.com/@phosphor-icons/web@2.0.3/src/thin/style.css' /> <style> /* Common styling for both buttons */ button { cursor: pointer; transition: background-color 0.3s; display: flex; align-items: center; text-align: center; } /* Styling for the first button */ #button1 { padding: 10px 20px; font-size: 16px; background-color: #3498db; color: #fff; border: none; border-radius: 5px; line-height: 1.5; /* Adjust line-height for vertical alignment */ } #button1:hover { background-color: #2980b9; } /* Styling for the second button */ #button2 { padding: 10px 20px; font-size: 16px; background-color: #27ae60; color: #fff; border: none; border-radius: 5px; line-height: 1.5; /* Adjust line-height for vertical alignment */ } #button2:hover { background-color: #219d49; } /* Adjust the icon size if needed */ .ph-thin { font-size: 4em; margin-right: 5px; } </style> </head> <body> <button id='button1'> <span class='ph-thin ph-arrow-circle-left'></span> zurück zu Dashboard </button> </body>")For the second button inside a new function field, you will place only the following code:
html("<body> <button id='button2'> <span class='ph-thin ph-arrow-bend-up-left'></span> zurück zu Dashboard </button> </body>")Τhe final result is shown in the following screenshot. Of course you can adjust the styling options as you wish. For the best optical blending don't forget to set the background color of the function fields to white. Is this what you are trying to accomplish?
-
wow, thats so amazing cool! Exactly what I was trying to achieve.
tons of thank you!Am I right in assuming that for 3rd 4th button I just need to copy and change to button3, button4 and so forth? Well I tried and it did work so far. I was wondering if I have 10 buttons like in dashboard does it effect the db in some way, eg performance etc as the code will get pretty long?
Another issue I was try to accomplish is that the color of icon is different from text. Not taht this is crucial, but in 'my' code I have white text and colored icon. But for the life of me I cant find the piece of code which styles it.
Maybe it is controled somewhere else as I tried to change everything from ffffff to 000000 - kind of to find the piece of code, but the text still stays white...
Kruna
-
-
Upps look on web and on my Android Table
-
hola Rafael, same happened to me when using the Copy function on the right. Try to mark/slect the text from line 1 to 54 and then strg+c and paste in formula field.
Saludos Kruna
-
can you import the "Phosphor Buttons" database and tell me if the problem persist?
-
You are rigor Kruna no problem now.
-
-
Hi . I am glad you find it useful! In order to be able to change the icon color separately in each button you can add an inline style like below:
html("<body> <button id='button2'> <span class='ph-thin ph-arrow-bend-up-left' style='color: orange'></span> zurück zu Dashboard </button> </body>")I don't think that the number of buttons into the page make any difference because you have already retrieve all the icons (thin weight) from the CDN.
I think that an appropriate name for them would be the "Phosphor Buttons".
Credit goes to Steven for the original contribution and Rafael for introducing us to the Phosphor icons.
I have attached a demo database.
-
thank you so much, what a great work and share and sure the credit goes to Steven at first place and Rafael.
But with your help and input too I can now create a pretty nice dashboard
TY and wish you all a pleasent sunday!
-
-
Getting there ..... Update soon.....
Content aside
-
12
Likes
- 3 mths agoLast active
- 49Replies
- 1230Views
-
13
Following