Styling Horizontal Twitter Feed

Topics: Customizing Orchard, General, Writing modules, Writing themes
Oct 7, 2013 at 4:39 PM
Edited Oct 7, 2013 at 4:40 PM
Hey Folks,

I have taken the Latest Twitter module and some Code & Styles from Kevin K, an Orchard contributor. This code was used on the previous Microsoft Job Blog site. I have gotten everything to work, with the exception of the styling. Something is off and I'm not sure what it is. Below is my Part Code and the Styles im using. http://beta.taxtitleservices.com, You can see it working at bottom of page above footer here. I will add button images to the ends soon after I gt style sheet to work.

Code: Parts.TwitterWidget-url-homepage.cshtml
@using System.Text.RegularExpressions;

@{
    Style.Include("social-stream.css");
    Script.Include("jquery.jcarousel.min.js");
}

<header>
    <h3>The Latest From <a href="http://www.twitter.com/@Model.Username" rel="external">@@@Model.Username</a></h3>
</header>
<ul class="latest-twitter-list jcarousel-skin-jobsblog">
@foreach (var tweet in Model.Tweets) {
    string message = tweet.Message;
    var whiteSpace = new Regex(@"\s+");
    
    <text>
        <li>
            @if (Model.ShowAvatars) { 
            <img src="@tweet.Avatar" class="latest-twitter-avatar" height="24" width="24" />
            }
            @if (Model.ShowUsername) {
            <a href="http://www.twitter.com/@tweet.Username" rel="external">@tweet.Username</a><text>:</text><br/>
            }
            @foreach(string substring in whiteSpace.Split(message)) {
                if(substring == string.Empty) { 
                    continue;
                }
                if(Model.ShowMentionsAsLinks && substring.StartsWith("@")) {
                    string username = substring.Replace("@", string.Empty);
                    <a href="http://www.twitter.com/@username" title="Follow @username on twitter" rel="external">@substring</a>
                }
                else if(Model.ShowHashtagsAsLinks && substring.StartsWith("#")) {
                    string hashTag = substring.Replace("#", string.Empty);
                    string searchUrl = "http://twitter.com/#!/search?q=%23" + hashTag;
                    <a href="@searchUrl" title="Search for mentions of @substring on twitter" rel="external">@substring</a>
                }
                else if(substring.StartsWith("http://")) {
                    <a href="@substring" title="Open link" rel="external">@substring</a>
                }
                else {
                    @substring @T(" ");
                }
            }
            
            @if (Model.ShowTimestamps) { 
                <br/><span class="latest-twitter-timestamp">
                @if (Model.ShowTimestampsAsLinks) {
                    <a href="http://twitter.com/@tweet.Username/statuses/@tweet.Id">@T(tweet.Timestamp)</a>
                }
                else {
                    @T(tweet.Timestamp)
                }
                </span>
            }
        </li>
    </text>
}
</ul>

