Knowledgebase
Skinning Your DMXReady App and Website With CSS
Posted by Graham Strong on 15 October 2008 02:49 PM

The Basic

All DMXReady applications come with a built-in CSS file that you can easily change to quickly match the look and feel of your website. It is as easy as changing things like the fonts, background colors, borders, and other attributes to the values already present in your website.

Here is one easy way to do it:

  1. If you have just purchased your DMXReady application, download and extract it to your Local Site on your hard drive. Otherwise, move to Step 2.
  2. Open your current CSS and locate the tags that control your fonts, background colors, etc.
  3. Open the DMXReady CSS files, and add these attributes under the appropriate tags. You can do this by cutting and pasting directly under each tag.
  4. Save and upload both CSS files and the new application to the server.
  5. Note: if you do not have tags for certain things like table borders, you will have to add your own values. The best way to do this is to match the hex color of the border to one of your key website colors. For example, if you have a dark blue header, make the borders of your DMXReady application dark blue as well to match.

Every website is different, and even DMXReady applications have slight differences in the way they use CSS. Play with the values until you find the combination that works best for you!

The Advanced

Another approach is to create a complete CSS website. There are many free CSS website templates out there that are fully customizable. Rather than build from the ground up, you can save time and money by modifying an existing CSS template to meet your own standards. In essence, what you are doing is skinning your application for a whole new web design.

Here's how to do it:

  1. Download and Extract your template and DMXReady application files to your local site folder.
  2. Create a copy of the main template file* (index.html) and rename (index.asp).
  3. Open the index.asp file and replace the placeholder html with the appropriate include files for your application. You can generate your include file code using the DMXReady Plug-In Wizard (http://www.dmxready.com/help/developer_guide/wizard.asp).
  4. Insert the HTML from your DMXReady application and/or website pages into the appropriate DIV containers in your new CSS Template.**
  5. Adjust CSS attributes (i.e. font size and color, background color and images, column sizes, etc.) to match your personal preferences.
  6. Upload all files and you are ready to go!

This process may be challenging but the results are well worth it. It doesn't take much of a leap to figure out that you can do this with all your DMXReady applications  or your complete website for that matter.

Why CSS?

CSS allows you greater control over the look and feel of your website than tables and standard HTML. With CSS, you can:

  • Improve your SEO activities
  • Create a cleaner code that is easier to change later
  • Create your own templates for faster website design and development
  • Makes it easier to re-skin your website in the future
  • Change colors, backgrounds, fonts, and images site-wide by adjusting CSS attributes

Best of all, when you keep to CSS standards, your website will be viewed properly in a greater number of web browsers, now and in the future. You can validate your own code for free at:
http://jigsaw.w3.org/css-validator/

Recommended CSS Template Sites:

http://www.freecsstemplates.org/
http://www.oswd.org/


NOTES:

*Your main template file could be your home page, if you are redesigning your whole site using a CSS template or using your DMXReady app as a stand-alone application, or just the page in which you are plugging in DMXReady application.

**For example, the code in your navigation bar may look like this:

<td width="550" height="80" valign="top" class="nav" align="right"><a href="http://www.yourdomain.com/index.html" class="nav">Home</a>
/ <a href="http://www.yourdomain.com/about.html" class="nav">About</a>
/ <a href="http://www.yourdomain.com/testimonials.html" class="nav">Testimonials</a>
/ <a href="http://www.yourdomain.com/portfolio.html" class="nav">Portfolio</a>
/ <a href="http://www.yourdomain.com/contact.asp" class="nav">Contact</a>
/ <a href="http://www.yourdomain.com/blog/index.php" class="nav">Blog</a>

Simply cut and paste the links only (not the table attributes) into the CSS template. You will also want to change the class tag (if you have them in your current HTML site) to the class tag that comes with the CSS template. Your navigation bar may now look something like this:

<DIV id=”topnav>
<a href="http://www.yourdomain.com/index.html" class="nav">Home</a>
/ <a href="http://www.yourdomain.com/about.html" class="nav">About</a>
/ <a href="http://www.yourdomain.com/testimonials.html" class="nav">Testimonials</a>
/ <a href="http://www.yourdomain.com/portfolio.html" class="nav">Portfolio</a>
/ <a href="http://www.yourdomain.com/contact.asp" class="nav">Contact</a>
/ <a href="http://www.yourdomain.com/blog/index.php" class="nav">Blog</a>
</div>

Repeat this step for every section of your web page. For more information on CSS design, search for designing using CSS or visit:
http://www.csszengarden.com/

(419 vote(s))
This article was helpful
This article was not helpful

Comments (0)
Help Desk Software by Kayako dmxready.helpserve.com