Simple Image Rotator: align right

hackerzlab · **Joined:** Sun Apr 05, 2009 10:15 am **Posts:** 21

i have been searching everywhere to align the pictures shown using "Simple Image Rotator" and its just not happening.

i want to display the pictures to the right side but its always showing to the left. i dont know how to use css and opening the website theme css is making go insane. how do i go about this? please help me.

ooffick · **Posted:** Thu Apr 30, 2009 2:46 pm

Hi,

do you have a URL, so I can have a look at it?
Which Joomla version do you use?

Olaf

hackerzlab · **Joined:** Sun Apr 05, 2009 10:15 am **Posts:** 21

m using the 1.0 version as of now.

i dont have any URL yet. by default the images appear on the left side. i want to align it to the right side of the banner. i'm using the theme versitile III by rockettheme

ooffick · **Posted:** Sat May 02, 2009 12:04 pm

You could try to set the css to float:left, or change the margin and/or padding or those images or the DIVs arround it.

Olaf

hackerzlab · **Joined:** Sun Apr 05, 2009 10:15 am **Posts:** 21

the problem is: i dont know how to deal with this css. i open the template.css but got lost as to where i should add and what code to add. tried it but it didnt work.

could you please give me a code so i could copy and paste it to the template css and call the fucntion from the mod later.

thank you.

ooffick · **Posted:** Sat May 02, 2009 3:58 pm

I would love to help you, but I don't know what you want to change, and I don't know your template. Maybe you can supply a screenshot first?

Olaf

hackerzlab · **Joined:** Sun Apr 05, 2009 10:15 am **Posts:** 21

here's the screenshot and i hope this clears it out.

or

thank u for your time.

ooffick · **Posted:** Mon May 04, 2009 1:49 pm

Hi,

have a look at your index.php file, and find the module which you want to change.
e.g.

Code:

<jdoc:include type="module" name="user3" />

now add the following before that tag:

Code:

and add the following after that tag:

Code:

</div>

Now add the following to your css file:

Code:

.rightposition {
float:right;
}

Olaf

hackerzlab · **Joined:** Sun Apr 05, 2009 10:15 am **Posts:** 21

there was already <div class="padding"> in my template and so i removed it and replaced it with <div class="rightpositon">

and added the code to the css file too but nothing happen! its still on the left!

what is this: Module Class Suffix? can i use this to position my banner on the right? if so how do it in the css file?

hackerzlab · **Joined:** Sun Apr 05, 2009 10:15 am **Posts:** 21

this is the index.php file

Code:

      <div id="header">
         <a href="<?php echo $mosConfig_live_site;?>" class="nounder"><img src="<?php echo $mosConfig_live_site;?>/images/blank.png" style="border:0;" alt="" id="logo" /></a>
         <div id="banner">
            <div class="rightpositon">
               <?php mosLoadModules('banner', -1); ?>
            </div>
         </div>
      </div>

ooffick · **Posted:** Mon May 04, 2009 2:43 pm

How about you change the following:

Code:

.rightposition {
float:right;
}

to this:

Code:

#header #banner .rightposition {
float:right;
}

Olaf

hackerzlab · **Joined:** Sun Apr 05, 2009 10:15 am **Posts:** 21

no. its still the same. for your info, the "banner" postion takes the entire left and right space. my banner is only half of that banner position.

i wonder if Module Class Suffix will work.

ooffick · **Posted:** Mon May 04, 2009 3:02 pm

Can you send me the full generated code of that page? And maybe the css files as well?
yes sure the Module class suffix could work, but as always it depends on the context of the other classes.

Olaf

hackerzlab · **Joined:** Sun Apr 05, 2009 10:15 am **Posts:** 21

i was having an exam and couldn't reply earlier. m so sorry. here's the generated code copied from the browser;

Code:

<!-- JoomlaWorks "Simple Image Rotator" Module (v1.2) starts here -->
<noscript>
   <div class="message">Sorry, but Javascript is not enabled in your browser!</div>
</noscript>
<script language="javascript" type="text/javascript">
<!--
var embedSIRCSS = '<' + 'style type="text/css" media="all">'
+ '@import "modules/mod_jw_sir222/mod_jw_sir222.css";'
+ 'ul#jw-sir,ul#jw-sir li#jw-sir-loading {width:600px;height:200px;}'
+ '</' + 'style>';
document.write(embedSIRCSS);
-->
</script>
<script type="text/javascript" src="modules/mod_jw_sir222/mod_jw_sir222.js"></script>
<script type="text/javascript">var delay=5000;var transition=70;var preLoader='jw-sir-loading';</script>
<ul id="jw-sir" class="">
  <li id="jw-sir-loading"></li><li><a href="http://www.yahoo.in/" target="_blank"><img src="images/stories/headers/untitled-1.png" title="http://www.yahoo.in/" alt="http://www.yahoo.in/" /></a></li><li><a href="http://www.yahoo.in/" target="_blank"><img src="images/stories/headers/untitled-11.png" title="http://www.yahoo.in/" alt="http://www.yahoo.in/" /></a></li></ul>
<!-- JoomlaWorks "Simple Image Rotator" Module (v1.2) ends here -->

Code:

/* @group Main */

html {
  /* this is a hack to force scrollbars on at 
     all times so that the page does not jump
     when going from short to long pages */
  height: 100%;
  margin-bottom: 1px;
}

body {
   margin: 0;
   padding: 0;
}

p {
  /* setup some more readable paragraph spacing */
  margin-top: 10px;
  margin-bottom: 15px;
}

h1, h2, h3, h4, h4 {
   /* setup some more readable header spacing */
   padding-bottom: 5px;
   margin: 15px 0;
}

/* @group Fonts */

/* @group Sizes */


body {
   font-size: 13px;
}

body.f-smaller {
   font-size: 10px;
}

body.f-default {
   font-size: 12px;
}

body.f-larger {
   font-size: 15px;
}

h1 {
   font-size: 200%;
}

h2 {
   font-size: 180%;
}

h3 { 
   font-size: 150%;
}

h4 {
   font-size:  120%;
}

.small,
.modifydate,
.createdate,
div.mosimage_caption {
   font-size: 95%;
}

div.moduletable h3,
.componentheading {
   font-size: 145%;
}

table.sections .contentheading {
   font-size: 145%;
}

#header #banner .rightposition {
float:right;
}

.contentheading {
   font-size: 160%;
}

.componentheading {
 margin-bottom: 15px;
}

td.componentheading {
   padding-bottom: 15px;
}

/* @end */

/* @group Family */

body {
      line-height: 135%;
      font-family: Arial, Helvetica, sans-serif;
}

.contentheading,
.componentheading {
   font-weight: bold;
}


a {
   /* color: see style css */
   text-decoration: none;
}

a:hover {
   text-decoration: underline;
}

/* @end */

/* @end */

/* @end */

/* @group Structure */

/* @group pull-down */

#fxContainer {
   position: absolute;
   padding-top: 0px;
   left: 0;
   z-index: 20;
   width: 100%;
   height: 0;
}

#fxTarget { 
   padding-top: 1px;
   margin: 0;
   width: 100%;
   position: relative;
   top: 0;
   z-index: 19;
   height: 0;
   overflow: hidden;
}

#fxPadding {
   visibility: hidden;
   padding: 0 45px;
}

#fxTrigger {
   position: relative;
   cursor: pointer;
}

#fxTab {
   position: relative;
   margin: -6px auto 0;
   text-align: center;
   height: 38px;
   line-height: 36px;
   font-weight: bold;
   width: 176px;
   z-index: 21;
}

#fxTab a,
#fxContainer a {
   z-index: 100;
}

#fxTab a:hover {
   text-decoration: none;
}

/* @end */

/* @group mainbody */


td.mainbody {
   width: 100%;
}

div#mainbody .contentheading {
   font-size: 200%;
}


/* @end */



#template {
   position: relative;
}

img#logo {
   position:  absolute;
   float: left;
   margin-left: 20px;
   margin-top: 40px;
   width: 327px;
   height: 57px;
}

div#banner {
   margin-left:  370px;
   padding-top: 20px;
   height: 84px;
   overflow: hidden;
}

div#banner .padding {
   padding:  10px;
}

div#horiz-menu {
   height: 46px;
}

table.mainbody,
table.usermodules,
table.sections {
   width: 100%;
   padding: 0;
}

