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?


Reply

14 Posts   3261 Views

Avatar
growin

3 March 2011 at 1:33pm Community Member, 41 Posts

I still can't get it going. Here's my worksheet using the default 'Blackcandy' theme. Theme is fresh from SS unzip (no edits/changes). Firefox & Chrome closed and cache reset each time. The font I'm working with is: http://www.google.com/webfonts/family?family=IM+Fell+English#description (IM Fell English) webfont. Am I using the wrong file for style selector changes? Any suggestions where I'm messing it up?

1. Make @font-face kit: http://www.fontsquirrel.com/fontface/generator (unzip)

2. Make folder: fonts & add fonts from @font-face kit

3. Edit: stylesheet.css to add address.
ie.

@font-face {

   font-family: 'IMFELLEnglishPRORegular';

   src: url('http://www.*****.com/themes/blackcandy/fonts/imfeenrm29c-webfont.eot');
   src: url('http://www.*****.com/themes/blackcandy/fonts/imfeenrm29c-webfont.eot?iefix') format('eot'),
      url('http://www.*****.com/themes/blackcandy/fonts/imfeenrm29c-webfont.woff') format('woff'),
      url('http://www.*****.com/themes/blackcandy/fonts/imfeenrm29c-webfont.ttf') format('truetype'),
      url('http://www.*****.com/themes/blackcandy/fonts/imfeenrm29c-webfont.svg#webfont0RamDHmw') format('svg');
   font-weight: normal;
   font-style: normal;

4. Upload: stylesheet.css to /themes/blackcandy/css/ folder

5. Upload: fonts folder to /themes/blackcandy/ folder

6. Open: /css/layout.ss
   Add: '@import url("stylesheet.css");' at top

ie.    /**
   * SilverStripe Black Candy Theme
   * http://www.silverstripe.com
   *
   * Main Layout File
   */
   
   /* Misc Styles and defaults
   -------------------------------------------- */

   '@import url("stylesheet.css");'

   * {
   margin: 0;
   padding: 0;
   }

7. Change (h2), as shown on "Home" on index.php, to 'IMFELLEnglishPRORegular'.
- ie. Open /themes/blackcandy/css/typography.css, edit

.typography h2 {
   color: #4EA3D7;
   margin: 0 0 18px 0;
   font-weight: 300;
   font-family: 'IMFELLEnglishPRORegular', Verdana, sans-serif;
}

Avatar
VanceK

4 March 2011 at 4:34am Community Member, 17 Posts

Hmmm, assuming a typo in your step 6 (layout.ss instead of layout.css) the only real difference I can see is that you're pointing to the fonts using a full URL and I had used a relative path ('../fonts') . Try changing that and see if it makes any difference.

Avatar
davidm2010

10 March 2011 at 8:39am Community Member, 107 Posts

The only down side I am seeing is, to get it to work with all formating (Bold, Underline, etc.) you have to style each member. Unless there is a way to make it more generic:

.typography h1,
.typography h2 {
   color: #4EA3D7;
   margin: 0 0 18px 0;
   font-weight: 300;
   font-family: SFCartoonistHandRegular, SFCartoonistHandItalic, SFCartoonistHandBold, SFCartoonistHandBoldItalic, SFCartoonistHandSCRegular, SFCartoonistHandSCItalic, SFCartoonistHandSCBold, SFCartoonistHandSCBoldItalic;
}

Didn't seem to work when I used "bold".

Avatar
roz

8 July 2011 at 6:16am Community Member, 7 Posts

Thanks for the help! I am trying to do this also. Just to clarify your second step, do you write the url:.../font/etc; in the style sheet as font-family class?
Thanks!

Avatar
Mrfixer

9 July 2011 at 11:09pm Community Member, 49 Posts

dunno if this helps in what your after, but if you dont mind calling a google file in your header then its certainly worth a look at http://www.google.com/webfonts for font relacement, i tried it just the once on a dev example for a client (i will be putting in production this week) and i didnt notice any rendering issues with the font families used, i´ve used sifr before and cufon and have noticed delays with the lay over effect being applied, using the google fonts i have not had this,

downside is that there aint a really wide choice of font just yet, but there should be a style close to what your looking for.

upside is that google web fonts is easy, and uses minimum code.

Avatar
roz

10 July 2011 at 2:05pm (Last edited: 10 July 2011 2:35pm), Community Member, 7 Posts

I have used google fonts before and loved them- but working in a CMS, I dont know how to insert the code in the header. Do you insert it in the page.ss file? Thanks. I inserted the code they instructed me to into the header, but it came up with errors.