dwp-forge / refnotes

4 stars 6 forks source link

How can I add a border around the tooltip popup? #50

Closed BlakeTNC closed 4 years ago

BlakeTNC commented 4 years ago

The tooltip pop-up has a white background, with no border. On white Docuwiki pages this makes the pop-up "blend" visually with the rest of the page, and with the other text on the page... and this makes the pop-ups harder to read. I've solved this issue, and I wanted to share the solution with others.

1) Open Docuwiki>Admin>Advanced Configuration. 2) Click on Style>All, to edit Edit "userall.css". (This is a user customizable stylesheet.) 3) Add the following CSS into the stylesheet. Edit the values as desired. 4) Note that you may not be able to see the new style right away, even if you click reload in the browser. 5) To see the style right away, Google: "How to disable CSS cache" for your particular browser. (The purge cache button in Docuwiki does not do the same thing, as clearing the browser CSS cache.)

div#insitu__fn.insitu-footnote.JSpopup {
    border-style: solid;
    border-width: 1px;
    max-width: 22em;
    padding-left: 10px;
    padding-right: 5px;
    padding-top: 1px;
    padding-bottom: 1px;
}

-BlakeTNC

dwp-forge commented 4 years ago

I'm not sure how useful this will be buried in closed issues archive, but I see no point in keeping it open either.

BlakeTNC commented 4 years ago

To make it more available: I suppose you could make it an option in the plugin "popup-border". Or you could even make it the default behavior if you think it's better than no border.

dwp-forge commented 4 years ago

Actually, I do see a single pixel border on default template:

image

This style is used by native DokuWiki footnotes. It comes from lib/tpl/dokuwiki/css/content.less:

/*____________ JS popup ____________*/

.JSpopup {
    background-color: @ini_background;
    color: @ini_text;
    border: 1px solid @ini_border;
    box-shadow: .1em .1em .1em @ini_border;
    border-radius: 2px;
    padding: .3em .5em;
    font-size: .9em;
}

If you use a custom template that does not have that style set, you might contact the template author about this. Or just customize it to your liking in user style sheet (as you already did).