JenSocial: Social Web Directory and Ning Tips

Social Web Directory :: Social Network Directory :: Ning Tips and Ning Support

Need CSS Help with SignIn/SignUp Splash Page

I used Firebug and found the following code associated with the SignIn/SignUp box. I added a custom background, however the box is hiding the text and looks awful.

xg_column xg_span-20 xj_classic_canvas
xg_module xg_lightborder signin-module

I'd like to move the box down to show it all. How can I modify this code or what should I add to it to give a larger margin from the top?

I want to move the box lower down close to the yellow.

Thank you for your help.

0 members favorited this

▶ Reply to This

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