Simple Image Rotator: align right

Discuss the development and implementation of Joomla! 1.0.x templates here.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Locked
hackerzlab
Joomla! Apprentice
Joomla! Apprentice
Posts: 32
Joined: Sun Apr 05, 2009 10:15 am

Simple Image Rotator: align right

Post by hackerzlab » Thu Apr 30, 2009 1:54 pm

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.

User avatar
ooffick
Joomla! Master
Joomla! Master
Posts: 11360
Joined: Thu Jul 17, 2008 3:10 pm
Location: Ireland
Contact:

Re: Simple Image Rotator: align right

Post by ooffick » 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
Olaf Offick - Global Moderator
learnskills.org

hackerzlab
Joomla! Apprentice
Joomla! Apprentice
Posts: 32
Joined: Sun Apr 05, 2009 10:15 am

Re: Simple Image Rotator: align right

Post by hackerzlab » Sat May 02, 2009 11:46 am

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

User avatar
ooffick
Joomla! Master
Joomla! Master
Posts: 11360
Joined: Thu Jul 17, 2008 3:10 pm
Location: Ireland
Contact:

Re: Simple Image Rotator: align right

Post by ooffick » 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
Olaf Offick - Global Moderator
learnskills.org

hackerzlab
Joomla! Apprentice
Joomla! Apprentice
Posts: 32
Joined: Sun Apr 05, 2009 10:15 am

Re: Simple Image Rotator: align right

Post by hackerzlab » Sat May 02, 2009 3:48 pm

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.

User avatar
ooffick
Joomla! Master
Joomla! Master
Posts: 11360
Joined: Thu Jul 17, 2008 3:10 pm
Location: Ireland
Contact:

Re: Simple Image Rotator: align right

Post by ooffick » 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
Olaf Offick - Global Moderator
learnskills.org

hackerzlab
Joomla! Apprentice
Joomla! Apprentice
Posts: 32
Joined: Sun Apr 05, 2009 10:15 am

Re: Simple Image Rotator: align right

Post by hackerzlab » Mon May 04, 2009 1:33 pm

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

Image
or
Image
thank u for your time.

User avatar
ooffick
Joomla! Master
Joomla! Master
Posts: 11360
Joined: Thu Jul 17, 2008 3:10 pm
Location: Ireland
Contact:

Re: Simple Image Rotator: align right

Post by ooffick » 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: Select all

<jdoc:include type="module" name="user3" />
now add the following before that tag:

Code: Select all

<div class="rightpositon">
and add the following after that tag:

Code: Select all

</div>
Now add the following to your css file:

Code: Select all

.rightposition {
float:right;
}
Olaf
Olaf Offick - Global Moderator
learnskills.org

hackerzlab
Joomla! Apprentice
Joomla! Apprentice
Posts: 32
Joined: Sun Apr 05, 2009 10:15 am

Re: Simple Image Rotator: align right

Post by hackerzlab » Mon May 04, 2009 2:33 pm

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
Joomla! Apprentice
Joomla! Apprentice
Posts: 32
Joined: Sun Apr 05, 2009 10:15 am

Re: Simple Image Rotator: align right

Post by hackerzlab » Mon May 04, 2009 2:35 pm

this is the index.php file

Code: Select all

		<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>

User avatar
ooffick
Joomla! Master
Joomla! Master
Posts: 11360
Joined: Thu Jul 17, 2008 3:10 pm
Location: Ireland
Contact:

Re: Simple Image Rotator: align right

Post by ooffick » Mon May 04, 2009 2:43 pm

How about you change the following:

Code: Select all

.rightposition {
float:right;
}
to this:

Code: Select all

#header #banner .rightposition {
float:right;
}
Olaf
Olaf Offick - Global Moderator
learnskills.org

hackerzlab
Joomla! Apprentice
Joomla! Apprentice
Posts: 32
Joined: Sun Apr 05, 2009 10:15 am

Re: Simple Image Rotator: align right

Post by hackerzlab » Mon May 04, 2009 2:56 pm

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.

User avatar
ooffick
Joomla! Master
Joomla! Master
Posts: 11360
Joined: Thu Jul 17, 2008 3:10 pm
Location: Ireland
Contact:

Re: Simple Image Rotator: align right

Post by ooffick » 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
Olaf Offick - Global Moderator
learnskills.org

hackerzlab
Joomla! Apprentice
Joomla! Apprentice
Posts: 32
Joined: Sun Apr 05, 2009 10:15 am

Re: Simple Image Rotator: align right

Post by hackerzlab » Tue May 05, 2009 6:27 pm

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

Code: Select all

<!-- 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: Select all

/* @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;
}

User avatar
ooffick
Joomla! Master
Joomla! Master
Posts: 11360
Joined: Thu Jul 17, 2008 3:10 pm
Location: Ireland
Contact:

Re: Simple Image Rotator: align right

Post by ooffick » Tue May 05, 2009 9:15 pm

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

Olaf
Olaf Offick - Global Moderator
learnskills.org

hackerzlab
Joomla! Apprentice
Joomla! Apprentice
Posts: 32
Joined: Sun Apr 05, 2009 10:15 am

Re: Simple Image Rotator: align right

Post by hackerzlab » Wed May 06, 2009 5:52 am

Code: Select all

/*
// "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;}

User avatar
ooffick
Joomla! Master
Joomla! Master
Posts: 11360
Joined: Thu Jul 17, 2008 3:10 pm
Location: Ireland
Contact:

Re: Simple Image Rotator: align right

Post by ooffick » 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: Select all

#header ul#jw-sir li a img {
left:200px;
}
You might need to change the 200px to something smaller or bigger.

Olaf
Olaf Offick - Global Moderator
learnskills.org

ChrisBln
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Wed Nov 04, 2009 10:32 am

Re: Simple Image Rotator: align right - SOLUTION FOUND!

Post by ChrisBln » Wed Nov 04, 2009 11:11 am

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: Select all

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: Select all

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
Joomla! Apprentice
Joomla! Apprentice
Posts: 32
Joined: Sun Apr 05, 2009 10:15 am

Re: Simple Image Rotator: align right

Post by hackerzlab » Fri Nov 06, 2009 4:42 am

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: Select all

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.


Locked

Return to “Templates & CSS - 1.0.x”