Line directly over text element

Hello @all,
is that possible to have a line directly over a textelemet like this:
Linie

the only thing what i have found is with Symbols but the line in there is much higher ober the text.

Many thanks
TheBob

Hi, yes you can have a horizontal line. See https://www.xwiki.org/xwiki/bin/view/Documentation/UserGuide/Features/XWikiSyntax/?syntax=2.1&section=HorizontalLine

Ofc if you need to tune the spacing, you’ll need to use CSS. See https://www.xwiki.org/xwiki/bin/view/Documentation/DevGuide/Tutorials/SkinExtensionsTutorial/

Hello vmassol,
many thank’s for replay!
I have a Problem to understand the documentation under Skin Extension Tutorial.
Where can i find the “Editing objects of SkinExt”?
I have have find out a little css code like this:

/* DB-Linie über Text */
.dbline {
text-decoration-line: overline;
text-decoration-color: red;
}

but did’t know how to ad that to xwiki.
Sorry but I’m not really a progammer :frowning:

Many thank’s

The cool part is that You don’t need to be a programmer :slight_smile:

See the second bullet point of https://www.xwiki.org/xwiki/bin/view/Documentation/DevGuide/Tutorials/SkinExtensionsTutorial/#HPrerequisites

And then https://www.xwiki.org/xwiki/bin/view/Documentation/UserGuide/Features/PageEditing#HObjectseditingmode

I have read that 3 times but it looks I’m to stupid to understand that:
Where can i find this:
skin_ext

Sorry about that :frowning:

forget about it, i have find out the problem. first i need to change my user profile under “user type” to advanced! Did’t see this before!

BTW from the look of your screenshot you seem to be using some old unsupported xwiki version. I’d highly recommend that you upgrade to the LTS or last stable :slight_smile:

GM vmassol,
this was just a screenshot from the xwiki documentation, i have installed latest LTS.

Other question, i have checked the documentation and was able to generate a test Java “Hello World”
But then i would like to comeback to my first problem about the overline.
I have create a XWiki.StyleSheetExtension with this css input:

/* DB-Linie Rot über Text */
dblinered {
text-decoration-line: overline;
text-decoration-color: red;
}
and this parameters:
parm

After that i put in a new document that one:
(% class=“dblinered” %)
hallo
My hope was that the hallo are overline in red but nothing happend. I see only hallo.
What was my fault.

Many thank’s and good start in the day

Note: You don’t need “parse content” set to “yes” since you don’t have velocity in your content.

To debug, you should use your browser web dev tools feature to check the computed CSS and the generated HTML.

Thanks

Thank you vmassol.
but that one here is also not working:

(% style=“color: red” %)


The line is black if I export that and grey in the document display.
Thank you for helping

it’s clearly working: https://playground.xwiki.org/xwiki/bin/view/Main/VMA/ :slight_smile:

WDYM by “export”? You didn’t mention any export before in this thread.

Again, please use your browser dev tools to check the generated HTML and CSS.

Pls. forget the export, I’m working on two things export to pdf and the red overline.

The Word test is red but there is no Red Overline.

Works fine: https://playground.xwiki.org/xwiki/bin/view/Main/VMA/

Screenshot 2021-05-18 at 14.41.11

You just need to use valid CSS…

.dblinered {
text-decoration-line: overline;
text-decoration-color: red;
}

did you create a page with object StyleSheetExtension like the desciption Minimal StyleSheet extension?
I did that and put the same css code like you worte in there.
after that i create another page and put

(% class=“dblinered” %)
hallo

I seeing only “hallo” and overthere a grey smal line.

Hello @ all,
i have findout how you do that!
two more qestions about that:

  1. how can i do that, that the class with the css code is available on all sites?
  2. the red line needs to be vailable on the entire with (like my first post), not only the words length.

I trie that one for question2:

.dblinered {
text-decoration-line: overline;
text-decoration-color: red;
width: 100%;
}

I have installed letest xwiki LTS Version
Many thanks

OK for point 2 i have found this solution:

.dblinered {
width: 100%;
height: 1px;
margin-top: 1em;
margin-bottom: 2em;
background-color: red;
}

For question one i need some help pls. :slight_smile: