How to make older versions of Internet Explorer show rounded corners and shadow of the Custom Panel

  • 1
  • Announcement
  • Updated 6 years ago
Disclaimer: Create a test site and test this first! We are not responsible for any loss or damage to your site for adding incorrect code.
Please note: This will not make the Sitebuilder look different in IE. It will only show for the published site.

1) Navigate to http://www.css3pie.com.
2) Click on Download.
3) Find the downloaded file on your computer (PIE-1.0beta5.zip) and unzip it.
4) Upload the PIE.htc file to your Yola File Manager.

On Yola
1) Log into your Yola account and edit your site.
2) Add a Custom Panel to your page; choose the options you require.
3) Save and Publish.
4) Navigate to your published site and view the source code. This will vary with the browser you are using.
In Firefox 7, click on Tools >> Web Developer >> Page Source
5) Find the code for your Custom Panel in the source code. It will look similar to this but vary slightly. Be careful what you copy!!:

div#yola-panel-I89{
background:#ffac2a;
background:#ffac2a -webkit-gradient(linear, center top, center bottom, from(#ffac2a), to(#c07705));
background:#ffac2a -moz-linear-gradient(center top, #ffac2a 0%, #c07705 100%);
border:6px solid #000;
border-top:1px solid #;
border-bottom:6px solid #;
border-right:6px solid #;
border-left:6px solid #;
-webkit-border-radius:44px;
-khtml-border-radius:44px;
-moz-border-radius:44px;
-o-border-radius:44px;
border-radius:44px;
-webkit-box-shadow:10px 10px 2px rgba(0, 0, 0, .5);
-moz-box-shadow:10px 10px 2px rgba(0, 0, 0, .5);
box-shadow:10px 10px 2px rgba(0, 0, 0, .5);
}
div#yola-panel-inner-I89{
-webkit-border-radius:38px;
-khtml-border-radius:38px;
-moz-border-radius:38px;
-o-border-radius:38px;
border-radius:38px;
background-position:top left;
background-repeat:repeat;
padding:20px 20px 20px 20px;
color:#222;
}

6) Copy and paste the code to Notepad (Text Edit for Mac).
7) Add the following lines of code to both the div#yola-panel and div#yola-panel-inner:

behavior: url(resources/PIE.htc);
position:relative;

8) Add the following to the top of the code:
<style type="text/css">
9) Add the following to the bottom of the code:
</style>
8) Drag and drop an HTML Widget on your page under the Custom Panel Widget already on your page.
9) Copy and Paste the code from Notepad into the HTML Widget.
10) Save and Publish.
Photo of diane

diane

  • 1238 Posts
  • 121 Reply Likes

Posted 7 years ago

  • 1
Photo of Gop

Gop

  • 189 Posts
  • 54 Reply Likes
This is an excellent solution and a very professional response.
Congratulations Diane and thank you.
Photo of Abdo Takallam

Abdo Takallam

  • 1 Post
  • 0 Reply Likes
Hello,
Thanks for this workaround.
Is it possible you implement it within the site builder?
I have more than 10 custom panels in my page :)

Thanks a lot
Photo of diane

diane

  • 1238 Posts
  • 121 Reply Likes
Hi, Abdo,

I can see why you would like this implemented in the Site Builder with 10 panels. Please see this thread for an answer by one of our engineers why it is not in the Site Builder: http://forum.yola.com/yola/topics/pos...
what if a page has several panels ?
Photo of diane

diane

  • 1238 Posts
  • 121 Reply Likes
You would need to do this for each panel (except for loading the PIE.htc file; you can use the same one). If you notice in the example code above that there is a number I89 in the code like this: div#yola-panel-I89. Each custom panel you add will have a different number. So you need to add the code for each one.
Photo of controleseletricos

controleseletricos

  • 1 Post
  • 0 Reply Likes
Hi, where do I put the code that is referenced in steps 8 and 9 ?

Here is my code for a panel, I have put the code for step 7 is the right place ?

div#yola-panel-I66{
background:#555555;background:#555555 -webkit-gradient(linear, center left, center right, from(#555555), to(#555555));background:#555555 -moz-linear-gradient(center left, #555555 0%, #555555 100%);border:7px solid #000;-webkit-border-radius:37px;-khtml-border-radius:37px;-moz-border-radius:37px;-o-border-radius:37px;border-radius:37px;-webkit-box-shadow:16px 17px 2px rgba(0, 0, 0, .5);-moz-box-shadow:16px 17px 2px rgba(0, 0, 0, .5);box-shadow:16px 17px 2px rgba(0, 0, 0, .5);
behavior: url(resources/PIE.htc);
position:relative;
}

