Knowledge Base

Search

  • Video block
  • Video Tutorials

  • Watch our easy-to-follow video tutorials for quick tips on designing and managing your store.
  • View Video Tutorials

Managing CSS Assets

Magento Go uses a Content Delivery Network (CDN) to manage images that you upload to your store. Images and fonts that are used in content, as well as those referenced from the CSS can be uploaded directly from the CSS Editor or Text Editor. As a best practice, you should organize your CSS assets into folders by theme to keep them separate from other images in Media Storage.

CSS Images

The following image types can be uploaded to Media Storage:

  • .jpg (.jpeg)
  • .png
  • .gif

If you use a relative path when referencing CSS images, the link to the image is preserved if the location of the server changes.  The following examples show how to format a relative path to an image in Media Storage.

../css_editor_images/imageName
../css_editor_images/subdirName/imageName

The next examples show how to reference relative URLs in CSS styles. Make sure that all CSS references to your uploaded images follow these conventions.

.styleName {
background:url(../css_editor_images/imageName.gif) no-repeat;
}
.styleName {
background:url(../css_editor_images/subdirName/imageName.gif) no-repeat;
}

To create an image folder:

  1. From the CSS Editor, click the Images Assets Manage button.
  2. From Media Storage, click the Create Folder button.
  3. If prompted, click to allow scripted windows.
  4. In the popup window, enter the New Folder Name, using hyphens or underscores instead of spaces. Then click OK.
    The new folder appears in the CSS Editor Images section of the directory tree.
  5. image
    Creating a Folder for Images

To upload your image:

  1. From the CSS Editor, in the Custom CSS section, click the Image Assets Manage button.
  2. From Media Storage, do the following:
    1. In the directory tree on the left, navigate to the folder where you want to place the uploaded image.
    2. Click the Browse Files button, and select the image file to upload.  (Hold the Ctrl key down to select more than one file at a time.)
    3. Click the Upload Files button to upload the file(s) to the specified folder.

CSS Fonts

The @font-face CSS rule makes it possible to use a wide variety of fonts, beyond the few traditionally considered to be “Web safe” There is a growing selection of fonts in the public domain which are available for free download. Other fonts are available by license only, and must be purchased from the publisher. FontSquirrel has a large selection of free fonts that are available for commercial use.You can also use the site to convert fonts from one format to another, and to generate the @font-face CSS code needed for each font. All the Web font that you want to use should be uploaded to the CSS Editor Fonts section of Media Storage.

The @font-face rule is supported by all major browsers.  Firefox, Chrome, Safari and Opera support TrueType (.ttf) and OpenType (.otf) font file formats for use with the CSS @font-face rule. Internet Explorer supports the TrueType (.ttf) and Embedded OpenType (.eot) formats. Because some browsers support some font formats and not others, the font-face declaration typically includes a separate line for each font format that you have available.  Each user’s browser will grab the first compatible font that it finds in the list.

@font-face {
font-family: “myfontname”;src: url("../css_editor_fonts/MyUploadedFont.ttf") format(’truetype’);
src: url("../css_editor_fonts/MyUploadedFont.otf") format(’opentype’);
src: url("../css_editor_fonts/MyUploadedFont.eot") format(’embedded-opentype’);
}

To create a fonts folder:

  1. From the CSS Editor, click the Fonts Assets Manage button.
  2. From Media Storage, click the Create Folder button. If prompted, click to allow scripted windows.
  3. In the popup window, enter the New Folder Name using hyphens or underscores instead of spaces. Then, click OK.
    The new folder appears in the CSS Editor Fonts section of the directory tree.

To upload fonts:

  1. From the CSS Editor, in the Custom CSS section, click the Fonts Assets Manage button.
  2. From Media Storage, do the following:
    1. In the directory tree on the left, navigate to the folder where you want to place the uploaded font.
    2. Click the Browse Files button and select the font file to upload.  (Hold the Ctrl key down to select more than one file at a time.)
    3. Click the Upload Files button to upload the file(s) to the specified folder.