openannotation / annotator

Annotation tools for the web. Select text, images, or (nearly) anything else, and add your notes.
http://annotatorjs.org
Other
2.69k stars 533 forks source link

Restyling widgets in viewer and edit popups #635

Open kgish opened 8 years ago

kgish commented 8 years ago

I still haven't upgraded to v2.x and was wondering if there is an easy way in v1.2.10 to restyle (overrule css) only certain widgets (edit, submit, buttons, font-size, links, etc).

tilgovi commented 8 years ago

Nope :-(

kgish commented 8 years ago

For what it's worth, here's how I managed to change widget stylings. I realize that this is not a very elegant solution, but it works. In case anyone is interested I will share it:

this.annotator.subscribe('annotationEditorShown', function (editor, annotation) {
    var buttons = editor.element.find('button');
    buttons.css({
        display: 'inline-block',
        textAlign: 'center',
        borderRadius: '4px',
        border: '1px solid black',
        padding: '.2em .6em .3em',
        margin: '.2em',
        cursor: 'pointer',
        backgroundColor: '#fff',
        borderColor: '#ccc',
        color: '#333'
    });
    buttons.hover(function() {
         $(this).css({
           color: '#333333',
           backgroundColor: '#e6e6e6',
           borderColor: '#adadad'
         });
    });
});