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.

Views: 181

Reply to This

Replies to This Discussion

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

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

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

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

RSS

Members

© 2024   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips