Homepage Custonisation - frosted overlay

RayHeath1

Hi,
It was suggested by a support Specialist at Smugmug that I post my question in this forum for assistance, so here goes…I have visited many forums previously for information but this is my first ever participation/asking a question in a forum!

I am constructing my photography website on Smugmug…www.rayheathphotography.com and am progressively working on the content.
It is with the realisation of my Homepage that I am seeking assistance, it being a bit of a mess at the moment as I have published it at the stage where help is required. In place on the homepage is a full screen background carousel of selected images. I am happy with the carousel, the logo and title at the top and the menu bar and content (the menu buttons being live and active).

I have a particular frosted glass layer effect in mind that I want to achieve, to and over the menu bar and the background carousel images (but not the top logo/title strip above the navigation menu), with this frosted overlay effect to extend full width as well as from and include the menu bar and extend vertically downward below the normal page depth (to encourage visitors to scroll further down the page). I envisage adding a small amount of content at the scrolled down bottom, finishing with page link buttons.
Current site under construction items on the homepage will be removed when I am happy the site is finished even though it is being progressively published during works.

HELP PLEASE
I wish to create 3 vertical zones on the homepage, the left one being frosted and 33% width. the central zone to be clear (not frosted and 34% width) and the right zone to be frosted and 33% width. There are to be no visible lines for these vertical zones). The frosted zones will need to of white origin (not black as in the About Page) and probably will need tweaking to achieve the final result to obscure the below carousel images by about 50-60%.
As mentioned above I have published the site where I am currently stuck. On the homepage, and as advised, I attempted to create 3 content blocks (to be the vertical zones) but was not able to position them side by side in a single line across the screen width and that would achieve the menu bar being frosted. Some blocks are currently randomly placed on the homepage with the Site Navigation one being roughly in position):-
THE 3 VERTICAL ZONES
1) I have created a left text block to be the frosted vertical zone (SITE NAVIGATION which will contain text and is 33% width and the text to be white but needs to be readable on the frosted background.
2) I have been advised the central CLEAR VERTICAL ZONE/Block needs to be 34% wide but that needs to be created & how?…a spacer block has been suggested & I thought it had been created! But appears not!...perhaps lost when trying to line up the then produced 3 content blocks!!
3) Currently on the Homepage and for the right hand vertical frosted zone I have created a carousel contained block (which will contain the same carousel that is on my ABOUT page and some text, again in white as for the left hand frosted zone). The carousel images in this r/h side frosted zone need to clear and not with the frosted overlay.

I have been advised that to achieve these works and final result will require input from this forum, particularly for CSS assistance/advice. PLEASE BEAR IN MIND THAT ANY OFFERED ASISTANCE INVOLVING CSS INPUT BY MYSELF WILL NEED TO BE FULLY EXPLAINED AND SEQUENCED AS I HAVE NO CSS EXPERIENCE OR EXPERTISE

Hikin' Mike

I'm lost. You mention 3 VERTICAL (top, center and bottom) zones, yet say left. middle, and right.

Do you have an example, or can you be more specific.

Also, do you really want a slideshow as a background AND a Carousel? IMO, it's VERY busy.

RayHeath1

Hi Mike...thanks for your input.

I am looking to create 3 vertical zones across the full width of my homepage (but with no lines defining these zones) I have been advised that both the left and right vertical zones need to be 33% width, the central zone to be 34% width, and these zones to line up side by side across the screen. Both the left and right vertical zones I would like to have the frostred overlay applied, the middle zone to be clear and without any overlay. The frosted vertical zones to the left and right will obscure the below carousel images (a degree of opacity to be arrived at from probably trialing) but the central clear zone will show the central portion of the below images unobscured. I would like text in the left frsoted zone as I have mentioned, and some text in the right frosted vertical zone but also a different slideshow/carousel of the same size as that on my ABOUT page, in the right frosted zone. I would also like the top menu bar frosted as well.

I would like the depth of the frosted vertical zones down the page to extend down beyond the normal page top to bottom depth, to encourage scrolling down to some content below the frosted zones. If you supply me with an e-mail address I can send you a jpeg copy of an example. have been told that achieving the frosting at least, will require CSS input and knowledge of which I have none.

I hope the above clarifies what I am trying to achieve and thanks for your interest and hopefully assistance....Ray

Hikin' Mike

I sent you a PM.

Hikin' Mike

,

Hikin' Mike

If you can't position your zones side-by-side, then you need to contact SmugMug. You should be able to do that.

EDIT: If they can't do that, then you'll need to re-think your deign.