Slide Show Settings within the Html Content Settings

If you have questions about using mojoPortal, you can post them here.

You may want to first review our site administration documentation to see if your question is answered there.

This thread is closed to new posts. You must sign in to post in the forums.
2/3/2011 2:32:03 PM
Gravatar
Total Posts 165

Slide Show Settings within the Html Content Settings

What class controls the Slide Show that is created within the HTML content area?  Trying to make the images centered.

Is the page I'm trying to get to work:  http://test.dsatallahassee.org/buddy-walk.aspx

Here's the html for that area: just highlighted everything in the editor and selected 'center text' but that did not work.  I added the following to the stylesheet to create the black box as a test:

.sponsor
{
text-align: center;
border: thin black solid;
}

<h3 style="text-align: center">Please visit our 2010 Sponsors and tell them thank you for their support</h3>
<center>
<div class="sponsor">
<p style="text-align: center; "><img alt="" width="251" height="100" src="/Data/Sites/1/sponsor_images/pulmonary_web.jpg" /></p>
<p style="text-align: center; "><img alt="" width="250" height="193" src="/Data/Sites/1/sponsor_images/amo_web.jpg" /></p>
<p style="text-align: center; "><img alt="" width="250" height="41" src="/Data/Sites/1/sponsor_images/advanced_web.jpg" /></p>
<p style="text-align: center; "><img alt="" width="189" height="100" src="/Data/Sites/1/sponsor_images/asd_web.jpg" /></p>
<p style="text-align: center; "><img alt="" width="250" height="240" src="/Data/Sites/1/sponsor_images/dslogo_revised_web.jpg" /></p>
<p style="text-align: center; "><img alt="" width="250" height="155" src="/Data/Sites/1/sponsor_images/Westwood_web.jpg" /></p>
<p style="text-align: center; "><img alt="" width="250" height="108" src="/Data/Sites/1/sponsor_images/WCTV_web.jpg" /></p>
<p style="text-align: center; "><img alt="" width="250" height="99" src="/Data/Sites/1/sponsor_images/ThomasofCairo_web.jpg" /></p>
<p style="text-align: center; "><img alt="" width="250" height="168" src="/Data/Sites/1/sponsor_images/suntrust_web.jpg" /></p>
<p style="text-align: center; "><img alt="" width="240" height="148" src="/Data/Sites/1/sponsor_images/sps-logo_web.jpg" /></p>
<p style="text-align: center; "><img alt="" width="250" height="154" src="/Data/Sites/1/sponsor_images/Soto-New_web.jpg" /></p>
<p style="text-align: center; "><img alt="" width="250" height="114" src="/Data/Sites/1/sponsor_images/sitters_web.jpg" /></p>
<p style="text-align: center; "><img alt="" width="250" height="51" src="/Data/Sites/1/sponsor_images/fullpress_web.jpg" /></p>
<p style="text-align: center; "><img alt="" width="250" height="122" src="/Data/Sites/1/sponsor_images/NeuroScience_web.jpg" /></p>
<p style="text-align: center; "><img alt="" width="150" height="154" src="/Data/Sites/1/sponsor_images/McConnayghhay_web.jpg" /></p>
<p style="text-align: center; "><img alt="" width="200" height="227" src="/Data/Sites/1/sponsor_images/Lottery_web.jpg" /></p>
<p style="text-align: center; "><img alt="" width="250" height="64" src="/Data/Sites/1/sponsor_images/lorimccoy_web.jpg" /></p>
<p style="text-align: center; "><img alt="" width="250" height="76" src="/Data/Sites/1/sponsor_images/lamar-outdoorlogo_web.jpg" /></p>
<p style="text-align: center; "><img alt="" width="250" height="82" src="/Data/Sites/1/sponsor_images/Kerensky_web.jpg" /></p>
<p style="text-align: center; "><img alt="" width="250" height="67" src="/Data/Sites/1/sponsor_images/karen lucchini_web.jpg" /></p>
<p style="text-align: center; "><img alt="" width="250" height="141" src="/Data/Sites/1/sponsor_images/INTENTS EVENTS_web.jpg" /></p>
<p style="text-align: center; "><img alt="" width="250" height="94" src="/Data/Sites/1/sponsor_images/regional_web.jpg" /></p>
<p style="text-align: center; "><img alt="" width="250" height="87" src="/Data/Sites/1/sponsor_images/ppdc_web.jpg" /></p>
<p style="text-align: center; "><img alt="" width="250" height="118" src="/Data/Sites/1/sponsor_images/brewerlakebaptist_web.jpg" /></p>
<p style="text-align: center; "><img alt="" width="170" height="198" src="/Data/Sites/1/sponsor_images/gt entertainment_web.jpg" /></p>
<p style="text-align: center; "><img alt="" width="250" height="170" src="/Data/Sites/1/sponsor_images/FSUCUlogo_web.jpg" /></p>
<p style="text-align: center; "><img alt="" width="149" height="100" src="/Data/Sites/1/sponsor_images/southwood_web.jpg" /></p>
</div>
</center>
<p style="text-align: center; ">&#160;</p>
<h3>&#160;</h3>

 

