Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

General Questions /

General questions about getting started with SilverStripe that don't fit in any of the categories above.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Facelift image replacement in SS?


Go to End
Reply


14 Posts   3350 Views

Avatar
VanceK

Community Member, 17 Posts

20 February 2011 at 9:34am

I've used the the Facelift Image Replacement [http://facelift.mawhorter.net/] code in non-SS projects before and would like to impliment it in a SS site. So far I've been unable to get it to work properly. Has anyone tried this or something similar? I've tried the siFR module but never got that one working right either.

Thanks for any help.

Avatar
VanceK

Community Member, 17 Posts

21 February 2011 at 12:27am

Just an update.

I stumbled upon the Font Squirrel website [http://www.fontsquirrel.com/], downloaded some of their "@font-face kits" and gave them a try. They seems to work fine in the browsers I've tested in, with far less hassle, so I think I may go this route, rather than using image replacement.

Still, if anyone has any experience with image replacement in SS I'd be interested in hearing about it!

Thanks!

Avatar
stallain

Community Member, 61 Posts

23 February 2011 at 9:40pm

Another font replacement technique you could use is cufon : you just add a few js tags and it works well with SS.

Avatar
VanceK

Community Member, 17 Posts

24 February 2011 at 2:38am

Thank you, stallain! I'll check it out!

Avatar
VanceK

Community Member, 17 Posts

24 February 2011 at 4:48am

After a bit of playing around I got cufon working. The results are very satisfactory. Thanks again stallain!

Avatar
growin

Community Member, 41 Posts

2 March 2011 at 12:42pm

I've been trying to get font-face working on default SS blackcandy for the past few days without success. I must be missing something. Any simple instructions to help me along?

Avatar
VanceK

Community Member, 17 Posts

3 March 2011 at 12:08am

Here's what I did:

First I downloaded a font-face kit from Font Squirrel [http://www.fontsquirrel.com/fontface]. I unzipped it and put the stylesheet.css file in my themes css directory [themes/myTheme/css] and the font files into a directory I created in my theme path [themes/myTheme/fonts].

I then edited the stylesheet.css file and inserted the relative path to the font directory into all the url properties [url('../fonts/fontname_-webfont.eot'); etc.]. I also made note of the font name used in the font-family property.

Then, within my layout.css stylesheet [themes/myTheme/css/layout.css] I inserted '@import url("stylesheet.css");' at the top.

After that all I needed to do was add the 'font-family' property using the font name from stylesheet.css to whatever style selectors I wanted to change.

Avatar
growin

Community Member, 41 Posts

3 March 2011 at 12:45am

Thanks VanceK!

I think I used <% require themedCSS(stylesheet) %> on page.ss instead of '@import url("stylesheet.css");' on layout.css thinking it would work. I appreciate the description as I spent about 3 solid days trying to figure this out, but learned along the way. Hopefully this works. :-)

Go to Top