div#yola-panel-inner-I66{
-webkit-border-radius:30px;-khtml-border-radius:30px;-moz-border-radius:30px;-o-border-radius:30px;border-radius:30px;background-position:top left;background-repeat:repeat;padding:20px 20px 20px 20px;color:#fff;
behavior: url(resources/PIE.htc);
position:relative;
}

div#yola-panel-inner-I66 h1,
div#yola-panel-inner-I66 h2,
div#yola-panel-inner-I66 h3,
div#yola-panel-inner-I66 h4,
div#yola-panel-inner-I66 h5,
div#yola-panel-inner-I66 h6{
color:#eee;

}

div#yola-panel-inner-I66 a{
color:#7fb9ed;
}

div#yola-panel-inner-I66 a:hover{
color:#7fb9ed;
}
Photo of diane

diane

  • 1238 Posts
  • 121 Reply Likes
The code from step 7 is correct. The code for step 8 goes at the very top of the code and 9 at the bottom. So your code would look like:



<style type="text/css">

div#yola-panel-I66{
background:#555555;background:#555555 -webkit-gradient(linear, center left, center right, from(#555555), to(#555555));background:#555555 -moz-linear-gradient(center left, #555555 0%, #555555 100%);border:7px solid #000;-webkit-border-radius:37px;-khtml-border-radius:37px;-moz-border-radius:37px;-o-border-radius:37px;border-radius:37px;-webkit-box-shadow:16px 17px 2px rgba(0, 0, 0, .5);-moz-box-shadow:16px 17px 2px rgba(0, 0, 0, .5);box-shadow:16px 17px 2px rgba(0, 0, 0, .5);
behavior: url(resources/PIE.htc);
position:relative;
}

div#yola-panel-inner-I66{
-webkit-border-radius:30px;-khtml-border-radius:30px;-moz-border-radius:30px;-o-border-radius:30px;border-radius:30px;background-position:top left;background-repeat:repeat;padding:20px 20px 20px 20px;color:#fff;
behavior: url(resources/PIE.htc);
position:relative;
}

div#yola-panel-inner-I66 h1,
div#yola-panel-inner-I66 h2,
div#yola-panel-inner-I66 h3,
div#yola-panel-inner-I66 h4,
div#yola-panel-inner-I66 h5,
div#yola-panel-inner-I66 h6{
color:#eee;

}

div#yola-panel-inner-I66 a{
color:#7fb9ed;
}

div#yola-panel-inner-I66 a:hover{
color:#7fb9ed;
}
</style>

Photo of David

David

  • 465 Posts
  • 94 Reply Likes
Hello Diane
I'm trying to do the above on this page http://www.leathersolutions.org/test.php, I haven't used the custom panel as I have other things going on which the panel does not cater for.
This is my code for my panel

<!--
<div id="pie1"><div align="right"><div style="background-color: #f6f6f6; box-shadow: 5px 5px 7px #341002; -webkit-box-shadow: 5px 5px 7px #341002; -moz-box-shadow: 5px 5px 7px #341002; width: 182px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; text-align: center;"><img style="margin: 5px 5px 0px 5px; padding: 0px;" src="resources/leather%20cleaner.jpg" alt="leather cleaner">
<style type="text/css">
.image1
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
.image1:hover
{
opacity:0.2;
filter:alpha(opacity=20); /* For IE8 and earlier */
}
</style>

<a href="leather-care-shop.php" title="Click"><img style="margin: 6px 0px 6px 0px; padding: 0px;" src="resources/leather%20restoration.png" class="image1" alt="leather restoration"></a>

</div></div></div>
-->

And this is my CSS

<!--
<style type="text/css">
#pie1{
behavior:url(resources/PIE.htc);
position:relative;}
</style>
-->

I don't think I'm far off, my thought is that I haven't got the id attribute quite right and the two codes aren't relating to each other.
If you could take a look I would be grateful.
Photo of David

David

  • 465 Posts
  • 94 Reply Likes
Changed code slightly but can't edit my post above for some reason so here it is

<!--
<div align="right"><div style="background-color: #f6f6f6; box-shadow: 5px 5px 7px #341002; -webkit-box-shadow: 5px 5px 7px #341002; -moz-box-shadow: 5px 5px 7px #341002; width: 182px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; text-align: center;"><img style="margin: 5px 5px 0px 5px; padding: 0px;" src="resources/leather%20cleaner.jpg" alt="leather cleaner">
<style type="text/css">
.image1
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
.image1:hover
{
opacity:0.2;
filter:alpha(opacity=20); /* For IE8 and earlier */
}
</style>

<a href="leather-care-shop.php" title="Click"><img style="margin: 6px 0px 6px 0px; padding: 0px;" src="resources/leather%20restoration.png" class="image1" alt="leather restoration"></a>

