Follow

How do I apply Advanced CSS Styles to media and buttons in Claro?

You can apply advanced CSS styles such as borders, outlines, rounded corners, and drop shadows to media and some other elements in Claro (such as an image, audio clip, video clip, Flash, embedded video, embedded webpage, recorded activity, hotspot, and buttons).

For example, the Art Appreciation sample course uses the following code in the Advanced Styles:

border:5px ridge steelblue;
overflow:hidden;

If you wanted to change the color of a button to Black you could add the following code in the Advanced Styles:

Background-color: #000000;

If you wanted to change the color of text to orange you could add the following code in the Advanced Styles:

color:orange;

If you wanted to right align the text, change the font family, make it underline, add a shadow, make it italic, and add a little padding to the right you could add the following code in the Advanced Styles:

text-align:right;
font-family:"Comic Sans MS";
text-decoration:underline;
text-shadow:2px 2px #FF0000;
font-style:italic;
padding-right:10px;

 

To apply Advanced CSS Styles:

  1. Double-click an element to open Properties (or select the element and click the Edit button on the Home toolbar).
  2. Click the downward arrow beside Advanced Styles.
  3. Type your code in the Custom CSS box in the correct format.
  4. Click the Update button.

See the w3schools website for more information on CSS codes.

To view this article with example screenshots of pages in Claro, see Advanced CSS Styles.

 
Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments