Styling profile pictures

API & Customization
1

Hi guys,

So I already have my round profile pictures, and

a) I would like to eliminate the coma between them,

image

b) and to overlay one picture on the other like that:

image

thanks!

2

@MichaelG can you show us a screenshot of the elements in your browser inspector? That’ll help work out what to hide and position with CSS.

3

Sure Brad, here it is:

image
image1900×904 205 KB

4

Close @MichaelG expand that element so we can see all the children (images and commas).

5

I’ve just learned how to expand an element. Here it is. Indeed we see where is the coma coded.

Comas Profile pictures
Comas Profile pictures1125×995 186 KB

6

Excellent @MichaelG time to play - hopefully there’s a CSS panel under the page elements (or next to it if you drag it out far enough).

Click on one of the <a elements that’s the parent containing each image.

Type into the CSS section under ‘element.style’ and try something like:
margin-left:-20px

Does that start to overlap the images?
If not try the <img tag item.

Once you find something that works you can build a CSS rule to save in Knack that’ll load. And my hunch is if we get the overlap working it’ll hide the commas without having to style them.

7

Yep! it does make the images overlap.

image

Now we need to do something about the first image which gets cut.

That would have been nice. The pictures don’t hide the commas.

8

Here the CSS from the Inspect element of the field. I hope it helps. Ask me more if you need.

Captura de pantalla 2022-07-08 121146
Captura de pantalla 2022-07-08 1211461214×1079 259 KB

9

Great @MichaelG we’re getting closer and can see what works. Now it’s time to save the CSS in Knack and then refine it to exclude the first image.

A quick way to get the selector right is to right click on it in the Chrome inspector, and choose copy > selector. Do that with one of the <a elements, switch to Knack builder API > CSS and paste the copied selector. Then add your code you’ve tried above.

Might be something like (this is a guess):
#view_265 > section ....... div.kn-detail.field_422_thumb_18 > div.kn-detail-body > span > span > a {margin-left: -20px;}

Share what you come up with and we’ll refine it.

1 Like
10

Hi Brad, a quick note to apologize for the delay in responding you. Finishing up some other things. Will answer you soon.
We will get those commas out!!