How to Add Marquee Coding to Your WP Pages

Step One: Create a New Page

stepone
Step Two: With your page open in the Visual viewer, ‘Add Media’ and add the images you are using in your marquee to your page. This includes your background image. Although you can do this part in the Text Viewer but if you have several graphics I find it easiest to do this part in the Visual Viewer so you can move them around.steptwo

Step Three: Set your graphics up the way you want them. If I use a background for my marquee I will set that on top to keep everything in order before switching to the Text Viewer.

stepthree

Step Four: Now switch to “Text Viewer” and add the html for a table and the marquee you can see the code below. You will also notice that the images are now in code form as well. The first image is the background we will be using for our marquee. You can see the size of the image and the source, both you will need for the marquee. Copy the image link found here: src=”” and paste it into the table background source, background: url(‘image’) 

stepfour

Step Five: Once you have transferred the image code into the table you can delete the image you are using as the background for your table.

stepfive

Step Six: Next let’s deal with some of the coding as it may need to be changed. The direction tag will what direction your ride will move in: right, left, up and down, if nothing is selected the default is left.

stepsix

Step Seven: The width and height should be the same as the table, which is the same size as your background image.

stepseven

Step Eight: The scroll delay tag is how long it will take your ride to move. Inger likes it to be slow 😉 but I prefer it a bit faster. You can play with this field until you find the speed you like. The higher the number the slower it will go. Default is 0

stepeight

Step Nine: Next just grab your ride images that you added to the page, cute and paste them between the <marquee></marquee> tags.

stepnine
stepten

And that’s it!

A couple tips though…

  1. Before adding your marquee you may want to add all other graphics to the page using the visual viewer if you are less comfortable with HTML.
  2. Once you have set up your marquee in text viewer you can not switch back to visual viewer, if you do this your marquee text will be gone.
  3. You may find that after you have published the page and then go back in to edit it the page is once again in visual viewer. In order to reset the default when you click edit you will need to open a different page that doesn’t have custom HTML, change it to text viewer and then hit save. You should then be able to edit pages with custom coding in them in the text viewer.

You can grab the marquee code I use below:

<center>
<table class=”aligncenter” style=”bgcolor: #58f9f6; background: url(‘backgroundimagegraphic‘); border: 0px 0px; width: 400px; height: 200px;”>
<tbody>
<tr>

<td style=”padding: 80px 0px; height:200;”>
<marquee direction=”right” width=”400″ vspace=”0″ valign=”bottom” height=”200″ scrolldelay=”150″><p>

Put your ride graphics here.

</p>
</marquee>
</td>
</tr>
</tbody>
</table>
</center>