Footnotes make fantastic hovertips.1 But whilst hovering over them, they contain an unnecessary <br> that makes custom styling impossible.2
The footnotes are also difficult to stylise, because there are no classes given to the elements (the <b>Footnote #</b> is not a nice way to render bold font, I'd prefer <span class="footnote-heading">Footnote #</span>).
- <b>Footnote #</b> has no span class
- <div>Footnote Content</div> has no div class
- <span>(click to scroll to footnotes)</span> has no span class
This is bad bad bad, for obvious reasons, as it makes me resort to the following ugly CSS code:
.hovertip .content > br {display: none;} .hovertip .content b, .hovertip .content span {display: none;} .hovertip .content div b, .hovertip .content div span {display: inline;}
When I could ideally be using this instead:
.footnote-heading, .footnote-scroll {display: none;}
Excuse me, but if I scream like a lunatic, will you guys read and comment on this annoying problem?
λ James Kanjo
Blog | Wikidot Expert | λ and Proud
Web Developer | HTML | CSS | JavaScript
Hi James, i have read this bug some time ago, bat have no idea about where is those <br> element you are talking about, fought someone else known it, is a see… not. So where exactly is those <br> element. (between comment grey box and "Footnotes" word ??)
Bartłomiej Bąkowski @ Wikidot Inc.
';.;' TeRq (Write PM)
In the first sentence of this bug report, there are two footnotes to hover over. Hover over both of them to see the unnecessary <br>
λ James Kanjo
Blog | Wikidot Expert | λ and Proud
Web Developer | HTML | CSS | JavaScript
Structure:
I will outline the problems with this code again:
Footnote contents
</div>
Footnote contents
</div>
λ James Kanjo
Blog | Wikidot Expert | λ and Proud
Web Developer | HTML | CSS | JavaScript
Please no hard coding of styles inside generated code. Naming the things is fine but keep styling separate from structure in the CSS please
A - S I M P L E - P L A N by ARTiZEN a startingpoint for simple wikidot solutions.
Quick and dirty solution:
however we could do:
Elements will be styled in our CSS base theme, and can be easily overridden. What do you think about this approach?
Bartłomiej Bąkowski @ Wikidot Inc.
';.;' TeRq (Write PM)
Styling in base theme is okay…
HTML looks good…
but unexeptable to have to remove the br with css1
people
want
to have
breaks
A - S I M P L E - P L A N by ARTiZEN a startingpoint for simple wikidot solutions.
As you see, it removes only 1 <br>.
Bartłomiej Bąkowski @ Wikidot Inc.
';.;' TeRq (Write PM)
That would be great. Greater ability to customise = good idea.
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server
Sorry, overlooked that. Nice solution….
Would it be possible to have an [[include ...]] inside a footnote?
A - S I M P L E - P L A N by ARTiZEN a startingpoint for simple wikidot solutions.
Well…, it is possible, you probably wish to have inline includes :> ?, is it ??
Bartłomiej Bąkowski @ Wikidot Inc.
';.;' TeRq (Write PM)
Not nessecarily inline
Here is an example where it does not work… (caused by Listpages?) http://listpage-redirect.wikidot.com/footnote
A - S I M P L E - P L A N by ARTiZEN a startingpoint for simple wikidot solutions.
I'v change code, it works right now.
Bartłomiej Bąkowski @ Wikidot Inc.
';.;' TeRq (Write PM)
WAAAAAAAWWWHOOOEEEE! this is super… finaly done with the inline hover nightmare!!!
well … at first sight :-)
A - S I M P L E - P L A N by ARTiZEN a startingpoint for simple wikidot solutions.
YYYyyy…
Bartłomiej Bąkowski @ Wikidot Inc.
';.;' TeRq (Write PM)
AWESOME!
Steven your example page is teasing me to click the edit link, but I can't reach it!! XD
But includes in footnotes is awesome… I could probably do the same thing using custom hover tips… but the footnote syntax is far simpler.
THANKS!
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server
I'm happy that includes work inside footnotes.
I like it - but does it suit James?
Kenneth Tsang (@jxeeno)
I think this is universal enough, BUT you cannot style the whole overlay. E.g. you cannot simply set background to red for all footnotes.
What about:
Another suggestion was to standardize structure for the footnote like this:
(there is no "f-" prefix in class names) which would be a more elegant solution, BUT it seems dangerous because people might be already using common names like "footer", "content", "heading" in their own custom CSS, and those could overlap and give confusing results.
We will implement the solution that most of you agree on, they all provide nice improvement over the current layout.
Michał Frąckowiak @ Wikidot Inc.
Visit my blog at michalf.me
I will go for the f- solution to prevent breakages with my header, footers and content :-)
Kenneth Tsang (@jxeeno)
I agree. Being able to use "footnote" for the whole footnote would be awesome as well.
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server
Thankyou so much for the close attention you are taking to solve this problem — I really do appreciate it.
λ James Kanjo
Blog | Wikidot Expert | λ and Proud
Web Developer | HTML | CSS | JavaScript
We approved the "f-" as more unique and safe, so I consider this discussion as closed and I'm pushing it to developers.
Done, closing.
There are 2 similar things (which use <br />): Reference and Equation. Should it be change in the same way as Footnote?
Bartłomiej Bąkowski @ Wikidot Inc.
';.;' TeRq (Write PM)
Thankyou so much!
Yes, absolutely. Perhaps "r-" and "e-" respectively.
λ James Kanjo
Blog | Wikidot Expert | λ and Proud
Web Developer | HTML | CSS | JavaScript
Ok, implemented to.
Bartłomiej Bąkowski @ Wikidot Inc.
';.;' TeRq (Write PM)
Is it possible to publish the implemented solution here? Meaning: what is the correct structure that is implemented now? I ask this to the developers.
Thanks.
A - S I M P L E - P L A N by ARTiZEN a startingpoint for simple wikidot solutions.
First code block in Michal's post - with the "f-" prepended to the class name, for footnotes. Same structure for a reference ("r-") and equation ("e-"). You should be able to see this by looking at the HTML.
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server
Is it possible to publish the structure of all id and classes involved. I am trying to adjust the padding (in red on picture) of my tooltip (inline hoover/popup… what's in a name) and I don't know which class or id to call.
A - S I M P L E - P L A N by ARTiZEN a startingpoint for simple wikidot solutions.
After finding the site you're working on, it looks like you may have answered your own question (the tooltips look nice and don't have the extra padding that I can see). This discussion is about new classes that were added for footnotes, references and equations. It looks like you're using a "home brewed" hover tooltip solution. Or, am I missing something?
Community Admin
Thanks Ed for your reaction… yes I made a custom hover because the "footnote"-hover-tip exludes a possible link you may wish to have on the word/tab… But still I would like to see the classes here because I can't find the names since they are generated by javascript for the footnote-hover-tip. I tried firebug but I can not get my cursor on the popup since it moves together with the mouse.
So I know this wish was about the classes and id's for the footnote… but the only purpose for those names and the structure is that they will be used to do some CSS-ing… so I thought this question was in place.
A - S I M P L E - P L A N by ARTiZEN a startingpoint for simple wikidot solutions.