12

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

null
    • Sam.1
    • 10 mths ago
    • Reported - view

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

    ‘Sam

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

    👍

    • Rafael Sanchis
    • Rafael_Sanchis
    • 9 mths ago
    • Reported - view

    https://phosphoricons.com/

      • Ninox partner
      • RoSoft_Steven.1
      • 9 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
      • 9 mths ago
      • Reported - view

       thanks for this amazing icons collection !

      • szormpas
      • 9 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
      • 9 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
      • 9 mths ago
      • Reported - view

       The code above was missing a final close quote and close bracket on line 23

      </html>")

      Regards John

      • szormpas
      • 9 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
    • 9 mths ago
    • Reported - view

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

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

       Sorry Kruna, this is beyond my scope. I hope someone else will be able to help

      • Kruna
      • 9 mths ago
      • Reported - view

      no prob, thanks anyway :-)

    • Ninox partner
    • RoSoft_Steven.1
    • 9 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
      • 9 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
    • 9 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
      • 9 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
    • 9 mths ago
    • Reported - view

    Upps look on web and on my Android Table 

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

        can you import the "Phosphor Buttons" database and tell me if the problem persist?

      • Rafael Sanchis
      • Rafael_Sanchis
      • 9 mths ago
      • Reported - view

       You are rigor Kruna no problem now.

    • szormpas
    • 9 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
      • 9 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
    • 9 mths ago
    • Reported - view

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

Login to reply

Content aside

  • 12 Likes
  • 2 mths agoLast active
  • 49Replies
  • 1201Views
  • 13 Following