How to add a background to a slidecontainer...

This is an open forum for any mojoPortal topics that don't fall into the other categories.

This thread is closed to new posts. You must sign in to post in the forums.
5/17/2010 8:36:55 PM
Gravatar
Total Posts 165

How to add a background to a slidecontainer...

Ok, within the HTML Content Settings, there is the 'Enable Slideshow of Elements', which is great...

I have placed within the 'CSS Class For Slide Container div"  'comments' 

within the style.css and the override.css I placed the following:


.comments
{background: url(/Data/Sites/1/skins/piggys-24headermenu/images/wfs.png) no-repeat; width: 312px; height: 402px;}
 

This in turn should supply a background for this div, but it does not.

The test site is:  http://test.piggysbbq.com

Please advise and thanks,

Mark

5/18/2010 7:26:30 AM
Gravatar
Total Posts 18439

Re: How to add a background to a slidecontainer...

Hi,

try changing like this:

.comments
{background: url('images/wfs.png') no-repeat; width: 312px; height: 402px;}

to work correctly with our css combiner/minifier the urls need to be relative to the css file and need to be in single quotes, the combiner will resolve the full url.

Hope it helps,

Joe

5/18/2010 8:20:33 AM
Gravatar
Total Posts 165

Re: How to add a background to a slidecontainer...

Hey Joe,

That did it for the background image, thanks.

Now I have a new problem... I added some padding to move the text down, and to control the font.  The problem is it's not moving the text down, if I use 'margin' it moves everthing thing down.

Plus in IE8 it has a black background. 

I'm normally very good with CSS, but this one is kicking me in the butt.

.comments
{background: url('images/wfs.png') no-repeat; width: 312px; height: 402px; padding-top: 10px; padding-left: 10px; padding-right:10px; color: white; font-size: medium;}

Whatever advice you have for me would be great.

The site again is http://test.piggysbbq.com

Thanks again,

Mark
 

5/18/2010 6:32:01 PM
Gravatar
Total Posts 165

Re: How to add a background to a slidecontainer...

To add to my question...

I have a link under this area to go to 'All Comments', but all it does is advice the slide show.

I'm complete lost on this one.

5/18/2010 8:38:38 PM
Gravatar
Total Posts 165

Re: How to add a background to a slidecontainer...

Thank you to everyone that I spoke with on the conf call tonight.  Below is what I did, and it did not work, I'm going to try inline style now

This is what I added to the CSS

.comments
{background: url('images/wfs.png') no-repeat; width: 312px; height: 402px; }

.comments2
{width: 290px; height: 395px; padding-top: 25px; color: white; font-size: medium;}
 

and here is the HTML

<div class="comments">
<p><span class="comments2">"You are an amazing cook and caterer! You are friendly, approachable and easy to work with. We love all of your smoked meats and specialty barbecue items! Everything was handled exactly as promised. We can't wait to try some of your other dishes or use your services at our next event."<br />
<strong>-Kristen and Erik Kirk </strong></span></p>
<p><span class="comments2">"The best ribs we have ever had, plus the chicken was out of this world. We had them at GetDown DownTown and was it great!"<br />
<strong>-Mark and Deanna Schlaudraff</strong></span></p>
<p><span class="comments2">"Those were the best ribs ever!!! Even better than mine... and I make some good ribs. I will definitely use you in the future."<br />
<strong>"-Kim Gordon, Cafe Cabernet Foundation</strong></span></p>
<p><span class="comments2">"I have eaten at the major BBQ establishments in Tallahassee for many years and Piggy’s by far is the best food hands down."<br />
<strong>Darren A. Schwartz</strong></span></p>
<p><span class="comments2">"Piggy's BBQ does a first class job. The food is outstanding. I recommend them to cater any event."<br />
<strong>-Casey Weldon</strong></span></p>
<p><span class="comments2">"The wings and ribs were fabulous! Everyone commented on them and asked who made them."<br />
<strong>"-Chris Forehand, Preble-Rish, Inc.</strong></span></p>
<p><span class="comments2">"The Cajun Turducken and all the southern trimmings were a huge hit with our special guests, and Brian's team was flawless. I would definitely recommend Piggy's BBQ and we plan to use them again for our important events."<br />
<strong>"-Keith A. Rowe - Cornerstone Software Services, Inc.</strong></span></p>
<p><span class="comments2">"I'm a girl from the south who knows BBQ, and Piggy's BBQ is easily the best I've had in Tallahassee and probably in the whole state! The ribs fall off the bone, the wings are delectable and the Piggy's Parfait is the ticket."<br />
<strong>-Rebecca Thompson</strong></span></p>
<p><span class="comments2">"The food is delicious and service outstanding. It's easily the best barbeque we've had in Tallahassee. That's why we chose Piggy's to cater our rehearsal dinner for our wedding in June."<br />
<strong>Desi Maldonado</strong></span></p>
</div>
<p><strong><a href="/comments.aspx" onclick="event">Read All Comments</a></strong></p>
 

5/18/2010 8:50:19 PM
Gravatar
Total Posts 165

Re: How to add a background to a slidecontainer...

FOUND A FIX

I should have waited to post... I added inline style to the P tag and after it loads it still shows the other.

Now what I did different to make it work... I wrapped a <span> tag around the P Tag like so:  (THAT FIXED IT IN ALL BUT IE, still getting a black background)

<div class="comments">
<span class="comments2"><p>"You are an amazing cook and caterer! You are friendly, approachable and easy to work with. We love all of your smoked meats and specialty barbecue items! Everything was handled exactly as promised. We can't wait to try some of your other dishes or use your services at our next event."<br /><br />
<strong>-Kristen and Erik Kirk </strong></p></span>
<span class="comments2"><p>"The best ribs we have ever had, plus the chicken was out of this world. We had them at GetDown DownTown and was it great!"<br /><br />
<strong>-Mark and Deanna Schlaudraff</strong></p></span>
<span class="comments2"><p>"Those were the best ribs ever!!! Even better than mine... and I make some good ribs. I will definitely use you in the future."<br /><br />
<strong>-Kim Gordon, Cafe Cabernet Foundation</strong></p></span>
<span class="comments2"><p>"I have eaten at the major BBQ establishments in Tallahassee for many years and Piggy’s by far is the best food hands down."<br /><br />
<strong>Darren A. Schwartz</strong></p></span>
<span class="comments2"><p>"Piggy's BBQ does a first class job. The food is outstanding. I recommend them to cater any event."<br /><br />
<strong>-Casey Weldon</strong></p></span>
<span class="comments2"><p>"The wings and ribs were fabulous! Everyone commented on them and asked who made them."<br /><br />
<strong>-Chris Forehand, Preble-Rish, Inc.</strong></p></span>
<span class="comments2"><p>"The Cajun Turducken and all the southern trimmings were a huge hit with our special guests, and Brian's team was flawless. I would definitely recommend Piggy's BBQ and we plan to use them again for our important events."<br /><br />
<strong>-Keith A. Rowe - Cornerstone Software Services, Inc.</strong></p></span>
<span class="comments2"><p>"I'm a girl from the south who knows BBQ, and Piggy's BBQ is easily the best I've had in Tallahassee and probably in the whole state! The ribs fall off the bone, the wings are delectable and the Piggy's Parfait is the ticket."<br /><br />
<strong>-Rebecca Thompson</strong></p></span>
<span class="comments2"><p>"The food is delicious and service outstanding. It's easily the best barbeque we've had in Tallahassee. That's why we chose Piggy's to cater our rehearsal dinner for our wedding in June."<br /><br />
<strong>-Desi Maldonado</strong></p></span>
</div>
<p><strong><a href="/comments.aspx" onclick="event">Read All Comments</a></strong></p>
 

5/18/2010 11:56:45 PM
Gravatar
Total Posts 2253

Re: How to add a background to a slidecontainer...

Hi Mark,

I'm glad you found a fix for this one. We'll have to document this.

For the hyperlink issue, see this page: http://www.mojoportal.com/Forums/Thread.aspx?pageid=5&mid=34&ItemID=2&thread=3930&postid=19487#post19487.

I think we've seen the background issue in IE7 before, I'll have to look.

Thanks,
Joe D.

5/19/2010 5:23:00 AM
Gravatar
Total Posts 18439

Re: How to add a background to a slidecontainer...

Hi Mark,

I would change those spans to divs because it is not valid html for a span to contain block elements like p.

Best,

Joe

5/19/2010 7:15:19 AM
Gravatar
Total Posts 165

Re: How to add a background to a slidecontainer...

Hey Joe Audette,

I wanted to let  you know I switched those <span> tags over to <div> tags and it still works.  Thanks for that.

The only last two things I have is the background is incorrect in IE for somereason and I can't get my link to work.

I tried what Joe D said (putting the onclick code) but that did not work, not sure if I'm doing it wrong or not, this is what I put: 

<div><strong><a href="/comments.aspx" onclick="location.href='/comments.aspx';">Read All Comments</a></strong></div>
 

Thanks again for all the help and thanks again for a great product.

Mark

5/19/2010 8:00:04 AM
Gravatar
Total Posts 165

Re: How to add a background to a slidecontainer...

I'm sorry I'm adding so much information, however I did find one thing out...

Within the Slide area the custom div, it's pulling the background color from the body or the body.pagecontent in IE.  No matter what I try in CSS it will not pull from some place else, could there be an issue with the js?

Now, this is only in IE.

5/19/2010 8:06:43 AM
Gravatar
Total Posts 18439

Re: How to add a background to a slidecontainer...

Hi Mark,

For the click try this:

onclick="window.open(this.href,'_self');return false;"

for the background issue in IE try unchecking the setting "Use extra clear type corrections in slides?"

click the help link next to that setting for more information.

Hope it helps,

Joe

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