help with layout for featured content glider for wordpress

[krspies]

1) Script Title: featured content glider

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...tentglider.htm

3) Describe problem: layout is FUGLY!

Hello there. I'm using the featured content glider script in my wordpress theme. it actually came with the theme. The only problem I have with this script is that it looks as if the theme designer customized the look of the glider and it is SO ugly. I'd like to change the layout to look something like this:




You can see how it looks now as the theme designer has it at www.suburbanwifelife.com. I didn't bother to post in the theme designer's forums because getting any kind of support there is near impossible.

Can anyone help me change the layout of my featured content?

p.s. here's my glide.php code (the theme designer changed the name of the featured content glider's files to glide.php, glide.css and glide.js)

<script type="text/javascript">

featuredcontentglider.init({
	gliderid: "glidercontent",
	contentclass: "glidecontent",
	togglerid: "togglebox",
	remotecontent: "", 
	selected: 0,
	persiststate: true,
	speed: 300,
	direction: "leftright", 
	autorotate: false, 
	autorotateconfig: [10000, 1] //if auto rotate enabled, set [milliseconds_btw_rotations, cycles_before_stopping]
})

</script>

<div id="glidercontent" class="glidecontentwrapper">

<div id="togglebox" class="glidecontenttoggler"> 


<a href="#" class="prev"></a> 

<a href="#" class="next"></a>


</div>

<?php 
	$glidecat = get_option('tri_gldcat'); 
	$glidecount = get_option('tri_gldct'); 
	$my_query = new WP_Query('category_name= '. $glidecat .'&showposts= '. $glidecount . '');
//$my_query = new WP_Query('category_name=featured&showposts=1');
while ($my_query->have_posts()) : $my_query->the_post();$do_not_duplicate = $post->ID;
?>

<div class="glidecontent">

<div class="glidemeta">
<h2><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
 <?php the_content_rss('', TRUE, '', 40); ?>
</div>



<?php $feature = get_post_meta($post->ID,'feature', true); ?>
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>" > <img src="<?php echo ($feature); ?>" 

width="650" height="650" alt="<?php the_title(); ?>"/> </a>



</div>
<?php endwhile; ?>


</div>


 <div class="clear"></div>

and here's my glide.css

#glidercontent{
	margin:0px 0 5px 0px;
	font-family:Georgia,Century gothic, Arial,Tahoma,sans-serif;
}

.glidecontentwrapper{
	position: relative; /* Do not change this value */
	width: 670px;
	height: 300px; /* Set height to be able to contain height of largest content shown*/
	overflow: hidden;
	margin:0px 0px 0px 0px;
	background:url(images/tgb.jpg) repeat-y;
	}

.glidecontent{ /*style for each glide content DIV within wrapper.*/
	position:absolute; /* Do not change this value */
	padding:0px 10px 0px 10px;
	width:640px;
	color:#fff;
	margin:0px 0px;
	height: 230px;
	background:#ec03d9 url(images/minibg.pg) no -repeat;
	overflow:hidden;
	float:left;
}
.glidemeta h2{
	margin:5px 0px 5px 0px;
        padding:5px 0px;
	font-size:18px;
	font-weight:bold;
}
.glidemeta h2 a:link, .glidemeta h2 a:visited{
	color:#fff;
}

.glidemeta{
height: 80px;
width: 640px;
padding:0px 5px 5px 5px;
position:absolute;
background: url(images/balloon.png);
top:164px;
line-height:14px;
color: #fff;
font-size:12px;
overflow: hidden;
border-top:1px solid #000;
}

.gnav{ /*style for DIV used to contain toggler links. */
	width: 100px;
	height:50px;
	z-index:150;
	float:right;
	padding-right:25px;
}

