Is it possible to get the look of the "Square glass" style with the width of the "Wide rounded glass" style?

  • 1
  • Question
  • Updated 7 years ago
  • Answered
I like the overall appearance with the Square Glass, but I would really like to take advantage of the space Wide Rounded Glass offers. Is there anyway I could configure my custom css to have the best of both worlds?
Photo of Michael Cooke

Michael Cooke

  • 126 Posts
  • 14 Reply Likes
  • indifferent

Posted 7 years ago

  • 1
Photo of Brianna

Brianna

  • 2045 Posts
  • 92 Reply Likes
Hello, 

The HTML team will be the best to assist you with this. I will be referring your request to them, and they will be happy to answer as soon as they arrive online.  

We appreciate your patience! 

Photo of Michael Cooke

Michael Cooke

  • 126 Posts
  • 14 Reply Likes
I don't mean to complain, but when can I expect a response?
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Hi Michael,

What I am gathering is that you would like the Square style to be wider?

If this is the case what you would need to do is to download the image files, make them wider and upload to your File Manager. You will need to then edit the links in the Custom CSS Editor.

You'll then need to change the width of the wrap and content sections of the CSS Code.

This process is simple but time consuming, if you need anymore help I am willing to help!

Andi
Photo of Michael Cooke

Michael Cooke

  • 126 Posts
  • 14 Reply Likes
Sounds good except for the whole "make the images wider" thing... I don't know if I could make it all fit right.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Michael,

I'm one of the members of the HTML Team. I'm sorry that we did not respond earlier. I was unaware that this question was escalated to the team. This would take quite a bit of work to achieve this as Andi has pointed out. Perhaps, it may be easier to use the Wide Rounded Glass and then tweak that to suit your site?
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
Sanja and Andi are both correct...

If I were you I would as Sanja said... Switch to the Wide Rounded Glass and then upload the following three image files to your file manager.

1)


2)


3)


Then add the following between <!-- and --> to your CSS editor in your website:

<!--

div.layout div.top { background:url(resources/glass-top.png) top left no-repeat;
_behavior: url(http://s2.yolacdn.net/V0021727/templa...;
height:45px;
font-size:0;
}

div.layout div.middle { background:url(resources/glass-middle.png) top left repeat-y;
_behavior: url(http://s2.yolacdn.net/V0021727/templa...;
width:100%;
}

div.layout div.bottom { background:url(resources/glass-bottom.png) top left no-repeat;
_behavior: url(http://s2.yolacdn.net/V0021727/templa...;
height:45px;
font-size:0;
}

-->

The wide rounded glass does not seem to like the angled glass reflection CSS from the squared glass style so the reflection has been omitted from this one. I edited the the squared glass images and enlarged them to fit on the wide rounded glass style. There are a few (2 or 3) pixels of difference between the top/bottom and the middle but unless you are anal about it nobody will notice. It still looks good enough for me. ;) If I was doing it for myself I would spend countless hours doing it until it was spot on but for now this will have to do.

You can see it here on the wide rounded glass style:
http://squaredwideglass.yolasite.com

Happy site building
Ed

If the lady bears don’t find you handsome they should at least find you handy...Don't forget to share the bear....

Honey Bear Playhomes Tips and Favs in one place... A Honey bear Playhomes Tip ;)
Photo of Michael Cooke

Michael Cooke

  • 126 Posts
  • 14 Reply Likes
Thanks! I really appreciate your help with the picture editing and the instructions to apply the style change. Check it out. www.552industries.com
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
Great job Micheal... It looks super... I recognize those jquery image sliders anywhere. ;) Good choice in both.

In Chrome and Internet Explorer The changes are showing but Firefox seems to be a hold out.

Odd issue though. In Firefox 3.6.18 I still see the original bottom and sides. The top has changed to the new image but the others are stuck. I ran into this issue as well and my fix was to add a (NEW) page to my menu, republish and then delete that (NEW) page.

The way it looks in Chrome, Opera and IE: http://screencast.com/t/u11OHEBogM

The way it looks in Firefox 3.6.18: http://screencast.com/t/0O3rOiiW3t

The old faithful of emptying the cache does not fix it.

1) Click "Page" then "Add new page" then name it anything. It's important to leave the box "display in navigation" ticked (You will be deleting the page at the end) then click the "Ok" button.

2) Click the green "Publish to the web" button and re-publish your site.

3) Open your site in Firefox and verify that the (New) page appears and the horizontal menu shows under your banner.

(In Firefox)

If after a few minutes the middle and bottom images show correctly then proceed to step 5

If after a few minutes the middle and bottom images DO NOT show correctly then proceed to step 4

4) Clear your FF cache and once again do step 2 (it might take upwards of 5 minutes to fully propagate through the system.)

5) Click the "Page" button in your toolbar then click "Page manager" then delete the "NEW" page then click the "Ok" button.

