Component with background image : SOLVED!

Beginners
1

Diving into components and the very first thing i wanted to do doesn’t work as i want it to.

i have a component that is nothing more than a bunch of <a> elements wrapped in a <p> which is then contained by a <div>

i want to style it by putting a background image onto the <div> and making all the link text transparent so when you click on the background image, you are actually activating the link.

you can see how it works at ranttit.net

the problem is how can i have multiple instances of this component in my project when the image is defined in the CSS which applies to ALL instances of the component?

i don’t see a way to make a rule in my CSS file “editable”, unless i’m missing something (which i probably am).

anyone have thoughts on this?

2

SOLVED!

under editable areas for the defining component, there is a box labeled cryptically enough

  • Bck. image

Capture

this presents a file browser option under each instance of the component where you can choose a different file for the background image linked in the CSS.

Capture
Capture.JPG687×518 32.1 KB

now when i change out the list of links they will all line up on top of the new image to make them pseudo clickable.

PG is like a magic, i’s tell ya.

3

oh, so close… i just noticed this creates an inline style to override the stylesheet.

not really what i was hoping for, but it at least gets the job done.

is there still something i’m missing?

should i create another style sheet for each instance or something? what would be the point of that anyway?