Just started, how do I select <img> tag in carousel?


#1

I just started with this yesterday. I have a carousel, with 3 slides. I some how selected the image tag for the first slide, and noticed the corner radius setting. Changed it, and thought it looked cool. But now for the life of me, i can’t select the for the other 2 slides to edit them. I’ve tried left clicking every way i can think of. I’ve tried all combos of command keys. It seems like selecting things in general is a little fiddly. Perhaps as a solution to this problem, how do you write targeted css selects in Blocs? eg “carousel-1.img” Selector tags are slightly different? Or are they and it’s a problem with me not understanding the interface well enough?


#2

You can’t select the images directly in the current version. There are ways to style the images with classes.

I’m hoping to open up the carousel more in future versions so you can select the actual img tag.


#3

is there detailed documentation somewhere? Not that i’m any sort of pro, but css selectors don’t seem to work normally in blocs. I write something, it alters the name, reducing my understanding and hampering troubleshooting. Are some classes “baked in”? I thought, based on your response that i’d be able to style #carousel-1 with the .img-rd-md class. It doesn’t seem to work. And where did that class come from? If there was documentation with details for every function, I wouldn’t have to ask.


#4

There are docs, you can open them from the Blocs Start window. They don’t however, go into deep details about classes at the present time.

When you use a preset from the sidebar, Blocs creates a style, you can subclass them if you know the names, some of the main ones are listed in the class manager > add class > subclass dropdown.

To style the images of the carousel, you need to give the carousel a class: my-class and apply it to the carousel via the sidebar class input field. Now we have the target set, add a second class via the class manager: my-class img , this class targets the actual images. Open this class in the class editor and set the border radius to whatever to get rounded corners on all images in the my-class carousel.


#5

ok, i think i get the quirks of the differences in writing as opposed to what is shown. And my issue of rounding the corners of all img in the carousel required basically nothing, which is sort of what i thought in the first place, and what was frustrating me. It was just a matter of overflow-hidden in the border settings on the carousel ID, I am dumb. Is there a way to put tags in these responses so if other idiots are looking for the same thing it will be easier for them to find?


#6

thanks for the quick response!


#7

I’m not sure as it’s a new forum, I’m still finding my way with it also :triumph:. Another member may be able to shed some light in that respect.


#8

@norm,

See here concerning Discourse Tags:

Maybe that will assist you.


#9

so how do i select all the img in a gallery? I used one of the premade ones. I wrote the rule correctly, because if i apply it to an img, it works. But i can’t get it to work applying it either to the div the rows are in, or the whole block. What am i doing wrong? Logic tells me it should be #divID > img, which i think in blocs should be my rule applied to the selected div over in the right-hand sidebar?


#10

got it, now that i understand that i have to make a rule, then a “ghost rule”, it’s basically the same procedure as you mentioned above for styling the carousel. Thanks.


#11

@Norm, does that link help you in regards to enabling tags? It would be beneficial for the forum/users.