In this document I am simply going to list the different elements that are available to you for styling via CSS.  You can use the modules 'Module Class Suffix' parameter to specify a suffix for each instance of the module allowing you to style each scroller differently.  If you are not familiar with CSS I recommend that you spend some time learning the ins and outs of CSS before attempting to modify your template's CSS file.

* Note that any time I use the _SFX verbiage I am reffering to the entry you made into the 'Module Class Suffix' parameter in the module's option.

If you enter into the 'Module Class Suffix' parameter: _scroller1
When I say: .moescroll_containerdiv_SFX
You would enter: .moescroll_containerdiv_scroller1

If you are not using a 'Module Class Suffix' then you would simply remove SFX from the end of each element.  .moescroll_containerdiv_SFX would become .moescroll_containerdiv

Makes sense?  Hope so!  Here are your elements available for you to work with:

• .moescroll_containerdiv_SFX - This is the main div that houses the entire scroller.  Use this to set styles like border, margin, position, padding, background colors ...
• .moescroll_wrapperdiv_SFX - This div houses the slides (articles) of the scroller.  This is an element you will not want to change the CSS of. There are important settings for this element that need to be in place for the scroller to operate.
• .moescroll_ul_SFX - The unordered list used to hold the individual slides.  It is a standard unordered list... things to not mess with are: position, top, left & overflow.
• li.mditem_SFX - The individual items themselves... things to not mess with here are: float, display, overflow. These are standard LI elements and can be manipulated but normally do not need to be changed. If you are having problems with the Bullet showing up for the margins / padding not rendering correcly then you most likely need to change those items using CSS.
• .moescroll_title_SFX - This is a div element that houses the title of the article.  Note: this option is only available when the module setting 'Show Title' is set to 'Yes'.
• .moescroll_intro_SFX - This is a div element that houses the intro of the article.  Note: this option is only available when the module setting 'Show Intro' is set to 'Yes'.
• .moescroll_body_SFX - This is a div element that houses the body of the article.  Note: this option is only available when the module setting 'Show Body' is set to 'Yes'.
• .moescroll_readmore - This is an anchor (A tag) element that houses the read more text.

 

Remember, add / modify your CSS styles one change at a time!  It is no fun to make 10 changes and have something not turn out right.  Then you have to go back through all ten to figure out which change caused your problems.

Here is an example of some settings you could use to alter the look and feel of MoeScroll:

Makre sure you replace '_SFX' with the module suffix that you set in the module parameters of MoeScroll Advanced.  If you have no 'Module Class Suffix' set, simply remove _SFX altogether.

/***** Change the background color of the scroller and add a border *****/

.moescroll_containerdiv_SFX {
    background-color: black;
    border: 1px solid white;
}

/***** Set the Font of the individual slides / articles and center the text *****/

.moescroll_intro_SFX,
.moescroll_body_SFX {
    font: 13px Arial Bold;
    text-align: center;
}

/***** Make the title bold, 16px and blue *****/

.moescroll_title_SFX {
    font-size: 16px;
    font-weight: 700;
    color: blue;
}