Giving the Wiki a more attractive look
Nicolas Vervelle
what about trying to give the Wiki a more attractive and consistent look
in all the pages ?
We could probably start doing this by:
- creating some templates
- using the templates wherever we can
- taking some time to make the templates attractive
I have created a few templates:
- TOCRight: to put the table of contents on the right of the page with
the text at the same level
- Directory: to be used for directory paths. Needs to be made more
attractive (maybe a folder icon after the directory name)
- File: to be used for filenames. Needs also to be made more attractive
(maybe a file icon)
- Command.
- CommandArgument.
I have tested on the Folding At Work page.
http://fahwiki.net/index.php/FoldingAtWork
What do you think ?
Nico
Bas Couwenberg
editting/style policy before such conventions are used troughout the
Wiki. Otherwise there is no clear list of what to use when.
One note about your Templates, why are the file names and parameters
in bold but a directory is not. It look a bit confusion/not
consistent.
Bas
--
Disclaimer: Any errors in spelling, tact, or fact are transmission errors.
Clodoaldo Pinto
>
> what about trying to give the Wiki a more attractive and consistent look
> in all the pages ?
Nice
> I have created a few templates:
> - TOCRight: to put the table of contents on the right of the page with
> the text at the same level
To avoid the problem pointed by Bas I tried to implement it in the
wiki css, but it did not work well.
What I did was adding "float:right" to /skins/fahwiki/main.css:
#toc {
border:1px solid #aaaaaa;
background-color:#f9f9f9;
padding:5px;
font-size: 95%;
float: right;
}
It is different from adding the template in the page. With the
template the html is:
<div style="float:right"><table border="0" id="toc">
You see the template creates a div to wrap the table with float:right
while the css hack applies the float to the own table.
If you know enough css to solve this (My css is basic) it would be the
best solution since all pages would get the right floated toc.
>
> I have tested on the Folding At Work page.
> http://fahwiki.net/index.php/FoldingAtWork
Looks good
Clodoaldo
Nicolas Vervelle
Bas Couwenberg wrote:
>
> I don't think it's a bad idea. Although I do think there should be an
> editting/style policy before such conventions are used troughout the
> Wiki. Otherwise there is no clear list of what to use when.
Well, templates are here to help: the formatting is done in the template
not in each page.
That enables to change the pages before deciding how each element should
look.
(for example, if you want to include a filename xxxx in a page, just add
{{File|xxxx}}, it will use the style in Template:File which can be
changed after)
But, yes, a policy would be great.
>
> One note about your Templates, why are the file names and parameters
> in bold but a directory is not. It look a bit confusion/not
> consistent.
Yes, probably.
I did it very quickly using the styles I had used in the FoldingAtWork
page, but they can be changed.
>
> Bas
>
Nicolas Vervelle
Clodoaldo Pinto wrote:
I have created a few templates:
- TOCRight: to put the table of contents on the right of the page with
the text at the same level
To avoid the problem pointed by Bas I tried to implement it in the
wiki css, but it did not work well.
What I did was adding "float:right" to /skins/fahwiki/main.css:
#toc {
border:1px solid #aaaaaa;
background-color:#f9f9f9;
padding:5px;
font-size: 95%;
float: right;
}
It is different from adding the template in the page. With the
template the html is:
<div style="float:right"><table border="0" id="toc">
You see the template creates a div to wrap the table with float:right
while the css hack applies the float to the own table.
If you know enough css to solve this (My css is basic) it would be the
best solution since all pages would get the right floated toc.
div.floatright, table.floatright {
clear: right;
float: right;
position: relative;
margin: 0 0 0.5em 0.5em;
border: 0
/*
border: 0.5em solid White;
border-width: 0.5em 0 0.8em 1.4em;
*/
}
And also, something I found on w3schools.com. I am not sure I understand it correctly, but it seems the order has importance (?):
"Note: Background and borders of a block element should go behind the float, but the content of the block element should go in front of the float. "
Nicolas Vervelle
Nicolas Vervelle wrote:
>
> I have created a few templates:
> - TOCRight: to put the table of contents on the right of the page with
> the text at the same level
> - Directory: to be used for directory paths. Needs to be made more
> attractive (maybe a folder icon after the directory name)
> - File: to be used for filenames. Needs also to be made more
> attractive (maybe a file icon)
I have just added an icon to the File template. I think it helps
visually enhance pages.
See:
http://fahwiki.net/index.php/FAH_files
http://fahwiki.net/index.php/FoldingAtWork
Someone has a directory icon that would go with the file icon ?
Nico
Bas Couwenberg
> > One note about your Templates, why are the file names and parameters
> > in bold but a directory is not. It look a bit confusion/not
> > consistent.
>
> Yes, probably.
> I did it very quickly using the styles I had used in the FoldingAtWork
> page, but they can be changed.
I saw you applied the File template to the FAH files pages, and I
can't say it's makes it more clear.
Using a monospace font for the filenames is good, I like that. But I
also liked the bold font weight, it made the visual distinction
between filename and description more clear.
Also when using filenames in a block of text it is usually a "special
word", meaning that it carries more weight. Because it is a variable
which can/needs to be interpreted differently depending on the
circumstances, or because it is the subject of the matter e.g. the
path to the an installation directory. At least that's my
interpretation.
Maybe we should restructure the filename list to make more friendly
for the eyes to parse? Because in general I like the filename template
as the font gives a commandline feel to the string :-)
I just miss the extra emphasis.
Nicolas Vervelle
Bas Couwenberg wrote:
> Maybe we should restructure the filename list to make more friendly
> for the eyes to parse? Because in general I like the filename template
> as the font gives a commandline feel to the string :-)
> I just miss the extra emphasis.
what about the new version with the file icon ? ;)
Nico
>
> Bas
>
Nicolas Vervelle
Second answer.
I agree with you, there's probably a need for 2 representations for some
things depending on the context.
For the moment, I am mostly playing with templates on a few pages to see
what the results are.
I am glad to hear suggestions on how to make it better :)
Nico
Bas Couwenberg
altough a title attribute on the image would make that even more so.
But it's still not a visually distinct as it was in bold. Which is
fixed in the bold version :-)
Am I the only one who thinks like this?
Bas Couwenberg
To convert the Folding-community: links, I wrote a little Perl 1-liner
to convert the current absolute links to use the fcf templates. Just
place the current Links section in a file and pipe it into the
1-liner.
The code:
cat links.txt | perl -e 'while(<>){
if(/\[http\:\/\/forum\.folding-community\.org\/viewtopic.php\?t=(\d+)
Folding\-community\: (.*?)\]/i){ print "* {{fcf_t|$1|$2}}\n";
}elsif(/\[http\:\/\/forum\.folding\-community\.org\/viewtopic\.php\?p=(\d+)\#\d+
Folding-community: (.*?)\]/){ print "* {{fcf_p|$1|$2}}\n"; }else{
print $_; } }'
Bas
Bas Couwenberg
URL wiki markup
perl -e 'while(<>){
if(/^(.*?)\[http\:\/\/forum\.folding-community\.org\/viewtopic.php\?t=(\d+)
Folding\-community\:(.*?)\](.*)$/i){ print
"$1\{\{fcf_t|$2|$3\}\}$4\n";
}elsif(/^(.*?)\[http\:\/\/forum\.folding\-community\.org\/viewtopic\.php\?p=(\d+)\#\d+
Folding-community: (.*?)\](.*?)$/){ print "$1\{\{fcf_p|$2|$3\}\}$4\n";
}else{ print $_; } }'
Andrew Schofield
Andrew Schofield