Beautiful Design App

i updated Code BOOK with new look… and codes

3 Likes

cool

Hello boys. Will anyone have a CSS code to change the color of several buttons that are one below the other, but that each color is different?

With the code that CSS I have, I put all of the same color.

@Lucas_Pires @Uzo @Darren_Murphy @Pedroydzito

This?

2 Likes

No, I have used that one for the floating buttons.

In this case I need to be able to change the colors that way, but in normal buttons (the first ones of glide) but I tried this code and it did not work for me.

@Darren_Murphy

A code is not specific for one thing when you start to manage for what you want

2 Likes

Just go to a Code BOOK App, you will find it.

1 Like

Yes, I know. I had tried changing the classes but didn’t know the exact name.

Just what I was looking for. Thanks a lot @Lucas_Pires

1 Like

Yes, your input is great, I have used your CSS code app on many occasions.

Get the code you need and change child() numbers for specific buttons, and add more children if you wanna target more buttons, just fallow the pattern in the code, in this app, there is a test CSS tab, you can try to modify code and see results

Anyone know how to change this card style color? from white to maybe other color ?

just in type() enter component number as it is in your editor


div[id*='screenScrollView'] > div > :nth-of-type(2) button {
    background-color: red;
    color: green;
}

div[id*='screenScrollView'] > div > :nth-of-type(3) button {
    background-color: green;
    color: red;
}


div[id*='screenScrollView'] > div > :nth-of-type(12) button {
    background-color: black;
    color: white;
}


div[id*='screenScrollView'] > div > :nth-of-type(13) button {
    background-color: purple;
    color: yellow;
}


div[id*='screenScrollView'] > div > :nth-of-type(14) button {
    background-color:yellow;
    color: black;
}
4 Likes

You’re welcome!

1 Like

What a pity. Will you have a CSS code to change the color of a choice?

Pedro… it’s amazing progress bar :tada:… congrants… Could you share us the CSS code? … thanks :wink:

1 Like

Do you have any current CSS settings for that card type? I’ll add to that.

1 Like

hi, i dont have any CSS on the card style… im asking if anyone know how to change the card style too :sweat_smile:

<!--Image-->
<p style="position: Absolute;
width: 43px;
left: 50%;
margin-top: 0px;
margin-left: -140px;
transform: translate(-50%, 0%)">
<img src="https://i.imgur.com/FvPtAkr.png" /></p>

<!--Progress Bar-->
<pre><span><style>
.fckzPp {position: absolute;
background: #13161d;
height: 9px;
width: 261px;
left: 50%;
border-radius: 100px;
margin-right: -50%;
margin-left: 26px;
transform: translate(-50%, 0%)}
</pre></style></span>

And the text I created a template column, to be updated as the tasks are done.

<!--Text-->
<center><h5><font color="#efbc00">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; FINISHED% Concluído<font color="#ffffff">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; CONCLUDED/REMAINING Tarefas

Certainly, there is a better way to make the spacing better, but it worked, except for the fact that the size is tiny when it is on its side, but I still have to fix it …

2 Likes

I’m using Chrome, and the Code BOOK app doesn’t open.

Why do you need to specify the id?

Just curious.