Joomla Templates Club 406,261 posts

[cgc0202 Friend cgc0202Join date: August 2007Posts: 2244Downloads:0Uploads:3 Thanks: 206 Thanked: 262 times in 1 posts]

#164127

Hello,

How does one achieve a full-width for the main slideshow, just below the main navigation.

If possible, it would be nice if each image, when clicked, would lead to the article; or has a “Read more” text option that may then be clicked also to lead to the article.

Cornelio

[khoand Friend khoandJoin date: February 2011Posts: 4500Downloads:0Uploads:179 Thanks: 169 Thanked: 1166 times in 1060 posts]

#391740

Hi,
– Create new <joomla url>templatesja_mesolite_iilayoutsblocksslideshow.php with content:


<?php
if($this->countModules("slideshow")) : ?>
<div id="jaslideshow" class="wrap">
<div class="main clearfix">
<jdoc:include type="modules" name="slideshow" style="JAxhtml" />
</div>
</div>
<?php endif; ?>

– Add this code into <joomla url>templatesja_mesolite_iilayoutsdefault.php file


<?php $this->loadBlock('slideshow') ?>
before

<!-- MAIN CONTAINER -->
– Set position of slideshow module is slideshow

1 user says Thank You to khoand for this useful post

1. cgc0202

[cgc0202 Friend cgc0202Join date: August 2007Posts: 2244Downloads:0Uploads:3 Thanks: 206 Thanked: 262 times in 1 posts]

#391876

<em>@khoand 241096 wrote:</em><blockquote>Hi,
– Create new <joomla url>templatesja_mesolite_iilayoutsblocksslideshow.php with content:


<?php
if($this->countModules("slideshow")) : ?>
<div id="jaslideshow" class="wrap">
<div class="main clearfix">
<jdoc:include type="modules" name="slideshow" style="JAxhtml" />
</div>
</div>
<?php endif; ?>

– Add this code into <joomla url>templatesja_mesolite_iilayoutsdefault.php file


<?php $this->loadBlock('slideshow') ?>
before

<!-- MAIN CONTAINER -->
– Set position of slideshow module is slideshow</blockquote>

Thanks very much khoand,

It worked after I addes also the “slideshow” in the:

templateDetails.xml

There are some issues with the margins though for the newly created full width modules shown here:

Sandbox site only, not an active public site.

The left side of the slideshow module seems to be indented inwad. The right side aligned only with the header and “manin content” site by reducing the width of the area in the slideshow Module but nothing seems to work, even after I cleared the cache. I tried to look at the

ja.slideshow.css

to look for left and right margins and paddings and tried to change them, but it did not seem to work.

Note: In the other threads that you were kind enough to help resolve, I have a similar issue with the bots1 modules

Positions 6-10
Positions 12-16

Note that the full-width span JA News Module is aligned ocrrectly with the header, main content and footer.

Cornelio

[khoand Friend khoandJoin date: February 2011Posts: 4500Downloads:0Uploads:179 Thanks: 169 Thanked: 1166 times in 1060 posts]

#391880

You replace this code

<jdoc:include type="modules" name="slideshow" style="JAxhtml" />

with


<jdoc:include type="modules" name="slideshow" style="raw" />


1 user says Thank You to khoand for this useful post

1. cgc0202

[cgc0202 Friend cgc0202Join date: August 2007Posts: 2244Downloads:0Uploads:3 Thanks: 206 Thanked: 262 times in 1 posts]

#392184

<em>@khoand 241284 wrote:</em><blockquote>You replace this code

<jdoc:include type="modules" name="slideshow" style="JAxhtml" />

with


<jdoc:include type="modules" name="slideshow" style="raw" />

</blockquote>

Thanks very much khoand,

It helped but not completely aligned, still.

Sandbox site

I am trying to fine tune the “ja.slideshow.css”


/*

# ------------------------------------------------------------------------
# JA Mesolite II template for Joomla 1.5
# ------------------------------------------------------------------------
# Copyright (C) 2004-2010 JoomlArt.com. All Rights Reserved.
# @license - PHP files are GNU/GPL V2. CSS / JS are Copyrighted Commercial,
# bound by Proprietary License of JoomlArt. For details on licensing,
# Please Read Terms of Use at http://www.joomlart.com/terms_of_use.html.
# Author: JoomlArt.com
# Websites: http://www.joomlart.com - http://www.joomlancers.com
# Redistribution, Modification or Re-licensing of this file in part of full,
# is bound by the License applied.
# ------------------------------------------------------------------------

*/

#ja-slideshowwrap {
position: relative;
background: #000000;
width: 988px;
}

#ja-slideshow {
} /* --- background: #000000; width: 980px;--- */

#ja-slideshow div.moduletable {
margin: 0;
padding: 0;
} /* --- margin: 0; padding: 0; margin: 5px 5px 5px 5px; --- */

#ja-slideshow-case {
position: absolute;
top: 0;
left: 0;
}

#ja-slidebar {
margin-left: 4px;
position: absolute;
bottom: 10px;
left: 10px;
display: block;
z-index: 100;
} /* --- margin-left: 4px; left: 10px;--- */

#ja-slidebar ul {
margin: 0;
padding: 0;
list-style: none;
}

#ja-slidebar ul li {
margin: 0;
padding: 0;
display: inline;
width: 20px;
height: 20px;
}

#ja-slidebar ul li.pause {
background: none;
display: none;
}

#ja-slidebar ul li a {
color: #4F4F4F;
cursor: pointer;
text-decoration: none;
font-family: Tahoma, Arial, sans-serif;
font-size: 10px;
width: 20px;
height: 22px;
display: block;
float: left;
background: url(../images/circle.png) no-repeat;
text-indent: 6px;
margin-right: 5px;
font-weight: bold;
}

#ja-slidebar ul li a:hover {
text-decoration: none;
color: #333333;
}

#ja-slidebar a.next,
#ja-slidebar a.prev {
display: none;
}

#ja-slidebar a.active {
background: url(../images/circle-active.png) no-repeat;
}

.ja-slideshow-mask {
display: none;
}

#ja-slideshowwrap img {
width: 990px !important;
}

However, the uneven left and right margins between the slideshow and the header, body and footer is not so glaring because of the animated slideshow.

What is more glaring is the “protruding” left and right of the position modules

Position 6-10
and
Position 12-16

Any idea how the latter can be resolved?

Cornelio

[khoand Friend khoandJoin date: February 2011Posts: 4500Downloads:0Uploads:179 Thanks: 169 Thanked: 1166 times in 1060 posts]

#392414

Sorry about late response. But I don’t understand what you mean clearly. Could you give me a snapshot with your annotation to explain detail more?

[cgc0202 Friend cgc0202Join date: August 2007Posts: 2244Downloads:0Uploads:3 Thanks: 206 Thanked: 262 times in 1 posts]

#392731

<em>@khoand 241997 wrote:</em><blockquote>Sorry about late response. But I don’t understand what you mean clearly. Could you give me a snapshot with your annotation to explain detail more?</blockquote>

Thanks khoand.

I included three snapshots, shown in the linked PDF

Uneven widths

document. Red arrows are included to show uneven full-widths between adjacent position rows.

I hope it helps.

Cornelio

[khoand Friend khoandJoin date: February 2011Posts: 4500Downloads:0Uploads:179 Thanks: 169 Thanked: 1166 times in 1060 posts]

#393256

You find this code from http/templates/ja_mesolite_ii/css/template.css file


#ja-container .main {
border-top: 1px solid #CCC;
background-color: white;
width: 990px; < remove this line
}


1 user says Thank You to khoand for this useful post

1. cgc0202

[khoand Friend khoandJoin date: February 2011Posts: 4500Downloads:0Uploads:179 Thanks: 169 Thanked: 1166 times in 1060 posts]

#393258

To solve “footer” problem:
– You find code from /templates/ja_mesolite_ii/css/template.css file


#ja-botsl .main {
width: 980px;
background-color: white; < add this line
}



#ja-botsl {
position: relative;
border-top: 1px solid #E6E6E6; < remove this line
border-left: 1px solid #E6E6E6; < remove this line
clear: both;
background: #F7F7F7; < remove this line
}

1 user says Thank You to khoand for this useful post

1. cgc0202

[cgc0202 Friend cgc0202Join date: August 2007Posts: 2244Downloads:0Uploads:3 Thanks: 206 Thanked: 262 times in 1 posts]

#393297

Thanks very much khoand,

Both worked quite nicely, as you revised.

Cornelio

<em>@khoand 243090 wrote:</em><blockquote>You find this code from http/templates/ja_mesolite_ii/css/template.css file


#ja-container .main {
border-top: 1px solid #CCC;
background-color: white;
width: 990px; < remove this line
}

</blockquote>

<em>@khoand 243092 wrote:</em><blockquote>To solve “footer” problem:
– You find code from /templates/ja_mesolite_ii/css/template.css file


#ja-botsl .main {
width: 980px;
background-color: white; < add this line
}



#ja-botsl {
position: relative;
border-top: 1px solid #E6E6E6; < remove this line
border-left: 1px solid #E6E6E6; < remove this line
clear: both;
background: #F7F7F7; < remove this line
}
</blockquote>

[Author]

Posts