Wrap block-level syntax with unique class for easier custom styling.

[Celti]

Thanks to the lack of parent selectors in available CSS, the current setup makes it impossible to edit any styles on the immediate parent <p> for the folder link. Either putting a class on the <p> or wrapping the entire syntax block in an appropriately-tagged <div> would resolve that.

Would a PR for either version be accepted?

[lpaulsen93]

I don't see reasons for not merging such a PR.

If I render the following example wiki code

test test test ++text | foldable text span++ test test test

test2 test2 test2

++++ Title |

Foldable text block

++++
test2 test2 test2

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

I get the following HTML code:

I see that the links have the class folder. Isn't that enough for styling/your use case?

[Celti]

It is not. We need to style the parent <p> that contains the <a class="folder">, because the <p> is the relevant block-level element. CSS at this time does not allow selecting parent elements by the class of a child element.

[Michaelsy]

We need to style the parent <p>

What effective end result do you want to achieve with your styling of <p>? (Independent of the way this would be achieved?)

- Michael Sy.

[lpaulsen93]

We need to style the parent

that contains the , because the

is the relevant block-level element.

I see. But we have two different cases. I guess you are talking about the folded syntax creating a whole foldable div/text block. In case of the inline folded text span the parent <p> element also includes other text not related to folding. So maybe your idea to create a surrounding <div> element would be the best solution. But I am not a CSS expert and open for any ideas. But we need to address both cases.

[Celti]

Yes, sorry; we're explicitly looking at the block-level folded syntax, which creates a new <p> surrounding the folding link (lines 62 and 64 of syntax/div.php). For the use we're putting it to on a private wiki, we need to adjust the margins, which is why styling the <a class="folder"> doesn't work. For the inline folded syntax, block-level styling shouldn't be necessary.

I've been patching it locally to simply add a class folded_wrapper to the <p> on the lines mentioned above and it's worked just fine. A wrapper div with a similar class would also work, as i could simply style using child selectors then.

[racquetmaster]

I would also like to see a class added to the parent <p> tag. The <p> tag has a margin between the .folder and the .folded. For readability, I would like to remove that margin so that .folded is grouped with the link above rather than the link below it. I would like to style it this way for our entire wiki, rather than require the editor to put a wrapping div around it every time.

Other reasons:

• It is an easy fix
• It doesn't break backwards compatibility
• In general, it is most powerful for the most parent element to have the styling. It is easy to reference children but hard to reference parents.

Otherwise, thanks for providing a great plugin!

[racquetmaster]

Upon further reflection, my use case would also be solved by .folded being inside of the <p> tag, which might logically make more sense. That would more likely break compatibility however and the above suggestion is simpler to implement.