We are in the process of migrating the Spacial Wiki content to our new Help Center at spacial.com.
Please visit the Help Center for latest Tips and Tricks, Documentation and Troubleshooting.
spacial.com/help-center

StreamAds: Change the CSS for text ads

From SpacialAudio

(Difference between revisions)
Jump to: navigation, search
(New page: == Overview == CSS (cascading style sheet) are used to deremine what you text ads will look like on you website or web player. When setup correctly CSS can change the text font type, font ...)
(→Creating A CSS File)
Line 6: Line 6:
==Creating A CSS File==
==Creating A CSS File==
#Create a new text file and rename it to “textads.css”
#Create a new text file and rename it to “textads.css”
-
#Copy the [[CSS Code]] below and paste it into the newly created file.
+
#Copy the CSS Code below and paste it into the newly created file.
#In the first section of the CSS Code (a.AdBox:link...) you set the default font size and font type.  
#In the first section of the CSS Code (a.AdBox:link...) you set the default font size and font type.  
#:At the moment the current default font size is 12px and the default font type is Geneva, let’s say you want to change the default font size to 15px and the default font type to Arial, you would change the code to:<source lang=css>font: 12px Arial;</source>
#:At the moment the current default font size is 12px and the default font type is Geneva, let’s say you want to change the default font size to 15px and the default font type to Arial, you would change the code to:<source lang=css>font: 12px Arial;</source>

Revision as of 15:56, 16 February 2009

Overview

CSS (cascading style sheet) are used to deremine what you text ads will look like on you website or web player. When setup correctly CSS can change the text font type, font size, color and much more. This is a step by step guide to help you change the look of the text ad to fit with your site

Creating A CSS File

  1. Create a new text file and rename it to “textads.css”
  2. Copy the CSS Code below and paste it into the newly created file.
  3. In the first section of the CSS Code (a.AdBox:link...) you set the default font size and font type.
    At the moment the current default font size is 12px and the default font type is Geneva, let’s say you want to change the default font size to 15px and the default font type to Arial, you would change the code to:
    font: 12px Arial;
  4. The header code is defined in AdBoxHeader.
    To change the look and feel of the header you can change the code between the two curly braces “{}”The default font color at the moment is #0000CC, let’s say you want to change the color to something more blue, then you would replace the #0000CC with the desired HEX color code i.e. 
    color: #4775C1
    or even to
    color: Blue
  5. By changing the different settings for the header, the header can be customized to fit in perfectly with your website.
    For a full list of CSS references and properties please view this page
  6. Now apply the desired changes to .AdBoxBody and .AdBoxFooter
  7. Save the CSS file and upload it place it in the same directory as your website or webplayer.
  8. Now you should change your website/webplayer to use the new CSS file
    open your website/webplayer page in your default editor, and between the <head></head> tags include the following link: 
    <link href="textads.css" rel="stylesheet" type="text/css" />
    Remember to change the href link to where ever you saved the CSS file
  9. Save the changes and upload the new website/webplayer file with the new CSS file

CSS Code

/* StreamAds box text advertisements */
 
a.AdBox:link, a.AdBox:visited, a.AdBox:active {
    font: 12px geneva, verdana, arial, sans-serif;
    text-decoration: none;
}
 
.AdBoxHeader {
	color: #0000CC;
	text-align: center;
	font-family: Arial,Verdana;
	font-size: 12pt;
	font-weight: bold;
 	text-decoration: underline;
}
 
.AdBoxBody {
	color: #6F6F6F;
	text-align: center;
	font-family: Arial;
	font-size: 10pt;
	text-decoration: none;
}
 
.AdBoxFooter {
	color: green;
	text-align: center;
	font-family: Helvetica;
	font-size: 9pt;
	text-decoration: none;
}
Retrieved from "http://support.spacialaudio.com/wiki/StreamAds:_Change_the_CSS_for_text_ads"
Personal tools