Jump to:

22972 Posts in 11596 Topics by 2824 members

General Questions

SilverStripe Forums » General Questions » Facelift image replacement in SS?

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

Page: 1 2
Go to End
Author Topic: 3018 Views
  • growin
    Avatar
    Community Member
    41 Posts

    Re: Facelift image replacement in SS? Link to this post

    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;
    }

  • VanceK
    Avatar
    Community Member
    17 Posts

    Re: Facelift image replacement in SS? Link to this post

    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.

  • davidm2010
    Avatar
    Community Member
    107 Posts

    Re: Facelift image replacement in SS? Link to this post

    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".

  • roz
    Avatar
    Community Member
    7 Posts

    Re: Facelift image replacement in SS? Link to this post

    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!

  • Mrfixer
    Avatar
    Community Member
    49 Posts

    Re: Facelift image replacement in SS? Link to this post

    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.

  • roz
    Avatar
    Community Member
    7 Posts

    Re: Facelift image replacement in SS? Link to this post

    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.

    3018 Views
Page: 1 2
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.