Morning all
I’m wondering if anyone knows of any in-depth tutorials / help pages covering custom CSS in glide.
I have a basic understanding of CSS and have watched Jack’s excellent video - but looking for something more in depth.
Am currently just randomly clicking bits and bobs to try and find the relevant class in the Chrome element inspector and am struggling.
Any help appreciated.
Andrew
I know that @abdo has made a handful of excellent Youtube videos on CSS with Glide. Check the Community Resources section, I think he would have posted them there.
check if this helps
Thanks so much @abdo
This really helps -
Though I am still struggling to use the Google Dev console / element inspector to find the right class. Will take a look on YouTube to see if I can find a video aimed at Google Chrome specifically.
If you struggle with finding it, provide some examples in this comment section and we’ll try to help you with that, so you get an idea on how we work towards that in general.
Andrew go step by step. Assign a class name to a component and then in the custom css section give it a border. to see what you are actually targeting.
Then give a border to all div’s inside. StyledDiv1, 2, 3, 4 etc… before you start updating any css. Give also a padding 10px to separate certain divs that seem to be on top of each other.
As mentioned above if there is anything particular you want to style, post it here and maybe we can help you do it. The more you work with it the simpler it will seem. I can assure you the first time I tried to update custom css I struggled the same.
Thanks so much @abdo and @ThinhDinh
Here is just one example - hopefully if I can crack this with your help, I should be able to learn to do it myself.
I have a table in a container which I have given the CSS class of supplier-page-supplier-list. Users select an item from the left, and more detail is given for that item on the right,
The table consists of two columns. One is an arrow which points at the currently selected item - the other is the item itself.
For starters, I would like to right align the arrow (an emoji icon - so just text) - at the moment it defaults to the left.
I’ve got this CSS so far:
.supplier-page-supplier-list td {
width:100px;
height:10px;
padding-top:3px;
padding-bottom:3px;
border: .5px solid black;
text-align:right;
background-color:yellow; //just for debugging and setting up.
}
Of course this is applying to every cell (TD) - not sure how I isolate it to just apply to the left column (though actually the text-align:right property above doesn’t seem to do anything anyway.)
I’d also like to hide the very top “header” row if possible.
Any help most appreciated. I have tried inspecting elements in Chrome, but find it baffling. Don’t seem to be able to find the supplier-page-supplier-list class either - or a way of searching for it.
Thanks for all
Andrew
Hi @Andrew_Davies, i’ve messaged you. Would be way easier for me to demonstrate on a duplicate of the app.
To start with, why do you need a table on the left. I would definitely go with a collection instead.
Thanks Abdo
A collection is a good idea, but I don’t think you can have a collection in a Container??
EDIT - sorry, meant Custom Collection
Of course you can.
Apologies - my terminology was mixed up.
I have a table (collection) in a container. @abdo suggested popping a collection in there instead. I assumed he meant Custom Collection (which can’t go in a container). Of course he was referring to any collection type (Card, List, Table, Data Grid etc)
It’s just the Custom Collection that won’t go in a Container.
My bad - apologies!
Andrew
Hi Andrew
You can do many things with a collection. I would say a list is the best for your usecase.
Instead of the arrow, maybe you can have a unique icon color (heroicons) for the selected item.
