WikiStyles-Talk



This is a talk page for improving WikiStyles.


%apply=item center% centers the whole list

* %apply=item text-align=center%  one
* two
* three
  • one
  • two
  • three

Am I right expecting this code to center only the first element of the list?
Finar June 24, 2021, at 10:01 AM

%center% is something specific like %rframe%, but you can use %item text-align=center% --Petko June 24, 2021, at 11:01 AM

Problem adding cyrillic attributes

I added this to config.php:

 SDVA($WikiStyleAttr,array( 'data-target' => 'a',));

now code like this works:
%apply=a data-target='modal start'% ...
but the same code does not:
%apply=a data-target='русский не хочет'% ...

Finar July 24, 2019, at 03:33 PM

It may be possible, but entirely unsupported, to set in config.php $WikiStylePattern = '%%|%[A-Za-z][-,=:#\\w\\s\'"().\\x80-\\xfe]*%';. --Petko July 24, 2019, at 07:26 PM

How add new attribute to <span>?

I want to add support for code like this:
%title='to read more about this'% hover mouse over here %%
the result HTML should be:

 <span title='to read more about this'> hover mouse over here</span>

Is it possible?

Finar July 24, 2019, at 03:33 PM

You can already have "title" attribute to links, tables and all block markups. It may be possible to add an inline WikiStyle, but not easy. The WikiStyles functions are very complex and it adding attributes is not on my roadmap. But it is very easy to add a custom inline markup like:

  Markup('inlinetitle', '<inline', '/\\{``(.*?)``(.*?)``\\}/', 'mu_title');
  function mu_title($m) {
    return Keep('<abbr title="'.PHSC($m[1]).'">').$m[2].'</abbr>'; # or <span...</span>
  }

Then, in the wiki page you can have the markup {``tooltip title``text``}. These ` are "backticks". This is an example markup, you can select a different one, just don't select something that can be mistaken with already existing markup. --Petko July 24, 2019, at 07:26 PM

Adding classes to links

I added this to config.php:
$WikiStyleApply['link'] = 'a';

then my wikicode is:
%apply=link btn%[[my link]]

and I expect to get html code like this:
<a class='wikilink btn' ...>

but actually I get:
<a class='wikilink' class='btn' ...>
Class attribute is doubled.

I'm not shure if it is problem or not, because of it is working nice in modern browsers, but FireFox marks this source code as red, meaning it is not correct.

What do you think?
Finar July 27, 2018, at 08:44 AM

Indeed, this is not perfect, but you could do it differently, just use %btn%[[link]]%% and in the CSS instead of styling a.btn{...} you style span.btn a.wikilink{...} to have the same result. (No $WikiStyleApply.) See PmWiki Philosophy "2. Don't try to replace HTML". --Petko July 27, 2018, at 09:05 AM

Thanks for reply, but in my case it is not possible: I use bootstrap framework, and I have lot's of btn-* classes witch I want to be attacheable to links. And I can't remake framework the way you suggest. Finar July 30, 2018, at 12:29 PM

You can set to config.php $LinkPageExistsFmt = "<a href='\$LinkUrl' title='\$LinkAlt'>\$LinkText</a>"; that will remove the default class='wikilink' from all internal links. --Petko July 31, 2018, at 08:15 AM

Greate! Thanks for solution! Finar

Is the any way to add new html attribute to <ol>?

I want to apply attribute 'reversed', is it possible in any way?
I want to get result html like this:

 <ol reversed>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol> 

Finar July 04, 2018, at 04:56 PM

Add this to config.php:

  $WikiStyle['reversed']['reversed'] = 'reversed';
  $WikiStyle['reversed']['apply'] = 'list';
  $WikiStyleAttr['reversed'] = 'ol';

Then in the wiki page, place %reversed% on the first line of the first item:

# %reversed% Coffee
# Tea
# Milk
  1. Coffee
  2. Tea
  3. Milk

I've added this for the next version. --Petko July 05, 2018, at 02:47 PM

Greate, thanks! Finar


"Styling anchor elements affects all elements on the same line (refer to Styling Anchor Elements)."

The above is not correct for the core. Test: no style: regular links?, green link, red: red link, white: white link on black background, again no style: regular links?. Removed from the documentation. --Petko March 31, 2016, at 03:22 AM


The following may be better moved to a Cookbook:

Styling Tables

Or, to apply an ID attribute to a table row TR, place in config.php:

$WikiStyleApply['row'] = 'tr';

Then, in an advanced table, you can have:

(:cellnr:) %apply=row id=myid bgcolor=pink% cell content

And also in a simple table:

|| border=1
|| %apply=row id=myrowid% 1 || 2 || 3 || 4 ||

Note, the %apply=row...% WikiStyle should be on the same line as (:cellnr:). Also note, you must have a space trailing the (:cellnr:).


An issue with a cookbook recipe that doesn't appear in the core may better be listed on the cookbook page:

Styling Anchor Tags

To apply styling to anchor tags, place in config.php:

$WikiStyleApply['link'] = 'a';

Then, you can apply a class or style to an anchor link:

%apply=link red%[[PmWiki.WikiStyles | test link]]

test link

NOTE: Examples below don't display correctly, as $WikiStyleApply is not active on this page.

Be aware that multiple links on the same line with different styles will inherit the style of the last link.

%apply=link red%[[PmWiki.WikiStyles | red link]]%% and then a %apply=link blue%[[PmWiki.WikiStyles | blue link]]%% -- but both links show as blue.

red link and then a blue link -- but both links show as blue.

In order to apply different styling to multiple elements on the same line you need to split the line with a single line-break.

%apply=link red%[[PmWiki.WikiStyles | red link]]%% separated with a newline
and then a %apply=link blue%[[PmWiki.WikiStyles | blue link]]%% -- now shows links correctly styled.

red link separated with a newline and then a blue link -- now shows links correctly styled.

If you're using $HTMLPNewline = '<br />', and you don't the output to be visually broken, disable newline breaks with (:nolinebreaks:):

(:nolinebreaks:)
%apply=link red%[[PmWiki.WikiStyles | red link]]%% separated with a newline
and then a %apply=link blue%[[PmWiki.WikiStyles | blue link]]%% -- now shows links correctly styled.
(:linebreaks:)

red link separated with a newline and then a blue link -- now shows links correctly styled.

With the core, simply use %red% and %blue% and styling it will work. --Petko March 31, 2016, at 03:33 AM


What exactly is the syntax for wiki styles?

Ie what can I put between % and % or >> and <<

how do I achieve the following
%lframe blue bgcolor=yellow text-shadow:"2px 2px #ff0000"% framed blue text with yellow background and text shadow

framed blue text with yellow background and text shadow

If I define the colours in config.php using #WikiStyle can I use them in the abve example?

Use $WikiStyleCSS[] = 'text-shadow'; to allow text-shadow, and enclose the definition in quotes. If I may, I'd advice against enabling and using this. A better way is to define a class in pub/css/local.css and to use it everywhere. If someday you decide to change your red shadow to green, you only do it at one place. See below. --Petko September 19, 2012, at 12:43 PM

%mystyle% framed blue text with yellow background and text shadow

framed blue text with yellow background and text shadow

Margin, padding, border and list-style has all sub-style (like margin-top). QUESTION TO ANSWER: Is there sub-style are recognized or not?

The styles margin, padding, border can have a suffix -left, -right, -top, -bottom in the default installation. See the section "Enabling styles" if you need to enable more styles.

Why use direct style= anywhere

Request and discussion moved to PITS:01173.

why is a color word not a class class, eg

(:div class="frame green" style="font-size:smaller":)
This text should be small, green, and surrounded by a frame
(:divend:)

This text should be small, green, and surrounded by a frame

In a (:div:) or a (:table:) (:cell:) etc., WikiStyles are not used, what you type are regular HTML attributes class and style. So, if you have a "div.green" defined in your local CSS, it should be applied. We do not have it defined on pmwiki.org, so the text shouldn't be green. :-) It can work this way:

(:div class="frame" style="font-size:smaller; color: green;":)
This text should be small, green, and surrounded by a frame
(:divend:)

This text should be small, green, and surrounded by a frame

why does this not work?

(:div class="blue rframe" style="font-size:smaller":)
This text should be small, blue, and surrounded by a right floated frame
(:divend:)

This text should be small, blue, and surrounded by a right floated frame

Because, confusingly, rframe is not a class.

(:div class="blue rfloat frame" style="font-size:smaller":)
This text should be small, blue, and surrounded by a right floated frame
(:divend:)

This text should be small, blue, and surrounded by a right floated frame

In a (:div:) or a (:table:) (:cell:) etc., WikiStyles are not used, what you type are regular HTML attributes class and style. If your local CSS files have defined the classes .blue and .rframe, your browser should apply them. On pmwiki.org these classes are not defined, so your browser shouldn't apply them.

"rframe" is a WikiStyle, not a CSS style or a CSS class. WikiStyles are implemented differently to be combined and applied differently.

Is a wiki style a class

No, it is a WikiStyle, not a CSS style or a CSS class. WikiStyles are implemented differently to be combined and applied differently.

%define=bclass bgcolor=#ddddff border="1px dotted green"%

(:table:)
(:cellnr bclass:) test one
(:cellnr class="bclass":) test two
(:cellnr:)%bclass% test three
(:cellnr:)
>>bclass<<
test four
>><<
(:cellnr:)
(:div class="bclass":)
test five
(:divend:)
(:tableend:)
test one
test two
test three

test four

test five

It would be helpful to provide more consistency.

%define=zclass block bgcolor=#ddddff border="1px dotted green"%

(:table:)
(:cellnr zclass:) test one
(:cellnr class="zclass":) test two
(:cellnr:)%zclass% test three
(:cellnr:)
>>zclass<<
test four
>><<
(:cellnr:)
(:div class="zclass":)
test five
(:divend:)
(:tableend:)
test one
test two
test three

test four

test five

What happened to test 3?

Why does neither of these apply styles to the contents of the DIV?

(:div class='lfloat' font-size='smaller' color='blue' bgcolor='#eee' clear='left' :)
{*$Name}
(:divend:)

(:div style="font-size:'smaller'; color:'blue'; background-color:'#eee'; float:left; clear:'left';" :)
{*$Name}
(:divend:)

WikiStyles-Talk

WikiStyles-Talk

The first example defines HTML attributes of which only "class" is understood by browsers -- if there is a css class "lfloat", it should be respected. The second example contains invalid CSS styles so your browser ignores them -- you should remove the apostrophes.

(:div class='frame lfloat':)
{*$Name}
(:divend:)

(:div style="font-size:smaller; color:blue; background-color:#eee; float:left; clear:left;" :)
{*$Name}
(:divend:)

WikiStyles-Talk

WikiStyles-Talk


... or these

%define=mytrail div font-size='smaller' background-color='#eee' float='right' clear='right' %
(:div:)
%mytrail%{*$Name}
(:divend:)

(:div mytrail:)
{*$Name}
(:divend:)

WikiStyles-Talk

WikiStyles-Talk

Remove apostrophes from style definition like this

(:div style="font-size: smaller ; color: blue ; background-color: #eeeeee ; " :)
{*$Name}
(:divend:)

WikiStyles-Talk

How do I specify background-color?

%bgcolor=green% green
%bgcolor=#faf0b4% #faf0b4
%bgcolor:brown% brown
%bgcolor:#b4e6b4% #b4e6b4
%background-color=pink% pink
%background-color:yellow% yellow
%style='background-color:blue;'% blue

%background=green% green
%background=#ffbebe% #ffbebe
%background:brown% brown
%background:#b4e6b4% #b4e6b4

(:table:)
(:cellnr style="background:#faf0b4;" :) Role 
(:cell style="background:#ffbebe;" :) Moment, Interval 
(:cell style="background:#b4c8d2;" :) Description  
(:cell style="background:#b4e6b4;" :) Party, place, thing 
(:tableend:)

green
#faf0b4
brown
#b4e6b4
pink
yellow
%style='background-color:blue;'% blue

green
#ffbebe
brown
#b4e6b4

Role Moment, Interval Description Party, place, thing

With a WikiStyle between %...% or >>...<< :

  • If you have a CSS class, eg. "bggreen" defined in local css, use %bggreen% or >>bggreen<< without quotes.
  • If you don't have a CSS class, use: %bgcolor=green% or >>bgcolor=green<< without quotes or semicolons.

In a HTML attribute class= or style= in (:div:), (:table:), (:head:), (:cell:) or ||-table, use

  • If you have a CSS class, eg. "bggreen" defined in local css, use (:div class=bggreen:).
  • If you don't have a CSS class, use (:div style="background-color:green;":) between quotes and with an ending semicolon.

How can a WikiStyle be used to set, say, the background colour of some cells of a simple table, eg

%define=bg block bgcolor=#ddddff%
||!example ||!%bg%table ||
||%bg%coloured ? ||not coloured ? ||
exampletable
coloured ?not coloured ?

It cannot, but a workaround is to have a special css span container with the property "display:block" which will spread horizontally to the borders of the cell:

%define=bgC display=block bgcolor=#ddddff%
||border=1
||!example ||!%bgC%table%% ||
||%bgC%coloured ? %%||not coloured ? ||
exampletable
coloured ? not coloured ?

http://coll-org-source.us/0-one/pmwiki.php?n=Category.Fonts
Here is a link to an example page that has a mouseover to copy font code; a fast way to style nearly four-hundred fonts. Also, it's obvious that many of the fonts do not correspond to their true type. How does one add fonts to the PmWiki database? Who can do that? I would be happy to lend a hand. Note: The page is long, and thus, takes a few seconds to open. Hang on.



This is a talk page for improving PmWiki.WikiStyles.