Joomla Templates Club 406,261 posts

[juanci Friend juanciJoin date: February 2008Posts: 29Downloads:0Uploads:0 Thanks: 3]

#125449

Hi again.

This new question is related with the surrounded borders on images. How can I do this? By default they are layout as a squere but in the demo the seem to be layout with curved corners

Cheers

Juan

[liotru Friend liotruJoin date: April 2007Posts: 22Downloads:0Uploads:0]

#239065

how to resolve it??

[mj1256 Friend mj1256Join date: June 2007Posts: 1473Downloads:10Uploads:35 Thanks: 84 Thanked: 225 times in 118 posts]

#239089

my previous post was incorrect

these are done in the CSS file

If you used the quick start you will have the following images in your template images folder
mask-slideshow.gif
mask-slideshow-l.gif
mask-slideshow-r.gif
mask-slideshow-t.gif
mask-slideshow-b.gif

this is the slideshow section from the quickstart
/* Slideshow */
#ja-slideshowwrap {
float: left;
width: 59.9%;
position: relative;
}

.ja-slideshow-mask {
width: 550px;
display: block;
background: url(../images/mask-slideshow.gif) no-repeat;
position: absolute;
top: 0;
left: 0;
height: 210px;
z-index: 2;
}

.ja-slideshow-mask1 {
width: 30px;
display: block;
background: url(../images/mask-slideshow-l.gif) no-repeat top left;
position: absolute;
top: 0;
left: 0;
height: 210px;
z-index: 2;
}

.ja-slideshow-mask2 {
width: 30px;
display: block;
background: url(../images/mask-slideshow-r.gif) no-repeat top right;
position: absolute;
top: 0;
right: 0;
height: 210px;
z-index: 2;
}

.ja-slideshow-mask3 {
width: 510px;
display: block;
background: url(../images/mask-slideshow-t.gif) repeat-x top;
position: absolute;
top: 0;
left: 20px;
height: 10px;
z-index: 2;
}

.ja-slideshow-mask4 {
width: 510px;
display: block;
background: url(../images/mask-slideshow-b.gif) repeat-x bottom;
position: absolute;
bottom: 0;
left: 20px;
height: 10px;
z-index: 2;
}

#ja-slideshow {
margin-left: 10px;
}

#ja-slideshow div.moduletable {
margin: 0;
padding: 0;
}

#ja-slideshow-wrap {
margin: 0;
padding: 0;
position: relative;
height: 210px;
overflow: hidden;
}

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

#ja-slidebar {
margin-left: 4px;
display: block;
position: absolute;
top: 170px;
left: 10px;
z-index: 3;
}

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

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

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

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

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

you will see the part about mask1 through mask4, this is the part of the code that makes the gray box outline.

just pasting this in without the images won’t work, but you could make your own box outline if you want using this format and just give your images the same names, top, left, right and bottom

hope this helped

if you do not I can post them here for you

Look in your CSS file for the slideshow section

[mj1256 Friend mj1256Join date: June 2007Posts: 1473Downloads:10Uploads:35 Thanks: 84 Thanked: 225 times in 118 posts]

#239090

or…you could just make your images with a border and rounded corners, that would probably be easiest, but not as much fun! 🙂

[juanci Friend juanciJoin date: February 2008Posts: 29Downloads:0Uploads:0 Thanks: 3]

#239289

Hi mj256.

Thanks for the info. However, all the stuff you are talking about is in my css file. The problem is that I don’t know how to invoke these parameters to be layout with my images.

Can you help me? I’m a newbe :confused:

Thanks in advance

Juan

[mj1256 Friend mj1256Join date: June 2007Posts: 1473Downloads:10Uploads:35 Thanks: 84 Thanked: 225 times in 118 posts]

#239299

if you don’t know how to use a css file i suggest that you make your images with borders on them. you should be able to make it look pretty close to the template borders

[liotru Friend liotruJoin date: April 2007Posts: 22Downloads:0Uploads:0]

#241308

I copied your example and put on my ccs
not working…
why ??

[mj1256 Friend mj1256Join date: June 2007Posts: 1473Downloads:10Uploads:35 Thanks: 84 Thanked: 225 times in 118 posts]

#241352

did you make your own images or copy the images in from the quickstart

this is the code that the demo uses, but you still need to know how to manipulate it

did you read this post on this topic
http://www.joomlart.com/forums/topic/slideshow-problem-2/

[liotru Friend liotruJoin date: April 2007Posts: 22Downloads:0Uploads:0]

#241363

I follow your suggestion ….
saw the web site on topic…
copied the 4 images…
and download on my folder…
now seem working…
thanks anyway

[Author]

Posts