6) Click the green "Publish to the web" button and re-publish your site.

7) Open your site in Firefox and verify that the (New) page and the horizontal menu have disappeared under your banner.

If viewed in Firefox your middle and bottom images should have by now switched to the new and updated images in your file manager.

If not, then try to re-publish a few times to kick the sitebuilder in the backside.

Hope that works... ;)
Photo of Michael Cooke

Michael Cooke

  • 126 Posts
  • 14 Reply Likes
Ugh. I hate non Webkit browsers...
Photo of Michael Cooke

Michael Cooke

  • 126 Posts
  • 14 Reply Likes
Thanks, Yola community!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi Michael,

Your site looks great! I like the background. :)

I suggest that you change the background color to purple or something (I know it isn't solid purple but it looks like a shade of purple) matching the edges of the background because this is how it looks on my screen:



If you can't fix that, it's okay. I just wanted to let you know so you're aware of that.

Kind regards,
Nathan
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
Hey Nathan I think that you are still seeing the page in FF with the old middle and bottom images locked in. (See my last post above) If you were to take a look at the site in another browser you will see that the opaque borders will become fully transparent and offer him the look that he is striving for. (First image below)

Once he follow the steps I outlined above:



The way it looks presently in Firefox:



I am digging the full transparency with the background showing through. Too cool... If I didn't have objects (trees, menu and beehive) to the left and right of my page I would be using the modified Wide Squared glass as well.
Photo of Michael Cooke

Michael Cooke

  • 126 Posts
  • 14 Reply Likes
Do you think someone can test this in Firefox for me? I really don't feel like installing another archaic browser. :)
Photo of Michael Cooke

Michael Cooke

  • 126 Posts
  • 14 Reply Likes
The background is the Orion nebula. If you like it you can download it by clicking "Downloads" in the menu bar. It's in the 'Wallpapers' folder.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
@Ed I usually use Google Chrome but I happened to be using Firefox at the time.
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
Not yet sorry to say... Firefox is still showing the original.

Which did you add to your site builder CSS editor? (Not inserted into an HTML widget) One or two?

1)

<!--

div.layout div.top { background:url(resources/glass-top.png) top left no-repeat;
_behavior: url(http://s2.yolacdn.net/V0021727/templa...;
height:45px;
font-size:0;
}

div.layout div.middle { background:url(resources/glass-middle.png) top left repeat-y;
_behavior: url(http://s2.yolacdn.net/V0021727/templa...;
width:100%;
}

div.layout div.bottom { background:url(resources/glass-bottom.png) top left no-repeat;
_behavior: url(http://s2.yolacdn.net/V0021727/templa...;
height:45px;
font-size:0;
}

-->

OR

2)

<!--

<style type="text/css">
div.layout div.top { background:url(resources/glass-top.png) top left no-repeat;
_behavior: url((http://s2.yolacdn.net/V0021727/templa...;
height:45px;
font-size:0;
}

div.layout div.middle { background:url(resources/glass-middle.png) top left repeat-y;
_behavior: url(http://s2.yolacdn.net/V0021727/templa...;
width:100%;
}

div.layout div.bottom { background:url(resources/glass-bottom.png) top left no-repeat;
_behavior: url(http://s2.yolacdn.net/V0021727/templa...;
height:45px;
font-size:0;
}
</style>

-->
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
Just in case it is the forums that is affecting the copy and paste I have added a text file here so that you can copy it instead. http://squaredwideglass.yolasite.com/...

1) Open your site builder
2) Click the "Style" button in the toolbar and click "Edit custom CSS"
3) If you have any prior references to the top, middle or bottom border image changes in the CSS editor or an HTML widget delete them.
4) Copy the text from the text file link above and paste it in the Site CSS Overrides editor
5) Click the "Ok" button
6) Re-publish your site again and let someone who is using Firefox view it to verify that the changes have been made.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Ed, what application do you use for screen shots?
Photo of Michael Cooke

Michael Cooke

  • 126 Posts
  • 14 Reply Likes
Finally! Thank you Ed and Nathan! I wish both you and your websites the best of luck. (Maybe you can send some my way and +1 552i.) :)
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi Michael,

I'll Tweet a link to your site and +1 552i too. :)

Nathan
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
Seriously Nathan??? LOL don't you read my tips thread? LOL

http://forum.yola.com/yola/topics/tak...

Nathan I got your email and will get back to you this weekend. ;) Been busy with health issues again. Wish that I would either get better or just kick the bucket already.

Micheal here is what I now see in Firefox...



Now to quote WC Fields. "Go away kid, ya bother me."

Kidding of course. ;)
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Whoops, didn't see that one! ;) And I understand - health definitely comes before web design!

Thanks for the link. I'm going to start using that screen shot application.

Nathan