Custom Buttons

Sam.1
1 yr ago
Reported - view

Thank you Steven and Happy Holidays! This will come in handy without all the effort.

‘Sam

Nick
1 yr ago
Reported - view

Thank you Steven, as always, your gifts are very useful!
I wish you Happy Holidays and a creative new year 2024!

gold_cat
11 mths ago
Reported - view

Rafael Sanchis
Rafael_Sanchis
11 mths ago
Reported - view

https://phosphoricons.com/

- Ninox partner
- RoSoft_Steven.1
- 11 mths ago
- Reported - view
Thanks for the link, also nice icons!

I guess it would also work with these with some tweaking in my code.
- Ninox developper
- Jacques_TUR
- 11 mths ago
- Reported - view
thanks for this amazing icons collection !

szormpas
11 mths ago
Reported - view

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>

- Kruna
- 10 mths ago
- Reported - view
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
- John_Halls
- 10 mths ago
- Reported - view
The code above was missing a final close quote and close bracket on line 23

</html>")

Regards John

szormpas
10 mths ago
Reported - view

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>")

Kruna
10 mths ago
Reported - view

Hi Steven, Thank you very much for your awesome and great contribution!!

Kruna
10 mths ago
Reported - view

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

- John_Halls
- 10 mths ago
- Reported - view
Sorry Kruna, this is beyond my scope. I hope someone else will be able to help
- Kruna
- 10 mths ago
- Reported - view
no prob, thanks anyway :-)

Ninox partner
RoSoft_Steven.1
10 mths ago
Reported - view

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.

- Kruna
- 10 mths ago
- Reported - view
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!

szormpas
10 mths ago
Reported - view

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?

- Kruna
- 10 mths ago
- Reported - view
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

Rafael Sanchis
Rafael_Sanchis
10 mths ago
Reported - view

Upps look on web and on my Android Table

- Kruna
- 10 mths ago
- Reported - view
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
- szormpas
- 10 mths ago
- Reported - view
can you import the "Phosphor Buttons" database and tell me if the problem persist?
- Rafael Sanchis
- Rafael_Sanchis
- 10 mths ago
- Reported - view
You are rigor Kruna no problem now.

szormpas
10 mths ago
Reported - view

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.

Phosphor_Buttons.ninox

- Kruna
- 10 mths ago
- Reported - view
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!

Ninox partner
RoSoft_Steven.1
10 mths ago
Reported - view

Getting there ..... Update soon.....

Custom Buttons

49 replies

Content aside

Overview