Tag: code

Have you ever wanted to add some colorful elements to your web page text? Sure, you can just change the text color but what if you want to take it up a notch and really make your text stand out? Panels and borders can be used to draw attention to special or important content. Simply add the class panel or border to your element, or to a div wrapped around many elements. Customize by also adding a brand color.

HTML with Orange Outline

<p class="border orange"><!--Your content goes here--></p>
<p class="panel orange"><!--Your content goes here--></p>

HTML with Sky Blue Panel

<h4 class="panel sky">Header</h4>

HTML with Regalia Header

<div class="panel regalia">
    <h4 class="last">Header</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

For examples and more information, see Web Style Guide/Panels and Borders.

You need to create an ordered or unordered list and you are tired of seeing the same old list characters like the ones below.

• line one
• line two
• line three

1. line one
2. line two
3. line three

How can you customize your lists?

Apply list styles like these:

by doing this:

<ul class=”circle”>
<li>circle</li>
</ul>

<ul class=”square”>
<li>square</li>
</ul>

<ol class=”lower-alpha”>
<li>lower alpha character</li>
</ol>

<ol class=”upper-alpha”>
<li>upper alpha character</li>
</ol>

<ol class=”decimal-leading-zero”>
<li>decimal leading zero</li>
</ol>

<ol class=”lower-roman”>
<li>lower roman numeral</li>
</ol>

<ol class=”upper-roman”>
<li>upper roman numeral</li>
</ol>

This is how to add rotating images to the feature area on your home page.

Create a new text file and copy the content in red below into it. Save the file as rotateImageOnRefresh.js and upload it to Cascade. Place it in the same folder as your index page.

<!-- SET THE MAX FEATURE COUNT (Total -1) -->

var maxFeatureNo = 4  <!-- 5 total - 1 = 4 -->

var featureNo
var myFeature = new Array()

<!-- CHANGE img src= to the file path of your image --!>

<!-- MAKE SURE YOU HAVE ONE FOR EACH FEATURE IMAGE -->

myFeature[0] = '<img src="images/features/01.jpg" width="688" alt="Put your ALT tag here" border="0">'

myFeature[1] = '<img src="images/features/02.jpg" width="688" alt="Put your ALT tag here" border="0">'

myFeature[2] = '<img src="images/features/03.jpg" width="688" alt="Put your ALT tag here" border="0">'

myFeature[3] = '<img src="images/features/04.jpg" width="688" alt="Put your ALT tag here" border="0">'

myFeature[4] = '<img src="images/features/05.jpg" width="688" alt="Put your ALT tag here" border="0">'
<!-- DONT TOUCH --> featureNo = Math.round(Math.random() * maxFeatureNo) document.write(myFeature[featureNo]) 
<!-- IF NOTHING DISPLAYS ON THE PAGE THEN SOMETHING IS WRONG -->
Edit your index page. Copy the following content in red where you want your images to be displayed.
<script src="pathToFile/rotateImageOnRefresh.js"></script>
Submit your index page. Publish the rotateImageOnRefresh.js file, your index page and all the images that will rotate when the page is refreshed.
											

Say you want the following code in the content area of your page:

id = 300;

echo $app-id;

for($i=1; $i<=10; $i++){
echo "$i
";
}
?>

However, after you submit, the WYSIWYG converts the code to this:

<?php
echo "this is just a test";

$app->id = 300;

echo $app-id;

?>


To prevent this, we will add // at end.

<?php
// id = 300;

echo $app-id;

for($i=1; $i<=10; $i++){
echo "$i
";
}
// -->
?>


This is very similar to the old way of tags, but the current version of the wysiwyg editor doesnt always support it correctly.