Recent Changes - Search:

PmWiki

pmwiki.org

WikiStyles-Talk


This is a talk page for improving WikiStyles.


"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.

Edit - History - Print - Recent Changes - Search
Page last modified on March 31, 2016, at 03:33 AM