Public Forums 71,145 posts

[sdpearl Friend sdpearlJoin date: October 2007Posts: 2Downloads:0Uploads:0]

#124207

I accidentally posted this to the JA Nerine threads.

I have a quick question regarding the border around the JA Slideshow module. (1.0.0). I am trying to find out where the border is defined. Not having much success. I would like these slides to show without a border around them. Any ideas?

Thanks!

[checkmate40 Friend checkmate40Join date: February 2008Posts: 104Downloads:0Uploads:19 Thanks: 15 Thanked: 3 times in 1 posts]

#247593

So you want the images to be square with no border and no rounded corners correct?

I had the opposite problem, the pictures were showing up with no border and no rounded corners.

They told me to add these lines of code to: /templates/yourtemplate/css/template_css.css

So you can probably just remove/edit these lines. Hope it helps.

<blockquote>/* Slideshow */

#ja-slideshowwrap {

float: left;

width: 59.9%;

position: relative;

}

.ja-slideshow-mask {

width: 100%;

display: block;

background: url(../images/mask-slideshow.png) 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;

}
</blockquote>

[heidi Friend heidiJoin date: May 2008Posts: 45Downloads:0Uploads:4 Thanks: 13]

#268537

Checkmate,

Your animated avatar (of the guy smashing his head on his computer) is ME right now. I have been dinkin’ around for HOURS in Photoshop to get the rounded corner effect with the light gray border for my JA Slideshow (in Corona). I accidentally got a light gray border to work on one image but I darn well can’t duplicate the effect.

If I add your code above to my template.css, will that mean that I can upload rectangular mages of the right size, but the code will round the corners and add the border? I’m sorry if this is a dumb question, but I’m pretty fried right now. And maybe hopin’ for a miracle…?

~Heidi

PS: If I do add this code, do I just drop it into the bottom of the template.css file in my template manager?

PPS: Is the Slideshow the same component that is used in Corona for the Newsflash? That’s actually what I’m trying to modify…

[checkmate40 Friend checkmate40Join date: February 2008Posts: 104Downloads:0Uploads:19 Thanks: 15 Thanked: 3 times in 1 posts]

#268551

What exactly is the problem you are having? I dont want to tell you that it will work without hearing exactly what your problem is.

[checkmate40 Friend checkmate40Join date: February 2008Posts: 104Downloads:0Uploads:19 Thanks: 15 Thanked: 3 times in 1 posts]

#268553

Also…

No, newsflash isnt the same as the slideshow.

[heidi Friend heidiJoin date: May 2008Posts: 45Downloads:0Uploads:4 Thanks: 13]

#268657

Well, I have to manually edit each picture for the newsflash to get rounded corners and a thin border around the outside. When I saw your post, I thought maybe there was a way to do it with CSS,,,

My test site is at beta.baseballnation.us. I spent a lot of time getting new images to fit just right in the newsflash, including rounded corners and that faint gray border. If it could be done with CSS, then I’d be thrilled.

Ah well, it was a long shot…

[checkmate40 Friend checkmate40Join date: February 2008Posts: 104Downloads:0Uploads:19 Thanks: 15 Thanked: 3 times in 1 posts]

#268774

Yea, theres no way to do rounded corners without using graphics. You can use CSS but all your doing is calling the graphics… not creating the corners.

You can use css to call a “side graphic” that has a rounded top left corner the left side border and bottom left corner… then a “middle grpahic” that only has the borders on the top and bottom then a “end graphic” that has the top right corner, right border and bottom right corner. Kind of like creating “end caps” on the sides of your “content”.

Which will give you the effect of rounded corners… but your still using graphics to do the rounded corners not 100% css.

[Author]

Posts