Recent Changes - Search:
Cookbook /

LocalCSS-Talk

Summary: Talk page for LocalCSS.
Maintainer: Petko
Users: +4 (View / Edit)

This space is for User-contributed commentary and notes. Please include your name and a date along with your comment.

Main documentation

Since this is part of the core, should this be moved to the main
PmWiki Documentation section instead of the CookBook?

--gnuzoo

Unfortunately I now believe adding this to the core was a mistake. First, it produces unsafe-inline styles that are not easy to make work with a safer Content-Security-Policy. Second, now CSS has wide browser support for CSS properties/variables, and for nested declarations. Third, the feature is much slower than static CSS. So one can do similarly flexible things as this function in native CSS, in a more secure manner, and faster processing. This makes the feature obsolete, but we should indeed document the native CSS equivalents. This was always an optional feature, should we remove it from the core we would provide an easy re-integration for wikis that need it. --Petko

Conditions?

Martin 2023-09-26 Would it be possible to have conditions with (:if...:) within LocalCSS? Example usage: I use PmWiki as a CMS and have an "admin bar" when I'm logged in. I don't think it's good that the associated code is publicly visible (in the source code). I could hide it with (:if auth admin:).

I suspect the admin bar is hidden when a visitor is not admin, but you also want any related CSS to not be printed? --Petko

Yes it is. But that's just an example. I have a fairly large project with many groups, including a lot of different CSS. I would like to maintain everything from LocalCSS. When I see the source code in the browser, it blows my mind. If I could add if conditions, I could sort this so that only the required CSS is read. - This isn't vital, but I thought it might be a good idea in general? Martin,

I'm not ready to complicate this function at the moment. I'd add the code in pub/css/local.css, Group.css or Group.Page.css. If there is no element to which the CSS applies, it will be simply ignored. If it is in a separate file, browsers will only download it once when browsing multiple pages.

Alternatively, you can have a separate css file like pub/css/admin.css that is loaded only when the visitor is admin. Add this to config.php: 

  $PostConfig['AdminCSS'] = 400;
  function AdminCSS($pagename) {
    # Only enable on certain pages, like LocalCSS (optional)
    $pattern = "SiteAdmin.*,Site.*,Main.Admin*";
    if(! (boolean)MatchPageNames($pagename, $pattern)) return;

    # admin conditional
    if(NoCache(CondAuth($pagename, 'admin'))) {
      global $HTMLHeaderFmt;
      $HTMLHeaderFmt['AdminCSS'] =
        '<link rel="stylesheet" href="$PubDirUrl/css/admin.css">';
    }
  }

Petko

Minor addition

~SteP 2015-11-23 I changed line 55 to 
@$HTMLStylesFmt['LocalCSS'] .= "\n".$css;

The additional newline character keeps the CSS rules of each @-block separated, so source code looks better. Nothing new functionally.

Very Useful Indeed

~SteP 2015-08-29 Brilliant, thanks Petko! This recipe is very useful, particularly with the added flexibility that @variables provide. There is no page variable expansion for @variables. However, it's easy to add predefined @variables, for example to use $SkinDirUrl in CSS rules add these lines to localcss.php before #get @variables: 

# prepend predefined @variables
global $SkinDirUrl;
$text = "@SkinDirUrl:$SkinDirUrl\n".$text;

Then use @SkinDirUrl in your CSS rules.

Or, you could probably write the value of the $SkinDirUrl in the LocalCSS page: 

  @SkinDirUrl:http://www.example.com/pub/skins/myskin
  @SkinDirUrl:/pub/skins/myskin

--Petko August 29, 2015, at 03:36 PM

I've released a new version allowing you to use a few variables like @SkinDirUrl, and to add more. --Petko August 29, 2015, at 05:57 PM

~SteP 2015-08-30 Thank you, Petko!

Talk page for the LocalCSS recipe (users).