@using (Script.Foot())
{
    <script type="text/javascript">
    //<![CDATA[
        $(function () {
            $(".latest-twitter-list").jcarousel({ });
        });
    //]]>
    </script>
}
Style: social-stream.css
/* Twitter Widget - Home */
.zone-featured .widget-twitter-widget { border-bottom: 1px solid #ccc; }
.zone-featured .widget-twitter-widget header h3 {
    font-weight: bold;
    text-transform: uppercase;
    color: #666;
    font-size: 1em !important;
    margin: 0px;
    padding: 0 0 2px !important;
    border-bottom: 1px solid #ccc;
}
.zone-featured .widget-twitter-widget div.latest-twitter-follow-link, .zone-featured .widget-twitter-widget br { display:none !important; }
.zone-featured .widget-twitter-widget ul {
    margin: 0 26px !important;
    height: 82px;
    overflow: hidden;
}
.zone-featured .widget-twitter-widget ul li {
    display: inline-block;
    width: 208px !important;
    float: left;
    font-size: 0.846em;
    padding:  4px 10px 0;
    height: 76px;
    background: #F2F2F2;
    margin: 1px 1px 1px 0px;
    line-height: 14px;
}
.zone-featured .widget-twitter-widget ul li a, .zone-featured .widget-twitter-widget ul li a.visited { color: #2F89BD; }
.latest-twitter-timestamp { font-style: italic; color: #999; }


.jcarousel-skin-jobsblog .jcarousel-container {}

.jcarousel-skin-jobsblog .jcarousel-direction-rtl {
    direction: rtl;
}

.jcarousel-skin-jobsblog .jcarousel-container-horizontal {}

.jcarousel-skin-jobsblog .jcarousel-container-vertical {}

.jcarousel-skin-jobsblog .jcarousel-clip {
    overflow: hidden;
}

.jcarousel-skin-jobsblog .jcarousel-clip-horizontal {}

.jcarousel-skin-jobsblog .jcarousel-clip-vertical {}

.jcarousel-skin-jobsblog .jcarousel-item {}

.jcarousel-skin-jobsblog .jcarousel-item-horizontal {}

.jcarousel-skin-jobsblog .jcarousel-direction-rtl .jcarousel-item-horizontal {}

.jcarousel-skin-jobsblog .jcarousel-item-vertical {
    margin-bottom: 10px;
}

.jcarousel-skin-jobsblog .jcarousel-item-placeholder {}

/**
 *  Horizontal Buttons
 */
.jcarousel-skin-jobsblog .jcarousel-next-horizontal {
    position: absolute;
    top: 1px;
    width: 5px;
    cursor: pointer;
    padding: 0px 10px;
    overflow: hidden;
    height: 80px;
    cursor: pointer;
    background: #F2F2F2 url('../Content/Images/next-horizontal.png') no-repeat 2px
50%;
    right: 0px;
    border-left: 1px solid #fff;
}

.jcarousel-skin-jobsblog .jcarousel-direction-rtl .jcarousel-next-horizontal {
    left: 5px;
    right: auto;
    background-image: url('../Content/Images/prev-horizontal.png');
}

.jcarousel-skin-jobsblog .jcarousel-next-horizontal:hover,
.jcarousel-skin-jobsblog .jcarousel-next-horizontal:focus {
    background-position: -18px 50%;
}

.jcarousel-skin-jobsblog .jcarousel-next-horizontal:active {
    background-position: 4px 50%;
}

.jcarousel-skin-jobsblog .jcarousel-next-disabled-horizontal,
.jcarousel-skin-jobsblog .jcarousel-next-disabled-horizontal:hover,
.jcarousel-skin-jobsblog .jcarousel-next-disabled-horizontal:focus,
.jcarousel-skin-jobsblog .jcarousel-next-disabled-horizontal:active {
    cursor: default;
    background-position: -58px 50%;
}

.jcarousel-skin-jobsblog .jcarousel-prev-horizontal {
    position: absolute;
    top: 1px;
    width: 5px;
    padding: 0px 10px;
    overflow: hidden;
    height: 80px;
    cursor: pointer;
    background: #F2F2F2 url('../Content/Images/prev-horizontal.png') no-repeat 2px
50%;
    border-right: 1px solid #fff;
}

.jcarousel-skin-jobsblog .jcarousel-direction-rtl .jcarousel-prev-horizontal {
    left: auto;
    right: 5px;
    background-image: url('../Content/Images/next-horizontal.png');
}

.jcarousel-skin-jobsblog .jcarousel-prev-horizontal:hover, 
.jcarousel-skin-jobsblog .jcarousel-prev-horizontal:focus {
    background-position: -18px 50%;
}

.jcarousel-skin-jobsblog .jcarousel-prev-horizontal:active {
    background-position: 0px 50%;
}

.jcarousel-skin-jobsblog .jcarousel-prev-disabled-horizontal,
.jcarousel-skin-jobsblog .jcarousel-prev-disabled-horizontal:hover,
.jcarousel-skin-jobsblog .jcarousel-prev-disabled-horizontal:focus,
.jcarousel-skin-jobsblog .jcarousel-prev-disabled-horizontal:active {
    cursor: default;
    background-position: -58px 50%;
}
Regards,
TJ Havens
Oct 7, 2013 at 7:26 PM
ok, so after some playing around, i have gotten it to work... so far...

Regards,
TJ Havens