Custom Before / After Labels are being overwritten by CSS

zurb / twentytwenty

jQuery Plugin to Compare Images

ISC License

1.27k stars 295 forks source link

Closed Jany-M closed 7 years ago

Jany-M commented 7 years ago

Since it's possible to have custom options, like:

$(".twentytwenty-container").twentytwenty({
    before_label: 'Cover',
    after_label: 'Article'
});

I'm not sure why you have this in the default CSS:

.twentytwenty-before-label::before {
    content: "Before";
}
.twentytwenty-after-label::before {
    content: "After";
}

Because it overrides the set labels in options... just curious if this is a bug or leftover from old code?

davidherney commented 7 years ago

Hi...

the error is fixed if you change the next styles into css/twentytwenty.css:

.twentytwenty-before-label:before { content: "Before"; } .twentytwenty-after-label:before { content: "After"; }

For: .twentytwenty-before-label:before { content: attr(data-content); } .twentytwenty-after-label:before { content: attr(data-content); }

Saludos

raphaeleidus commented 7 years ago

@Jany-M which CSS file are you using?

Jany-M commented 7 years ago

@davidherney thank you, hopefully it will be fixed in the actual file too. @raphaeleidus the library's css.

raphaeleidus commented 7 years ago

@Jany-M sorry, when I added this feature I missed that file, you can use this CSS file instead: https://github.com/zurb/twentytwenty/blob/master/css/twentytwenty-no-compass.css

it is part of the library and it is functionally equivalent.

I am submitting a patch now to correct this for the other css file too.

raphaeleidus commented 7 years ago