search

dokuwiki / dokuwiki

The DokuWiki Open Source Wiki Engine
http://www.dokuwiki.org
GNU General Public License v2.0
4.13k stars 849 forks source link

Feature request: add CSS classnames based on namespace, pagename, ans namespace depth #2531

Open schplurtz opened 5 years ago

schplurtz commented 5 years ago

Hi, In order to help users code things like «set special CSS style to any start page in any namespace» or «add a special background to pages under the foo: namespace», It would be nice if DokuWiki added classnames to its main div <div id="dokuwiki__content"> based on namespace, pagename, and namespace depth.

For example, page :foo:bar:start would have this : <div id="dokuwiki__content" class="dwn_foo dwn_foo_bar dwn_bar_ dwl_2 dwp_start dwp_foo_bar_start">

while page :start would have this <div id="dokuwiki__content" class="dwn_ dwn__ dwl_0 dwp_start">

users could then easily style their pages in userstyle.css file, for example:

/* Pages in the foo namespace have a red background */
#dokuwiki__content.dwn_foo div.page {
  background_color: red;
}
/* Pages named start have an uppercase h1 title */
#dokuwiki__content.dwp_start div.page h1 {
  text-transform: uppercase;
}

I wrote a function that computes the class list based on the pageID available in this gist

Each template author would have to add it in her template...

If you happen to like the idea, I can prepare a PR.

phy25 commented 5 years ago

My two cents: there is a tpl_classes() now indeed. Can we just move these class definitions to #dokuwiki__top rather than creating new ones at #dokuwiki__content?

schplurtz commented 5 years ago

I did not see #dokuwiki__top as I concentrated on page content. Also I did not know tpl_classes().

Writting CSS selector won't be more difficult with #dokuwiki__top. And tpl_classes() is also used by other templates. I just checked : most templates released this year use tpl_classes(). So this is definitively where that code belongs.

phy25 commented 5 years ago

One more thought: we can expose tpl_classes() with a plugin event and let plugins do the work...

schplurtz commented 5 years ago

That's a possibility, sure. But each time you put a plugin in the way, you add a little difficulty for users. I remember a collieague who needed to install a cool wiki as we have at work. Each time he asked "How do I do this ?" the answer was "Oh, that. That's a plugin". This was really puzzling for him. And do you really need to create a plugin for just 20 lines of PHP ?

Anyway, it's up to you, I guess.

phy25 commented 5 years ago

I agree this is a useful feature 👍 Maybe we need some more discussions...

schplurtz commented 5 years ago

Great. I hope your fellow developpers will also agree.

Klap-in commented 5 years ago

Looks related to: #996

(class for show vs admin already exists: #1508)

Klap-in commented 5 years ago

According to #996, @splitbrain assigned it to @selfthinker. @selfthinker do you have further guidance for implementation?

karamellpelle commented 4 years ago

@splitbrain , @selfthinker : Is this feature request something you can implement? Since it would be really handy to write CSS rules based on namespace, as explained here.

giterlizzi commented 4 years ago

In my Bootstrap template have implemented years ago a similar functionality using data-page-id HTML5 Attribute on <body> tag. Using CSS (and jQuery) selectors it's possible to apply custom CSS styles or custom scripts for specific page or NS:

/** Apply CSS for :playground:* namespace" */
[data-page-id^="playground:"] {
  background-color: yellow;
}

/** Apply CSS for :playground:my_page page */
[data-page-id="playground:my_page"] {
  background-color: red;
}
jQuery('[data-page-id^="playground:"]', function() {
  alert('This is a Playground! For more information about DokuWiki visit wiki:welcome page');
});

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

karamellpelle commented 4 years ago

Is data-page-id always available? Using the dokuwiki template and right clicking in Firefox and select View page source, I can't see any data-page-id.

phy25 commented 4 years ago

Sorry, pressing the wrong button on the phone.

@karamellpelle That is bootstrap3...

In my Bootstrap template

giterlizzi commented 4 years ago

Yes data-page-id is in Bootstrap template feature but you can use native JSINFO.id (or JSINFO.namespace) variable to apply custom CSS rule via JS or you can emulate data-page-id behavior with this piece of code in conf/userscript.js:

jQuery('body').attr('data-page-id', JSINFO.id);
karamellpelle commented 4 years ago

I am using/testing the nice and modern argon-alternative template. I guess the conf/userscript.js trick will work for any template.

schplurtz commented 4 years ago

I really like this JS trick. Thanks. I'm still going to try a PR and see what happens.

schplurtz commented 4 years ago

PR #3239 adds a few classes to pages.

giterlizzi commented 4 years ago

I am using/testing the nice and modern argon-alternative template. I guess the conf/userscript.js trick will work for any template.

Yes this trick work with every theme and browsers (https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors).

karamellpelle commented 4 years ago

@giterlizzi's trick should be put on https://www.dokuwiki.org/dokuwiki somewhere

phy25 commented 4 years ago

It's an open wiki so feel free to put it somewhere on it.

splitbrain commented 4 years ago

What I'd like to see here is a discussion what this would actually be used for. Eg. I'd like to have real world examples on how users would use this feature. What exactly are you doing that you need to address individual pages or namespaces with CSS?

I have the feeling that this is one of the tings that bloat the the feature set and the HTML for something that 99.9999999% of users will never use. And those who use it will use it for one single exception and don't need a whole bunch of classes on each and every page.

karamellpelle commented 4 years ago

Here is an example.

The conf/userscript.js trick works well; nothing more needs to be done.

schplurtz commented 4 years ago

What I'd like to see here is a discussion what this would actually be used for. Eg. I'd like to have real world examples on how users would use this feature. What exactly are you doing that you need to address individual pages or namespaces with CSS?

My use : all pages of one particular namespace have a special background

AFAIR I've been for the last 10 years, constantly modifying the template main.php to add this code.

<?php if(!strncmp($ID,'archives:',9)) echo ' archives'?>

pelel on DW forum needs the same feature : a given ns with a particular background. See his post

I have the feeling that this is one of the tings that bloat the the feature set and the HTML for something that 99.9999999% of users will never use. And those who use it will use it for one single exception and don't need a whole bunch of classes on each and every page.

You're probably missing a 9 or two. While I was at it, I thought it could be fun to target pages with given name. the rest appeared almost by itself while I tried to implement something.

Although it can be easily done in JS, I'd still prefer that at least the current full ns should be added.

mprins commented 4 years ago

Some browsers will let you use @document (CSS) see https://developer.mozilla.org/en-US/docs/Web/CSS/@document