How to add CSS to Skeeve's newtiddler button

[David Gifford]

Hi all

I am finally understanding the newtiddler widget Stephan (Skeeve) made, and have created a working set of buttons that act like the newhereplugin in TWC.

The only missing piece is the CSS. Below you will find the contents of my tiddler. How do I add a class to the three resulting buttons? I know what CSS I need to add to the StyleSheet. I just need to know where in this code below do I put the class, and what exactly to write. I tried 20 different possibilities to no avail.

-----

\define get_title(l)
$l$$(title)$]]
\end

<$set name="title" value={{!!title}}>
<$set name="tags" value=<<get_title "[[">>>
<$newtiddler title="your title here" skeleton="$:/aa/ScrollableNoteTemplate">{{ noteicon.png }}</$newtiddler>
</$set>
</$set>

<$set name="title" value={{!!title}}>
<$set name="tags" value=<<get_title "[[">>>
<$newtiddler title="your title here" skeleton="$:/aa/ScrollableIndexTemplate">{{ indexicon.png }}</$newtiddler>
</$set>
</$set>

<$set name="title" value={{!!title}}>
<$set name="tags" value=<<get_title "[[">>>
<$newtiddler title="your title here" skeleton="$:/aa/ScrollableGalleryTemplate">{{ notelisticon.png }}</$newtiddler>
</$set>
</$set>

[David Gifford]

One additional question:

If I wanted to add this tiddler to the ViewToolbar, how would that change the way I added the CSS?

[Matabele]

Hi

Not exactly what you were looking for, but have you considered using font awesome icons for your buttons? 

In place of the .png image are placed the desired fontawesome class: <i class="fa fa-suitable-icon  various css styles"></i> There are a selection of styles which may be applied to the basic icon.

regards

[Birthe C]

Hi Matabele
I agree, font awesome icons look good. I have often wondered though, why they are not showing at http://wills.tiddlyspot.com/. At first I just saw some very strange hieroglyphs, but now it is all numbers???
I know I should be able to see your icons in my browser, as I use font awesome myself.

Birthe

[David Gifford]

Yeah, I don't see them there either on your site.

--
You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/7-_RBjoZh04/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/d/optout.

--
David Gifford
Christian Reformed World Missions, Mexico City

[Birthe C]

Hi David Gifford

I got the stylesheet I use from http://blog.jeffreykishner.com/2014/01/23/how-to-incorporate-font-awesome-icons-into-tiddlywiki-5.html . I used the link http://pastebin.com/BaKyuCuv copied and pasted the content.

Birthe

On Friday, April 25, 2014 12:28:22 PM UTC+2, David Gifford wrote:

Yeah, I don't see them there either on your site

[David Gifford]

Hi yes I just  consulted his site and tried it. Mine come out like the ones in the website link, a square with four odd characters in it. Something is wrong. Maybe Font Awesome updated and made an incompatible change? I need something more stable and less dependent on other software.

--

You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/7-_RBjoZh04/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/d/optout.

--

[Birthe C]

I am not sure I understood. I am not able to try it our as I do not have your templates og icons, but as an example try:

\define get_title(l)
$l$$(title)$]]
\end


<$set name="title" value={{!!title}}>
<$set name="tags" value=<<get_title "[[">>>

<$newtiddler class="btn-invisible" title="your title here" skeleton="$:/aa/ScrollableNoteTemplate" edit="yes">{{ noteicon.png}}</$newtiddler>
</$set>
</$set>

Birthe

[Matabele]

Hi

The standard way of including Font Awesome on a website is to link the stylesheet to a font server:

http://fortawesome.github.io/Font-Awesome/get-started/

Alternatively, the fonts can be served up locally (for example on a node.js installation) -- the links at the top of the stylesheet must be edited accordingly.

I, however, wished the fonts to work standalone and offline -- I downloaded the fonts and installed them into my system as a font set. Thereafter the fonts work provided the relevant css styles (you need retain only those styles you have used) are included in a stylesheet:

http://fortawesome.github.io/Font-Awesome/assets/font-awesome-4.0.3.zip

Don't know if this suits your purpose. If you are looking for a solution that does not involve installing fontawesome, static copies of the icons can be extracted from the font set once prototyping is complete. 

regards

[David Gifford]

​Thanks Matabele. I actually just discovered the problem I was  having before. I was using pngs instead of svgs, and they behave quite differently. I just downloaded a few free svgs from Flaticon and have added them to tiddlers and am going to use those.

--
You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/7-_RBjoZh04/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/d/optout.

[Matabele]

Hi

The fontawesome icons are available from flaticon:

http://www.flaticon.com/packs/font-awesome/

regards