Forums

Some CSS documentation and examples would go along way toward helping folks get the most from the rotator.

I have been poking around in the module.css to try to gain control of styling my content, including the article title.  I have not been able to accomplish my goals and the content has some odd behavior to it just from the default styles.

Here is a link to my development site to demonstrate what I am trying to accomplish. Very simple scoreboard with just some text for now.

The odd behavior is that the font itself seems to deteriorate in quality after an intial page refresh or a 2nd rotation.

Also, I want the title of the article to align left but I can't find a css setting in the module.css that will cause this to happen. I also want to be able to style the article title itself (color, size, etc.).

Finally, how do I style the font of the content itself? Why doesn't it take on the font style defined in my skin.css like the rest of the modules on the page?

Thanks,

Paul

We are working on some documentation and samples to help you out.

Thanks for the info.  The behavior only seems to occur when I turn on the animations feature.  Also, when I choose the animation feature, the text and image jumps to the right before settling back down and displaying the content.  Refere back to my link to see this behavior.  How can I coorect this or what css class should I be looking at to resolve this issue.

Thanks,

Paul

So far at the background image goes, it appears that you have the content set to be 200px wide, while your background image is 250px wide. I saw that you said something above about setting values to 275px, are you not seeing that you've set the width of the content to be 200px? That is what I see when I look at the markup in Firefox, and it seems to fix it if I change the style in-line to be 250px.

The jumping to the right has to do with the fade in/fade out animations.  I am using some JavaScript to position the elements on top of each other.  I would assume that the tab aggregator is causing issues with the measurements.  It may be possible to override this behavior using a CSS class and the !important tag to override the incorrect values that the JavaScript is using with, for example:
position: relative; top: -200px;

Let me know how that works for you.

<div class="rotatorWrapper">
    <div class="rotator">
        <!--Start Article Markup-->
            <div>
                <div class="rotatorContentWrapper" style='<%=ContentWrapperStyle %>'>
                    <div class="rotatorContent">
                        <span class="rotatorContentHeader">...</span>
                        <span class="rotatorContentHeaderLinkWrapper"><a class="rotatorContentHeaderLink" href="...">...</a></span>
                        <br />
                        <div class="rotatorThumbnailWrapper">
                            <!-- If Thumbnail Is A Link -->
                            <a class="rotatorThumbnailLink" href='...'>
                                <img style='<%=ThumbnailStyle %>' class="rotatorThumbnail" src='...' alt='' />
                            </asp:HyperLink>
                            <!-- If Thumbnail Is Just Content -->
                            <img class="rotatorThumbnail" src='...' alt='' />
                            <!-- End Thumbnail -->
                        </div>
                        <div class="rotatorContentBodyWrapper">
                            <span class="rotatorContentTitleWrapper">
                                <!-- If Title Is A Link -->
                                <a class="rotatorContentTitleLink" href='...'>...</a>
                                <!-- If Title Is Just Content -->
                                ...
                                <!-- End Title -->
                            </span><br />
                            <div id="rotatorContentDescriptionWrapper">
                                <!-- If Main Content Is A Link -->
                                <a class="rotatorDescriptionLink" href='...'>...</a>
                                <!-- If Main Content Is Just Content -->
                                <span class="rotatorDescription">...</span>
                                <!-- End Main Content -->
                                <div class="rotatorReadMoreLinkWrapper"><a class="rotatorReadMoreLink" href=''>...</a></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        <!-- End Article Markup -->
    </div>
   
    <div id="controls" class="rotatorControlsWrapper">
        <!--If Controls Are Above Titles -->
        <div id="btnPrev" class="rotatorControlsPreviousLink"></div>&nbsp;
        <div id="btnPause" class="rotatorControlsPauseLink"></div>&nbsp;
        <div id="btnNext" class="rotatorControlsNextLink"></div>
        <!-- End Above Controls -->
        <div class="rotatorPositionsWrapper">
            <!-- Begin Position Titles -->
                    <div class="rotatorPosition">
                        <img class="rotatorPositionThumbnail" style='<%=PositionThumbnailStyle %>' src='...' alt='...' />
                        <!-- If Postion Title is Content or Hyperlink that Rotates -->
                        <div class="rotatorPositionTitle">...</div>
                        <!-- If Position Title is a Link -->
                        <a class="rotatorPositionTitleLink" href='...'>...</a>
                        <!-- End Position Title -->
                    </div>
            <!-- End Position Titles -->
        </div>
        <!--If Controls Are Below Titles -->
        <div id="btnPrev" class="rotatorControlsPreviousLink"></div>&nbsp;
        <div id="btnPause" class="rotatorControlsPauseLink"></div>&nbsp;
        <div id="btnNext" class="rotatorControlsNextLink"></div>&nbsp;
        <!--End Below Controls -->
    </div>
</div>

I'll put that on a Wiki page.

I was thinking adding the following to your Portal or Skin CSS file:

.rotator div {position: relative; top: -200px !important;}

Does that help?