Author Topic: Twitter styling for Ajax Scroller  (Read 2922 times)

asianet

  • Newbie
  • *
  • Posts: 2
    • View Profile
Twitter styling for Ajax Scroller
« on: 28 January 2009, 10:33 »
Hi,

I've just bought Ajax Scroller to show Twitter updates on my site, all is working OK but how do I get it to look like the Twitter styled module on the demo page? This style is the reason I bought the module so help would be appreciated!

Thanks,

J

Saka

  • Administrator
  • Hero Member
  • *****
  • Posts: 2,500
    • View Profile
    • Sakic.Net
Re: Twitter styling for Ajax Scroller
« Reply #1 on: 28 January 2009, 12:00 »
As explained in documentation the module can be styled in many ways and every instance can be styled individually. You are welcome to copy the style from my demo site.

The Twitter module on the demo page has a container that looking at the HTML source is like this:
Code: [Select]
<div class="twitterbox"><h3>Twitter</h3>{loadposition user5}</div>Then this class is styled in template CSS:
Code: [Select]
div.twitterbox {
    background: url(../images/twitter-bottom.gif) no-repeat left bottom;
        width: 350px;
        padding: 0 0 20px 10px;
        margin-bottom: 2px;
}
div.twitterbox h3 {
        background: url(../images/twitter-top.gif) no-repeat left top;
        margin-left: -10px;
        padding: 8px 0 0 8px;
        color: #33ccff;
}

You could also add class suffix to that module (for example _twitter) and then have:
Code: [Select]
div.moduletable_twitter {
    background: url(../images/twitter-bottom.gif) no-repeat left bottom;
width: 350px;
padding: 0 0 20px 10px;
margin-bottom: 2px;
}
div.moduletable_twitter h3 {
background: url(../images/twitter-top.gif) no-repeat left top;
margin-left: -10px;
padding: 8px 0 0 8px;
color: #33ccff;
}

The images:
http://joomla15.sakic.net/templates/rhuk_milkyway/images/twitter-top.gif
http://joomla15.sakic.net/templates/rhuk_milkyway/images/twitter-bottom.gif

The module itself can be styled in custom css file:
http://joomla15.sakic.net/modules/mod_ajaxscroller/mod_ajaxscroller/style57.css
Note 57 here which is the module's ID. You can also edit the global css if you are not running additional instances of the module.

If there are additional questions feel free to ask. If you require personal assistance for styling it please send the access info (admin password and FTP) by email and I'll be glad to help.
« Last Edit: 28 January 2009, 12:02 by Saka »

asianet

  • Newbie
  • *
  • Posts: 2
    • View Profile
Re: Twitter styling for Ajax Scroller
« Reply #2 on: 28 January 2009, 17:21 »
Great, thanks. Still tweaking it a little but it's up and running at balispace.com...

Regards,

J