Element in Tour Application Extension: CSS selector

Help / Discuss
,
1

Hi guys,

I’ve tried to implement the Tour Application Extension in my wiki recently. Unfortunately, I have a problem in editing the tour. It asks for an “Element (CSS selector that identify an element)”. I tried to figure out how it works. I can insert an element there (e.g. body like in the example on the Extension page). BUT the tour will be viewed in the center of the page no matter what I insert!

My question is: How can I find out the CSS element names?

In case, you don’t get what I’m talking about, please be Patient. I’m confused and don’t have any clue! :wink:

Best regards,
ZD14

2

Here are some example of valid CSS tour selectors:

In theory any valid CSS selector works. You just need to inspect the element with the Developer Tools of your browser. Would be nice if you could update the documentation to make it more friendly. Thanks

3

Thank you very mich evalica! That’s exactly what i was looking for :slight_smile:

I try to find the CSS selectors I want to refer to.

How can I update the documentation? And what do you want me to add? I like the Multi Page Tours page, but I haven’t found it yesterday.

Best regards :slight_smile:

4

anything that you might think was not obvious when reading the documentation, that you needed to ask on forum. The details might help other people reading the documentation.

I’m glad it was helpful.

5

OK. I’ll have a look at it :slight_smile:

6

Hi evalica :slight_smile:

It’s me again! Unfortunately I was very busy the last weeks. I haven’t had time to update the documentation. However, I still have troubles finding the CSS selectors sometimes.

For example, I have installed the rating extension. In the Developer Tools i found the following:

<div class="xcontent">
  <div class="row document-header">
  <div class="document-info col-xs-12 col-md-7">
                   <div class="rating-wrapper" id="rating-xwiki:Main.WebHome">
<div class="avg-rating">
<div class="rating-container " id="xanwjqqtughv">
<div class="rating-header "></div>
<div class="rating-stars">
    <ul class="star-rating -star ">
        <li class="current-rating" style="width:0.0%;"></li>
                                    <li><a href="#" title="Poor" class="one-star">1</a></li>
                        <li><a href="#" title="Satisfactory" class="two-stars">2</a></li>
                        <li><a href="#" title="Good" class="three-stars">3</a></li>
                        <li><a href="#" title="Very good" class="four-stars">4</a></li>
                        <li><a href="#" title="Excellent" class="five-stars">5</a></li>
                </ul>
</div>
<div class="rating-message"><span>0</span>&nbsp;Votes</div>
</div>
</div>
</div>

but using “rating-xwiki:Main.WebHome” doesn’t work. After I tried it, i always got an error with “SEQUENCE”:
shortcut.add(“x x x a”, function() {
developerShortcutsRestCall("/xwiki/rest/currentuser/properties/usertype/next",
“Unable to update the current user type”);
}, {‘type’: shortcut.type.SEQUENCE, ‘disable_in_input’: true });

Can you help me? Thanks :smiley:

7

Well @ZD14, this has nothing to do with XWiki :slight_smile: but with CSS in general. You should read more about selectors in order to understand how they work, see CSS selectors - CSS: Cascading Style Sheets | MDN

The example you gave, provides a very strange name for an ID, so you need to make sure that in your selectors you are using the ID selector (#) and that you escape the characters that can have meaning in CSS (:,.), so your selector for that would be: #rating-xwiki\:Main\.WebHome

But because of all the strange characters (:.), there might be a bug in the Tour App, so it would be nice to report it. You could try to use another selector like: .document-header .rating-wrapper, it all depends on what you want to achieve.

8

Hi,

I really appreciate your help!

I read through the article and I get why .document-header .rating-wrapper works! I think I’ll be able to identify the selectors by myself now :slight_smile: (at least I hope I’m able to.) However, I’m almost done with editing tours!

Regarding the strage characters:
If I use #rating-xwiki\:Main\.WebHome nothing happens. The tour doesn’t even start.

Thank you very much! :smiley: