Changing item colors

App Development
1

Hi everyone!

I am using the Default theme. I have tried them all and think this is the one that looks best.

The only challenge I have is that some default buttons are in blue and really throwing off the overall aesthetics of my app.

Would anyone be able to show me how to turn these Blue Items into Black?

Many thanks!

Screen Shot 2021-10-06 at 5.15.59 PM
Screen Shot 2021-10-06 at 5.15.59 PM911Ă—444 33.9 KB

Screen Shot 2021-10-06 at 5.17.32 PM

1 Like
2

Screen Shot 2021-10-06 at 5.21.32 PM
Screen Shot 2021-10-06 at 5.21.32 PM422Ă—545 12.5 KB

This is what I am getting as a theme. If the Primary blue turns into black, it would be super helpful.

3

Hey @Rez,

You can change the primary button by adding the following code to the Custom Header Code section under Settings.

<style>
.btn-primary {
    color: #fff;
    background-color: black !important;
    border-color: black !important;
}
</style>

image
image1708Ă—809 81 KB

1 Like
4

@Rez, to include the form steps, update the CSS to the following.

 <style>
.btn-primary, .p-step, .form-navigation-pages ul li.active:after, .form-navigation-pages ul li:hover:after {
    color: #fff;
    background-color: black !important;
    border-color: black !important;
}
</style>
1 Like
5

Thanks for the speedy reply @Chem, I ended up customizing a little further following your code and now it looks like a MILLION BUCKS!

1 Like
6

Hi @Rez,

Could you share the code you used for the status % bar? It looks really nice!

Thanks,
Alex

1 Like
8

Hi @tim.young, that is correct, but I wonder if @avralex was referring to the status bar on the first image, which is actually native of TB :smiling_face_with_three_hearts: :smiling_face_with_three_hearts:

Use a Slider field and then choose to display it as a progress bar:

Screen Shot 2021-10-08 at 12.32.26 AM
Screen Shot 2021-10-08 at 12.32.26 AM1506Ă—805 87.8 KB

9

Thanks @tim.young and @Rez,

I was indeed talking about the Slider (progress bar) which I have not seen in the Builder :smiley: Thank you for your response I will try it out on my apps.

Alex

1 Like
10

You’re welcome!

They indeed look great, and for further customization, I created some Table Rules:

  • Whenever a record is created or updated, set the Slider Field to 25 and set Status Field to “Pending”.

  • Whenever a record is created or updated, if Status Field is “In Progress”, then set Slider Field to a Custom Value of 50.

  • Whenever a record is created or updated, if Status Field is “In Review”, then set Slider Field to a Custom Value of 75.

  • Whenever a record is created or updated, if Status Field is “Complete”, then set Slider Field to a Custom Value of 100.

It’s important to set the numbers as “CUSTOM VALUE” and DO NOT use a Radio Field with Assigned Values, as those do create bugs (Took me a while to figure it out but @Chem saved me from that rabbit hole).

Does that make sense?