</div></div>
-->

<!--
<style type="text/css">
div#I2467{
behavior:url(resources/PIE.htc);
position:relative;}
</style>
-->

Unfortunately still doesn't work, any ideas from anybody would be appreciated.
Photo of diane

diane

  • 1238 Posts
  • 121 Reply Likes
Hi, David,

I think the problem is that your box shadow and border radius should all be in the CSS for div#l2467. Right now it is inline CSS and the behavior for PIE is going no where. I will need a little time to test this out. Let me know if you have any success.
Photo of David

David

  • 465 Posts
  • 94 Reply Likes
Hi Diane
I've managed to sort it by just adding behavior: url(resources/PIE.htc); position: relative; to the div style, I only spotted it when I went through the original code again after your comment so thanks for your help.
Photo of Natalie

Natalie

  • 3 Posts
  • 0 Reply Likes
Hi all...

I changed the appearance of my banner image and menu bar using the custom CSS panel, which of course doesnt display correctly in IE. i changed the code as described above so it looks like this:

#sys_banner{
width:983px;
height:325px;
-moz-border-radius:600px / 200px;
-webkit-border-radius:600px / 200px;
border-radius:600px / 200px;
-moz-box-shadow:inset 0px 0px 0px 0px #FFFFFF, 0px 0px 30px 20px #FFFFFF;
-webkit-box-shadow:inset 0px 0px 0px 0px #FFFFFF, 0px 0px 30px 20px #FFFFFF;
box-shadow:inset 0px 0px 0px 0px #FFFFFF, 0px 0px 30px 20px #FFFFFF;
margin:8px;
behavior: url(resources/PIE.htc);
position:relative;
/* this is wierd. but for some reason, if there is no border it drops down a few pixels! border-top:solid 1px #FFFFFF;
*/
}

#menu {
margin-top : 80px;
margin-left: 25px;
margin-right: 25px;
background-color : #FFFFFF;
border-width : 3px;
border-color : #FFFFFF;
border-style : solid;
padding-left : 80px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
-moz-box-shadow:inset 0px 0px 75px 20px #c15ce1, 0px 0px 5px 1px #c15ce1;
-webkit-box-shadow:inset 0px 0px 75px 20px #c15ce1, 0px 0px 5px 1px #c15ce1;
box-shadow:inset 0px 0px 75px 20px #c15ce1, 0px 0px 5px 1px #c15ce1;
behavior: url(resources/PIE.htc);
position:relative;
}

Is this correct?
As i cant place the html widget beneath these areas, do i slot it in my custom CSS panel?

Thanks...
Natalie.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
You can do as you say or you can add it as an Inline Style by adding it to an HTML widget on a page. This maybe a good test process before you commit?

<style type="text/css">
#sys_banner{
width:983px;
height:325px;
-moz-border-radius:600px / 200px;
-webkit-border-radius:600px / 200px;
border-radius:600px / 200px;
-moz-box-shadow:inset 0px 0px 0px 0px #FFFFFF, 0px 0px 30px 20px #FFFFFF;
-webkit-box-shadow:inset 0px 0px 0px 0px #FFFFFF, 0px 0px 30px 20px #FFFFFF;
box-shadow:inset 0px 0px 0px 0px #FFFFFF, 0px 0px 30px 20px #FFFFFF;
margin:8px;
behavior: url(resources/PIE.htc);
position:relative;
/* this is wierd. but for some reason, if there is no border it drops down a few pixels! border-top:solid 1px #FFFFFF;
*/
}

#menu {
margin-top : 80px;
margin-left: 25px;
margin-right: 25px;
background-color : #FFFFFF;
border-width : 3px;
border-color : #FFFFFF;
border-style : solid;
padding-left : 80px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
-moz-box-shadow:inset 0px 0px 75px 20px #c15ce1, 0px 0px 5px 1px #c15ce1;
-webkit-box-shadow:inset 0px 0px 75px 20px #c15ce1, 0px 0px 5px 1px #c15ce1;
box-shadow:inset 0px 0px 75px 20px #c15ce1, 0px 0px 5px 1px #c15ce1;
behavior: url(resources/PIE.htc);
position:relative;
}
</style>
Photo of Natalie

Natalie

  • 3 Posts
  • 0 Reply Likes
Thanks gop!
will try it out...
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Any satisfaction with this Natalie?
Photo of Natalie

Natalie

  • 3 Posts
  • 0 Reply Likes
hi Gop

added the changes in my CSS and displays perfectly! the menu is just positioned incorrectly now so just need to fix that alignment....
then for the custom panels... thank you so much for your assistance!
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Good news and great work.
Like to have a peep when you are ready for the world!