.glidecontenttoggler{ /*style for DIV used to contain toggler links. */

	height:38px;
	z-index:150;
	width: 670px;
	background: url(images/gtop.jpg);
}
.glidecontenttoggler a{ /*style for every navigational link within toggler */
	display: -moz-inline-box;
	display: inline-block;
	color: #2e6ab1;
	font-weight: bold;
	text-decoration: none;
}

.glidecontenttoggler a.selected{ /*style for selected page's toggler link. ".selected" class auto generated! */
	background: #E4EFFA;
	color: black;
}

.glidecontenttoggler a:hover{
	background: #E4EFFA;
	color: black;
}

.glidecontenttoggler a.toc{ /*style for individual toggler links (page 1, page 2, etc). ".toc" class auto generated! */
}

.glidecontenttoggler a.prev{ /*style for "prev" and "next" toggler links. ".prev" and ".next" classes auto generated! */
	top:6px;
	right:35px;
	position:absolute;
	display:block;
	background:url(images/left.jpg) bottom;
	width:36px;
	height:25px;
}
.glidecontenttoggler a.next {
	float:right;
	display:block;
	background:url(images/right.jpg) bottom;
	width:36px;
	height:25px;
	position:absolute;
	top:6px;
	right:5px;
}



	
.banner{
	margin: 0px 0 5px 0;
	padding: 0px 0 5px 0px;
	width:315px;
	background:url(images/banner.jpg) repeat-y;
	float:left;

}
.banner ul {
   	 margin: 0px 0px;
	 padding: 0px 0px;
	 overflow: auto;
	 
}

.banner ul li{
        
        list-style:none;

}
	 
.banner ul li img {
	height:90px;
	width:150px;
	margin: 5px 0px 0px 5px;
	padding:0px 0px;
	list-style:none;
	display : block;
	display:inline;
	float:left;
	background:#fff;
}


.banner li a:link, .banner li a:visited {
	text-decoration: none;
}	

#scroller_container{
position: relative; /*leave this value alone*/
overflow: scroll; /*leave this value alone*/
width: 990px;
height: 60px; /*Height should enough to fit largest content's height*/
margin: 0px  0px 10px 0px ;
background:#F7F1EE;
}

.panel h3{
	margin: 0px 0 0px 0;
	padding: 0px 0px 0px 0px;
	text-align: left;
	font-size:14px;
	height:18px;
	font-family:Georgia,Century gothic,verdana, Arial,  sans-serif;
	overflow:hidden;

}
.panel h3 a:link, .panel h3 a:visited{
	color:#111;
}
.panel {
	
	width: 240px;
	float:left;
	margin: 5px 10px 0px 0px;
	padding:5px 0 0 5px;
	display:inline;
	background:url(images/featl.jpg);
	color:#222;
	font-family:Georgia,century gothic,Arial,verdana, sans-serif;
}


.panel p{
	margin:0px 0px;
	padding:0 0;
	color:#333;
	font-size:11px;
}

.panel img{
	margin:0px 5px 0px 0px;
	padding:3px 3px;
	float:left;
	background:#fff;
	border:1px solid #DDD8D5;
}

[ddadmin]

Some of the code you posted is dynamically generated, so it's hard to work with it as is. Is your question generally a CSS one on how to style the content in the manner in the screenshot?

[krspies]

sorry, I was just trying to provide enough information for you to see what's going on with the glider.

I'm trying to style the glider to look like the image I posted. This is what the glider looks like currently:





see how the image is stretched out very wide with the text floating on top of it? I would like my image on the left side of my text instead. like the screenshot I posted above.

I"m not sure if this is done with CSS or if it is the way the divs are laid out. I'm afraid to mess with it too much because I don't want to create a mess out of the code. lol

[krspies]

woot! I managed to get the image resized and the text resized. now I just have to figure out how to get the text to sit next to the image instead of floating over it.

[krspies]

okay I think I got it. It is indeed necessary to fiddle with the CSS. I've managed to get the text and images aligned so far and now I have to tweak the colors, borders etc. Sorry to bug you for something I could fix myself. Problem solved.