Thank you Federico and Jeremy.
Jeremy, your answer have definitively helped me to create my svg buttons
and use them as part of my CSS stylesheets.
Federico, thanks to your awesome CSS rules now my links looks awesome. I
prefer to use SVG images contained within TW. It works like a charm.
Thank you all.
El sábado, 7 de junio de 2014 14:14:14 UTC+2, Frederico Jeronimo escribió:
>
> Hi guys,
>
> One final note from me if you want an alternative to a custom macro and
> don't mind compromising a bit on the tiddler titles by having a reserved
> sub-string such as a prefix or suffix to indicate the type of link.
>
> This allows you to completely bypass a custom template tiddler by simply
> using text formatting CSS selectors such as $ ('end with'), * ('contains')
> or ^ ('starts with').
>
> Please note that in CSS, identifiers (including element names, classes,
> and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO
> 10646 characters U+00A1 and higher, plus the hyphen (-) and the underscore
> (_). This means that any other characters such as spaces (%20) or accented
> characters (e.g. é = %233) will need to be escaped.
>
> For example, in your CSS:
>
> /* For tiddlers with names containing "Note -" as part of their title. */
> a[href*='Note%20-']
> {
> background: url("./images/category_note.png") center left no-repeat;
> padding-left: 20px;
> }
>
> /* For tiddlers with names containing "Article -" as part of their title.
> */
> a[href*='Article%20-']
> {
> background: url("./images/category_article.png") center left no-repeat
> ;
> padding-left: 20px;
> }
>
> /* For tiddlers with names containing "Idea -" as part of their title. */
> a[href*='Idea%20-']
> {
> background: url("./images/category_idea.png") center left no-repeat;
> padding-left: 20px;
> }
>
> Then you can create links using normal TiddlyText format (e.g. [[link]])
> and the correct icon will be picked up automatically according to the
> target tiddler's title.
>
> One added bonus of this approach is that default Tiddlywiki links such as
> those in the 'Recent' or 'Tools > All' lists will also display the icon
> automatically out of the box, as in the image below:
>
>
> <https://lh6.googleusercontent.com/-cBH_VFgjZBU/U5L_bK_r2KI/AAAAAAAAAEQ/LnMWLZ9qa4E/s1600/InternalIcons.png>
>
> <https://lh6.googleusercontent.com/-cBH_VFgjZBU/U5L_bK_r2KI/AAAAAAAAAEQ/LnMWLZ9qa4E/s1600/InternalIcons.png>
>
> Cheers,
>
> Frederico
>
> On Saturday, May 31, 2014 12:49:07 PM UTC+1, Frederico Jeronimo wrote:
>
>> Hi Danielo,
>>
>> I don't see why this wouldn't work with other svgs or any other image
>> format for that matter. As a quick related test, I tried with a normal
>> image instead (a gif) and detected no problems:
>>
>> *CSS*
>> span.archive> a
>> {
>> background: url("./images/Icon_Winzip.gif") center left no-repeat;
>> padding-left: 18px;
>> }
>>
>> would lead, for example, to a link pointing to a tiddler ('Zoology
>> Research - Mammals (2013)') with the field 'class' set to value 'archive'
>> as such:
>> {{Zoology research - Mammals (2013)||mylink}}
>>
>>
>> <https://lh5.googleusercontent.com/-ck_XaWuMXGs/U4m9XJav4eI/AAAAAAAAACY/uuDquaXK3ak/s1600/ZoologyResearch.png>
>>
>> As for the amount of work required, I think it really depends on the
>> number of individual icons you want for your tiddlers. For me, I only have
>> about 5 or 6 main categories of tiddlers, so I only need 5 or 6 classes in
>> total. To put it in context, I can have a class called 'note' with about 30
>> tiddlers and another called 'idea' applied in 40. All the notes have the
>> same hyperlink icon as well as all the ideas.
>>
>> Of course, if I wanted individual icons for each and every tiddler, I was
>> looking at specifying 70 classes in total, which might be quite a bit of
>> work...
>>
>> To make this easier to manage, I'm in the process of creating template
>> tiddlers that will populate the class field automatically (and define the
>> overall structure of the tiddler) when I generate new ones (e.g. if I want
>> a note tiddler, the class will be filled with 'note').
>>
>>
>> On Tuesday, May 27, 2014 10:59:05 PM UTC+1, Danielo Rodríguez wrote:
>>>
>>> Can this work with normal svg images? I like the font awesome icons but
>>> I'm worried about compatibility. So for each link you have to create a new
>>> tiddler with the title and a field called class? how do you manage this?
>>>
>>> Would you consider to post a public online example?
>>>
>>
--
You received this message because you are subscribed to the Google Groups
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/d/optout.
