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   3435 Views

Avatar
growin

Community Member, 41 Posts

3 March 2011 at 1:33pm

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

Community Member, 17 Posts

4 March 2011 at 4:34am

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

Community Member, 107 Posts

10 March 2011 at 8:39am

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

Community Member, 7 Posts

8 July 2011 at 6:16am

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

Community Member, 49 Posts

9 July 2011 at 11:09pm

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

Community Member, 7 Posts

10 July 2011 at 2:05pm

Edited: 10/07/2011 2:35pm

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.

Go to Top