Where do I find the css code for glide so I can incorporate css into my apps?
I know there have been posts (examples) but I want to be able to code my own.
Firstly, to be clear about this, Glide does not offiicially support CSS so you won’t have any documentation on that from the platform. What us CSS users do is just integrate those to customize the feel of our apps.
Personally I would recommend reading about CSS Selectors.
https://www.w3schools.com/cssref/css_selectors.asp
Then dive into the inspect element world in your browser, find what settings are available in there, do some trials and errors to find what matches your interest.
4 Likes
Hi, just beginning to try to use CSS (0 knowledge). I’m having a headache with the code below to deliver point 1-:
1- all vertically centered
2- emoji on the left
3- text horizontally centered.
div style =“background-color:#00559c;
border-radius: 5px;
height: 60px;
text-color:#ffffff”;
br
h2
div style = “text-align : left;
padding-left : 10px”
/div
div style = “text-align : center”
SUMMARY
/div
/h2
Many thanks in advance if you have a clue
1 Like
If I understand correctly, you would like to change the buttons on your detail screen.
In this case you don’t have to select a generic div element, but you have to select the [data-test = “app-button-view”] element.
For example, to change the background color of all the buttons in the detail screen you will do:
[data-test = “app-button-view”] {
background-color: #00559c !important;
}
As @ThinhDinh said:
This is a necessary step that you must take if you want to begin to understand the structure of the elements.
Give it a try, activate the Chrome developer tool and see what it does.
2 Likes
Thank you @Roldy, I’ll try to understand this to customize my RichText.
1 Like
You’re welcome. If I can help you I am here.
1 Like
Hi, thanks.
No it’s a RichText component, with a blue background & white font, and where I want to put:
- the emoji on the left
- and the text in the middle.
But with my code (below), the emoji is not aligned with the text.
I’ve started to do what Roldy told, but it’s still a treasure hunt for me! Will need to watch tutorials I think…
div style =“background-color:#00559c;
border-radius: 5px;
height: 60px;
text-color:#ffffff”;
br
h2
div style = “text-align : left;
padding-left : 10px”
/div
div style = “text-align : center”
SUMMARY
/div
/h2
So the emoji needs to be to the very left of the component? Any reason why you don’t use a button but still wants a border-radius? An image of what you want should be helpful.
Thanks for your answer. My target is to have this clickable “titles menu” but with emojis aligned on the left.
I chose to use X RichText components instead of buttons because:
- I already have some buttons on the page and thought that a CSS would impact all of them
- I wanted this to look like a little bit more like titles (bigger font, angles closer to a square…)
This should not be the case, I’m sure you have used specific element styling before as I have replied to you in one of the other threads in this forum 
If you don’t want that, sure, I will try this some time this weekend.
You sure? I think this is the 1st time I post on CSS… I have to double-check
You probably want to use html or div tables in the rich text component. So you would end up with a two cell table, but the left cell would have a small width and the second cell would cover the remaining width.
This is something I through together quickly using divtable.com and tweaked some of the CSS myself.
You would need a rich text component to act as each button and looks like this:
<div class="divTable blueTable">
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell">✏️</div>
<div class="divTableCell">SUMMARY</div>
</div>
</div>
</div>
Then you need a separate rich text component to handle the CSS styling, something like this.
<pre><span><style>
div.blueTable {
background-color: #5F91EE;
width: 100%;
text-align: center;
border-radius: 5px;
}
.divTable.blueTable .divTableCell, .divTable.blueTable .divTableHead {
border: 0px solid #AAAAAA;
padding: 3px 2px;
}
.divTable.blueTable .divTableBody .divTableCell {
font-size: 13px;
color: #FFFFFF;
}
.divTable.blueTable .divTableCell:nth-child(odd) {
width: 10%;
text-align: left;
}
/* DivTable.com */
.divTable{ display: table; }
.divTableRow { display: table-row; }
.divTableCell, .divTableHead { display: table-cell;}
.divTableBody { display: table-row-group;}
</style></span></pre>
3 Likes
Thanks a lot @Jeff_Hager, I did not think that it would require such a development.
Here it is!
Thanks again
2 Likes
Awesome! It probably could be simplified somewhat, but divtable was just a quick way to throw it together. I think the key is to use a div or html table, because if you start to apply different alignment styling to the same horizontal line, then they conflict with each other and put them on separate lines. Tables let you control the elements and styles of each cell.
1 Like
Here’s a quick draft based on your original CSS.
<div class="button-summary">
<div class="emoji">🗞️</div>
<div class="text">SUMMARY</div>
</div>
<pre><span><style>
.button-summary {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
text-align: center;
background-color:#00559c;
border-radius: 5px;
height: 35px;
color:#ffffff;
font-weight: 600;
}
.button-summary .emoji {
position: absolute;
left: 30px;
}
3 Likes
Many thanks @ThinhDinh, you’re great!
Now, I’m a bit lost between your and @Jeff_Hager solution…
Since this menu is at the core of my app, I probably have to choose the one which is the most suitable with any types of smartphone/tablet.
Would you have a recommendation between your full CSS and Jeff’s combination with an html table?
Many thanks again for your time
I think both would work.
2 Likes