Need CSS Help with SignIn/SignUp Splash Page

Replies to This Discussion

Permalink Reply by JenSocial on February 27, 2011 at 11:30am

Anita,

The image screenshot you've provided is too small for me to see what  you're talking about. And, in a case like this, unless I could get to the actual page where you have made these changes, and see exactly what you need, I couldn't help.

 

Gone for most of the day, and back tomorrow afternoon.

Happy Sunday Everyone,

Jen

• ▶ Reply

Permalink Reply by Anita on February 27, 2011 at 11:50am

I sent you private message. Thank you and enjoy your time off.

• ▶ Reply

Permalink Reply by JenSocial on February 27, 2011 at 12:30pm

Hi Anita,

Got your private message. I'll answer here, in case it may help others too.

 

If you add a background image to the body as you have, and you move it down, it will be moved down across your site. This could become unattractive. However, due to the look of your particular background image, moving the image down 100 pixels, and having 100+ pixels of black background at the top, looks good. But, you will not be able to move it down below the sign-in/up boxes so it can be read on all resolutions. This is for sure.

 

I suggest the following:

1. Move it down a little, it's a nice effect.

Use code something like this:

body {background-position: center 100px;}

The first parameter (center) is your horizontal placement. The second parameter (100px) is your vertical placement.

Go here to learn more:

http://www.w3schools.com/css/pr_background-position.asp

 

2. Then, I would add opacity to the sign-in module.

• Make sure this works on ALL browsers.
• Make sure it works on Sign-In, Sign-Up, and not on home page. I'm not positive about these CSS classes, no time to check.

.xg_widget_main_authorization #xg_body, .xg_floating_container {
         filter:alpha(opacity=50);
        -moz-opacity:0.5;
        -khtml-opacity: 0.5;
        opacity: 0.5; }

Good luck,

Jen

• ▶ Reply

Permalink Reply by JenSocial on February 27, 2011 at 1:52pm

I answered on Creators site too. Hopefully I've grabbed the full class path. Here's your answer Anita. Sorry I was so dense on this one.

.xg_widget_main_authorization #xg_body, .xg_floating_container {margin-top:250px!important;}

 

Seriously signing off now,

;-)

Jen

• ▶ Reply