This section describes how to install the plugin and get it working.
e.g.
- Upload
wp-webticker to the /wp-content/plugins/ directory
- Activate the plugin through the ‘Plugins’ menu in WordPress
- Add ticker styling in your CSS
- Place
<?php do_shortcode('[webticker]'); ?> in your templates or [webticker] in your posts/pages
CSS Styling
- you need to style your wp-webticker plugin in your style.css example
.tickeroverlay-left{
background-image:url(‘left.png’);
display:block;
pointer-events:none;
position:absolute;
z-index:30;
height:12px;
width:150px;
top:0;
left:-2px;
}
.tickeroverlay-right{
background-image:url(‘right.png’);
display:block;
pointer-events:none;
position:absolute;
z-index:30;
height:12px;
width:150px;
top:0;
right:-2px;
}
.tickercontainer { // the outer div
background: #7a7a7a;
width: 738px;
height: 27px;
margin: 0;
padding: 0;
overflow: hidden;
}
.tickercontainer .mask { // that serves as a mask. so you get a sort of padding both left and right
position: relative;
padding-left: 10px;
padding-right: 10px;
top: 8px;
height: 18px;
overflow: hidden;
}
ul.newsticker {
position: relative;
margin-left: 20px;
font: bold 10px Verdana;
list-style-type: none;
margin: 0;
padding: 0;
}
ul.newsticker li {
float: left; // important so they rotate properly
margin: 0;
padding-right: 15px;
}
ul.newsticker a {
white-space: nowrap;
padding: 0;
color: #ff0000;
font: bold 10px Verdana;
margin: 0 50px 0 0;
}
ul.newsticker span {
margin: 0 10px 0 0;
}
How to use
Add the following shortcode in your post/page)
[webticker num=”3″ category=”1,3″ id=”webticker”, direction=”1″, speed=”0.05″ ]
If used in a template please include the shortcode function
do_shortcode(‘[webticker num=”3″ category=”1,3″ id=”webticker”, direction=”1″, speed=”0.05″, link=”yes” ]’);