html help?

i've been fiddling with html since i learned you could use it in groups and i replaced the icon (using twilight's code, i just replaced the div tags to match the group ones) which worked, but resulted in the icon duplicating? see here. i actually like how it looks so i'm not intent on changing it anytime soon, but for future reference would anyone know how to make it not duplicate? it works fine in blogs bulletins and profiles, and i don't think i messed up the code in a way to make it do that so i assume it must have something to do with how the html for groups is structured

this is what i'm using below for reference:


.m-col > img { display:none; }
.m-col:after { background-image: url("http://images.hellokids.com/_uploads/_tiny_galerie/20090625/yu-gi-oh-animated-gif-24-source_ih0.gif"); display: inline-block; content:"" }
.m-row .m-col:after { background-size: cover; width: 160px; height: 160px; }

1 Kudos

Comments

Displaying 2 of 2 comments ( View all | Add Comment )

wdwy

1678928797

You don't need to worry too much about this duplication.
basketball stars

Report Comment

Ikoe

1675422571

not sure why you'd opt for a pseudo-element here. applying this on a column class is a bit iffy by nature.
in this scenario, since you're only replacing one image, it's a lot easier to just use a one-off content declaration;


.group-left .group-pic {
   content: url("http://images.hellokids.com/_uploads/_tiny_galerie/20090625/yu-gi-oh-animated-gif-24-source_ih0.gif");
   width: 160px; height: 160px;
   object-fit: cover; object-position: left;
}

the width, height, and object decs are there under the assumption that you wanna keep the square avatar thing going, obviously, but if not, feel free to ditch that.

Report Comment

that would be because i’m not sure what i am doing ^^’ thank you, i appreciate it!

by angel; 1675460607; Report

happy to help. (=◡= ) to elaborate a little, the method that Twilight applied here is more refined by virtue of making sure the original image is gone first—content leaves it intact, you can still right-click on and open the normal group img—but it's being declared on a single-instance div, whereas .m-col's used for both the group picture and the details, respectively.

if you wanna stick with this approach, you can append a :first-of-type selector right before :after - so in this case, .m-row .m-col:first-of-type:after and .m-col:first-of-type:after. content's just more straightforward and readable. :p

by Ikoe; 1675464032; Report