Step 5: Design

As you can tell, the default design of the Multimedia Comments app is very minimal and may not fit the look of you site. If you want to edit the styles, we recommend creating a new CSS document and making your changes / additions in that file. Make sure you include this new CSS file after ours so they overwrite the defaults. Just use the same selectors as we use in our CSS files:

#fmCommentsWrapper ul.fmTabs li {
background: transparent url('/path/to/your/image.gif') left center repeat-x;
}

All the images the comments use are included in the package. The images are:

  • avatar.gif - the default avatar.
  • form.gif - used as the input, textarea and select element backgrounds. (will be tiled horizontally)
  • button.gif - used as the background for the input buttons, tabs and like button. (will be tiled horizontally)
  • button_hover.gif - the hover state of the buttons
  • loading.gif - used when loading dynamic content such as loading more comments, opening the report box or sending a request.
  • loading_hover.gif - the loading icon when used on a button with a hover state/li>
  • empty.png - the empty rating image
  • full.png - the full rating image
  • progress.gif - the animated image used to show the progress of the upload (will be tiled horizontally)

By default we also include four different comments styles. These styles all use the same HTML and all the differences are made in CSS. You can change the default style in when creating the settings object. If you want to modify any of the styles, we recommend creating a new stylesheet and including it after our fm.comments.css file. Simply overwrite any style in that stylesheet with your own. For example, if you want all the usernames to be blue:

.fmCommentsWrapper .fmUser .fmInfo .fmName { color: #006699 !important; }

0 comments

Be the first to comment on Step 5: Design.

Add a Comment

  • captcha