td.section {
   padding: 0;
}

td.section.w49 {
   width: 50%;
}

td.section.w24 {
   width: 33%;
}

td.mainbody .padding {
   padding: 15px;
}

div#footer .rk-2 {
   height: 114px;
   overflow: hidden;
}

div#the-footer {
   text-align: center;
}

img#rocket {
   width: 150px;
   height: 105px;
}

/* @group content */

/* @group menus */

/* @group Horiz Menu */

div#horiz-menu ul {
   margin: 0;
   padding: 0;
}

div#horiz-menu li {
   margin: 0;
   padding: 0;
   padding-right: 2px;
   float: left;
   list-style: none;
}

div#horiz-menu a {
   display: block;
   float: left;
   padding: 0 25px;
   height: 42px;
   line-height: 40px;
   font-weight: bold;
   text-decoration: none;
}


/* @end */

/* @group Side Menu */

/* side menu is just a standard list so it will work with a hilite */

.sidenav a{
   font-weight: bold;
}

/* @end */

/* @group Contact Menu */

div#top ul {
   margin: 0;
   padding: 0;
   float: right;
}

div#top li {
   float:  left;
   list-style: none;
   margin-right: 20px;
}

div#top li img {
   float:  left;
   vertical-align: middle;
}

div#top a.mainlevel {
   display:  block;
   float:  left;
   background: none;
   margin: 0;
   padding: 0 5px;
   font-weight:  bold;
}

/* @end */

/* @end */

/* @group Code */

pre {
   padding: 10px;
}

/* @end */

/* @group Notices */

span.alert,
span.info,
span.download,
span.note {
   display: block;
   padding: 10px 10px 10px 50px;
   margin: 15px 0;   
}

/* @end */

/* @group Lists */
#section1 ul,
#section2 ul,
#mainbody ul {
   margin-left: 0;
   padding-left: 1em;
}

#section1 li,
#section2 li,
#mainbody li {
   margin-left: 0;
   list-style: none;
   padding-left: 25px;
   padding-top: 2px;
   margin-bottom: 3px;
}



#mainbody ul.check1,
#mainbody ul.check2,
#mainbody ul.arrow1,
#mainbody ul.arrow2,
#mainbody ul.arrow3,
#mainbody ul.star,
#mainbody ul.circle,
#mainbody ul.morespace {
   margin-left: 35px;
   padding: 0;
}

ul.check1 li,
ul.check2 li,
ul.arrow1 li,
ul.arrow2 li,
ul.arrow3 li,
ul.star li,
ul.circle li,
li.check1,
li.check2,
li.arrow1,
li.arrow2,
li.arrow3,
li.star,
li.circle {
   list-style: none;   
   padding-bottom: 15px;
   padding-left: 40px;
}

/* @end */

/* @group Blockquote */

blockquote {
   width: auto;
   padding: 10px 10px 10px 80px;
   margin: 15px 0;
}

/* @group My Group */

/* @end */

/* @end */

/* @group Login Area */

#fxPadding div.moduletable h3 {
   float: left;
   margin: 0;
   padding: 0;
   line-height: 40px;
   height: 40px;
}

#fxPadding form {
   float: left;
   padding-left: 30px;
   height: 22px;
   margin-top: 8px;
}

#fxPadding div.loginelement {
   float: left;
   margin-left: 30px;
   height: 22px;
   line-height: 22px
}

#fxPadding div.loginelement input {
   width: 100px;
   padding-left: 5px;
}

span.loginsubmit,
span.logoutsubmit {
   display: block;
   padding-left: 8px;
   margin-left: 10px;
   line-height: 25px;
   width: 96px;
   float: left;
   cursor: pointer;
}

/* @end */

/* @group Regular Content Items */

table.contentpaneopen tbody tr td span.small,
td.createdate {
   padding-left: 20px;
}

/* @end */

.screenshot {
   float:  right;
   margin-top: -35px;
   z-index: 9;
}

.hide {
   display: none;
}

form {
   border: 0;
   margin: 0;
   padding: 0;
}

table.blog span.article_seperator {
   display: block;
   height: 20px;
}

/* @end */

/* @end */

/* @group Joomla Core */

/* @group modules */

div.moduletable,
div.moduletable-hilite1,
div.moduletable-hilite2,
div.moduletable-hilite3,
div.moduletable-hilite4,
div.moduletable-hilite5,
div.moduletable-hilite6,
div.moduletable-hilite7,
div.moduletable-hilite8 {
   padding: 0 15px 10px 15px;
}

div.moduletable h3,
div.moduletable-hilite1 h3,
div.moduletable-hilite2 h3,
div.moduletable-hilite3 h3,
div.moduletable-hilite4 h3,
div.moduletable-hilite5 h3,
div.moduletable-hilite6 h3,
div.moduletable-hilite7 h3,
div.moduletable-hilite8 h3 {
   margin: 0 -15px 15px -15px;
   padding: 10px 15px;
   line-height: 100%;
}

td.left div.moduletable,
td.right div.moduletable {
   margin-bottom: 25px;
}

/* @end */

/* @group content */

.contentheading {
   padding: 10px 0;
   line-height:100%;
}

td.buttonheading {
    vertical-align: middle;
}

td.buttonheading img {
   margin-right: 5px;
}

table.contentpaneopen, table.contentpane {
  border-collapse: collapse;
  padding: 0;
  margin: 0;
  width: 100%;
}

div.contentpane, div.contentpaneopen {
  width: 100%;
}

.clr {
   clear: both;
}

div.mosimage {
  margin: 5px;
}

a.readon {
   margin-top: 15px;
   display: block;
   width:  116px;
   height: 36px;
   line-height: 26px;
   padding-left: 5px;
   font-weight: bold;
   /* background: see style css */
}

a.readon:hover {
   text-decoration: none;
}

span.content_rating img {
   vertical-align: top;
}

.modifydate {
   height: 20px;
   vertical-align: bottom;
}

.createdate {
   height: 20px;
   vertical-align: top;
   vertical-align: top;
   padding-bottom: 5px;
   padding-top: 0px;
}

table.contenttoc {
  margin: 5px;
  padding: 5px;
}

table.contenttoc td {
  padding: 0 5px;
}

/* @end */

/* @group pathway */

span.pathway {
   display: block;
   float:  left;
   height: 16px;
   line-height: 18px;
   vertical-align: middle;
   margin-left: 25px;
   margin-bottom: 10px;
   font-weight: bold;
}

span.pathway img {
   float:  left;
   margin: 0 12px 0 14px;
   border: 0;
   width: 17px;
   height: 16px;
   vertical-align: middle;
}

span.pathway a {
   float:  left;
   font-weight: normal;
}


/* @end */

/* @group sections */

table.mainbody td.mainbody td.sectiontableheader {
  font-weight: bold;
  padding: 4px;
  line-height: 20px;
}

tr.sectiontableentry1 td,
tr.sectiontableentry2 td,
td.sectiontableentry1,
td.sectiontableentry2 {
  padding: 5px;
}

/* @group My Group */

/* @end */

.pollstableborder {
   text-align: left;
}

.pollstableborder .sectiontableentry1,
.pollstableborder .sectiontableentry2 {
   background: none;
   border:  0;
}


/* @end */

/* @group mainmenu */

a.mainlevel {
   text-decoration: none;
}

a.mainlevel {
   font-weight: bold;
   display: block;
   padding: 2px 0 2px 20px;
   margin-bottom: 3px;
}

a.sublevel {
   font-weight: bold;
   text-decoration: none;
   padding-left: 10px;
}

a.mainlevel:hover {
   text-decoration: underline;
}

a.sublevel:hover {
   text-decoration: none;
}

.nounder {
   text-decoration: none;
   border: 0;
}

.style-wrapper {
   padding-left: 70px;
   padding-top: 30px;
}

.style {
   float: left;
   margin-right: 50px;
   margin-bottom: 50px;
}

/* @end */

/* @end */

/*
Images are wrapped in divs classed "flickr_badge_image" with ids
"flickr_badge_imageX" where "X" is an integer specifying ordinal position.
Below are some styles to get you started!
*/
#flickr_badge_uber_wrapper {text-align:center;}
#flickr_badge_wrapper {padding:10px 0 10px 0;}
.flickr_badge_image { float:left;}
.flickr_badge_image img {float: left; margin: 0 3px 3px 0;}
#flickr_badge_icon {float:left; margin-right:5px;}
#flickr_www {display:block; padding:0 10px 0 10px !important; font: 11px Arial, Helvetica, Sans serif !important; color:#3993ff !important;}

table.moduletable_mymodulestyle th {
  font-size        : small; 
  font-weight      : bold;
  color            : #888; 
  background      : #FFF;
  text-align      : right;
  padding-left    : 3px;
  padding-right    : 11px;
  letter-spacing  : -1px;
  border-bottom    : 2px solid #999999;
}

ooffick · **Posted:** Tue May 05, 2009 9:15 pm

What is your code for:
modules/mod_jw_sir222/mod_jw_sir222.css

Olaf

hackerzlab · **Joined:** Sun Apr 05, 2009 10:15 am **Posts:** 21

Code:

/*
// "Simple Image Rotator" Module for Joomla! 1.0.x - Version 1.2
// License: http://www.gnu.org/copyleft/gpl.html
// Authors: Fotis Evangelou - George Chouliaras
// Copyright (c) 2006 - 2007 JoomlaWorks.gr - http://www.joomlaworks.gr
// Project page at http://www.joomlaworks.gr - Demos at http://demo.joomlaworks.gr
// ***Last update: August 30th, 2007***
*/

ul#jw-sir {position:relative;list-style:none;list-style-image:none;margin:0px auto;padding:0px;overflow:hidden;border:none;background:none;}
ul#jw-sir li {list-style:none;margin:0px;padding:0px;border:none;background:none;}
ul#jw-sir li a {margin:0px;padding:0px;border:none;background:none;}
ul#jw-sir li a img {display:none;position:absolute;top:0;left:0;border:none;background:none;}
ul#jw-sir li img {display:none;position:absolute;top:0;left:0;border:none;background:none;}
ul#jw-sir li#jw-sir-loading {background:#fff url(loading.gif) no-repeat center;}
ul#jw-sir li#jw-sir-loading-black {background:#000 url(loading_black.gif) no-repeat center;}

ooffick · **Posted:** Wed May 06, 2009 8:25 am

Hi,

the Image rotator has a width of 600px and a height:200px, and the images itself are displayed on the left.

You might want to use the settings of that extension to change the size to something smaller to match the size of your images.

Otherwise if this is not possible try to add this css code:

Code:

#header ul#jw-sir li a img {
left:200px;
}

You might need to change the 200px to something smaller or bigger.

Olaf

ChrisBln · **Joined:** Wed Nov 04, 2009 10:32 am **Posts:** 1

A little bit late respect to the original question, but since I was also struggling with a similar alignment problem with the Simple Image Rotator, and i found the solution, i thought to post it here so maybe can be helpful for other users.

In my case i wanted the images to be aligned to the left. By default, the image rotator centers them.

The solution was difficult to find but is very simple. It all depends on the small word "auto" in the css code.

So locate the file mod_jw_sir.css

and find the following line

Code:

ul#jw-sir {position:relative;list-style:none;list-style-image:none;margin:0px auto;padding:0px;overflow:hidden;border:none;background:none;}

the "margin: 0px auto" style, adds automatically margins to the content so it is always centered!
so just drop the word "auto" and add the float position you want, for instance right:

Code:

ul#jw-sir {float:right;position:relative;list-style:none;list-style-image:none;margin:0px;padding:0px;overflow:hidden;border:none;background:none;}

i repeat, don't forget to drop the word auto, otherwise nothing will change!!

with the above code, images are aligned to the right of the module.
the same way you can align them to the left with float:left; instead of float:right;

hackerzlab · **Joined:** Sun Apr 05, 2009 10:15 am **Posts:** 21

hey thank you but your code doesn't seem to work!

anyways here's what what I did, i change the "left:0" to "right:0" in both the lines and it worked int he same css file:

Code:

ul#jw-sir li a img {display:none;position:absolute;top:0;right:0;border:none;background:none;}
ul#jw-sir li img {display:none;position:absolute;top:0;right:0;border:none;background:none;}

really appreciate it for your reply. SOLVED now.

Joomla! Discussion Forums

Forum rules

Simple Image Rotator: align right

Quick reply

Who is online