2/3/2011 3:45:57 PM
Gravatar
Total Posts 1203
Proud member of the mojoPortal team

Help support mojoPortal!
Add-on modules

Re: Slide Show Settings within the Html Content Settings

Try pulling the "style" declaration off of your <p>s. In firebug I see a lot of extra directives in element.style, like "left: 0", which is going to interfere with centering, and I'm thinking those may be coming from defaults because you have a style declared inline. If that doesn't help, you could also try changing from <p> to <div> to enclose each image in the slideshow.

Jamie

2/4/2011 8:21:13 AM
Gravatar
Total Posts 165

Re: Slide Show Settings within the Html Content Settings

Hey Jamie,

(UPDATE:   After more review the jQuery is placing inline style on it and the "Position: absolute" is the problem.  But I'm unable to loacate where that is pulling from to change it.)

Thank you for the reply... I not sure where the left: 0 is coming from because that is not in the HTML I placed.  Below you will see where I updated the code from <p> to <div> and it made zero changes.

Now, if I turn off the slide show all the images are centered.  So, do you know what style sheet the slide show css is in?

<h3 style="text-align: center">Please visit our 2010 Sponsors and tell them thank you for their support</h3>
<center>
<div class="sponsor">
<div><img alt="" width="251" height="100" src="/Data/Sites/1/sponsor_images/pulmonary_web.jpg" /></div>
<div><img alt="" width="250" height="193" src="/Data/Sites/1/sponsor_images/amo_web.jpg" /></div>
<div><img alt="" width="250" height="41" src="/Data/Sites/1/sponsor_images/advanced_web.jpg" /></div>
<div><img alt="" width="189" height="100" src="/Data/Sites/1/sponsor_images/asd_web.jpg" /></div>
<div><img alt="" width="250" height="240" src="/Data/Sites/1/sponsor_images/dslogo_revised_web.jpg" /></div>
<div><img alt="" width="250" height="155" src="/Data/Sites/1/sponsor_images/Westwood_web.jpg" /></div>
<div><img alt="" width="250" height="108" src="/Data/Sites/1/sponsor_images/WCTV_web.jpg" /></div>
<div><img alt="" width="250" height="99" src="/Data/Sites/1/sponsor_images/ThomasofCairo_web.jpg" /></div>
<div><img alt="" width="250" height="168" src="/Data/Sites/1/sponsor_images/suntrust_web.jpg" /></div>
<div><img alt="" width="240" height="148" src="/Data/Sites/1/sponsor_images/sps-logo_web.jpg" /></div>
<div><img alt="" width="250" height="154" src="/Data/Sites/1/sponsor_images/Soto-New_web.jpg" /></div>
<div><img alt="" width="250" height="114" src="/Data/Sites/1/sponsor_images/sitters_web.jpg" /></div>
<div><img alt="" width="250" height="51" src="/Data/Sites/1/sponsor_images/fullpress_web.jpg" /></div>
<div><img alt="" width="250" height="122" src="/Data/Sites/1/sponsor_images/NeuroScience_web.jpg" /></div>
<div><img alt="" width="150" height="154" src="/Data/Sites/1/sponsor_images/McConnayghhay_web.jpg" /></div>
<div><img alt="" width="200" height="227" src="/Data/Sites/1/sponsor_images/Lottery_web.jpg" /></div>
<div><img alt="" width="250" height="64" src="/Data/Sites/1/sponsor_images/lorimccoy_web.jpg" /></div>
<div><img alt="" width="250" height="76" src="/Data/Sites/1/sponsor_images/lamar-outdoorlogo_web.jpg" /></div>
<div><img alt="" width="250" height="82" src="/Data/Sites/1/sponsor_images/Kerensky_web.jpg" /></div>
<div><img alt="" width="250" height="67" src="/Data/Sites/1/sponsor_images/karen lucchini_web.jpg" /></div>
<div><img alt="" width="250" height="141" src="/Data/Sites/1/sponsor_images/INTENTS EVENTS_web.jpg" /></div>
<div><img alt="" width="250" height="94" src="/Data/Sites/1/sponsor_images/regional_web.jpg" /></div>
<div><img alt="" width="250" height="87" src="/Data/Sites/1/sponsor_images/ppdc_web.jpg" /></div>
<div><img alt="" width="250" height="118" src="/Data/Sites/1/sponsor_images/brewerlakebaptist_web.jpg" /></div>
<div><img alt="" width="170" height="198" src="/Data/Sites/1/sponsor_images/gt entertainment_web.jpg" /></div>
<div><img alt="" width="250" height="170" src="/Data/Sites/1/sponsor_images/FSUCUlogo_web.jpg" /></div>
<div><img alt="" width="149" height="100" src="/Data/Sites/1/sponsor_images/southwood_web.jpg" /></div>
</div>
</center>
<div>&#160;</div>
<h3>&#160;</h3>
 

2/4/2011 12:01:29 PM
Gravatar
Total Posts 2253

Re: Slide Show Settings within the Html Content Settings

Hi Mark,

Check out the source on this page http://jquery.malsup.com/cycle/center-horz.html.

I would remove the <center> tag and anything else you have done to make the images center as they may interfere with the css that the page above recommends.

HTH,
Joe D.

2/4/2011 12:22:25 PM
Gravatar
Total Posts 165

Re: Slide Show Settings within the Html Content Settings

Thanks Joe...

I added the following and it worked great.  YAAAA!

 /* give slideshow some style */
.sponsor { margin: 20px auto; width: 300px; height: 250px; background-color: white; }

/* give each slide the same dimensions */
.sponsor div { width: 300px; height: 250px; background-color: white ;  }

/* make sure each slide image is centered */
.sponsor div img { margin: auto; display: block; background-color: white; }

3/22/2012 11:58:42 AM
Gravatar
Total Posts 104

Re: Slide Show Settings within the Html Content Settings

does anyone have an example of how to use this built in slide show feature? 

I have confirmed this is in the layout.Master...  <portal:ScriptLoaderID="ScriptLoader1"runat="server"/>

but when I put something like...

<p>  first line</p> <p>  second line</p> <p>  third line</p>

...into an HTML content section with "Enable Slideshow of Elements?" checked, nothing happens...

is there something else that I am missing to use this built in feature?

3/22/2012 1:59:07 PM
Gravatar
Total Posts 104

Re: Slide Show Settings within the Html Content Settings

nevermind...  found an example that works, using the built in features...  : )

http://blog.arvixe.com/mojoportal-tip-an-effortless-slideshow-in-under-5-minutes/

You must sign in to post in the forums. This thread is closed to new posts.