Current status of the Ning Platform is always available on the Ning Status Blog.

customize your Sign in background,  create a sign-in button and change your Fonts and font colors.

if you want to customize the sign-up page as well the codes for that is in the Sixth comment down in this discussion. And for the sign up page some networks will need this fix.

.xg_theme #xg_themebody #xg.account {
    padding-top: 30px!important;
    padding-bottom: 580px!important;}

The background codes will auto adjust the size for different screen resolutions.

there are differences in Ning networks so if the code does not work on your network just let me know and I'll write the code for your network.  :-)

Place these codes in your design studio advanced CSS

backgrounds

Change the image url to the one you want to use

.xg_theme #xg_themebody DIV#xg.account.external-auth.xg_widget_main.xg_widget_main_authorization.xg_widget_main_authorization_signIn {
padding-top: 4.5%!important;
padding-bottom: 42% ;}
DIV#xg.account.external-auth.xg_widget_main.xg_widget_main_authorization.xg_widget_main_authorization_signIn{
background-image: url(https://api.ning.com/files/YQhkdgMgba6MbiAIQb*aHCIyH8niRlDHcqT9RoThi3QXlXlC-cNbP*PZJ8GUUIxf9JykGCKTEkVdxxEhGoOuthm*PYOry6C3/Tran.jpg)!important;
background-attachment:
fixed; background-size:100% 100%; }

If you want the module to have the same background add this code with the same url as the code above.

DIV.xg_module.xg_lightborder.signin-module FORM.xg_module_body.xg_lightborder {
background-image: url(https://api.ning.com/files/YQhkdgMgba6MbiAIQb*aHCIyH8niRlDHcqT9RoThi3QXlXlC-cNbP*PZJ8GUUIxf9JykGCKTEkVdxxEhGoOuthm*PYOry6C3/Tran.jpg)!important;
 background-attachment: fixed;
 background-size:100% 100%; }

You can also add a different image for the module just replace the image link in this code

DIV.xg_module.xg_lightborder.signin-module FORM.xg_module_body.xg_lightborder {
background-image: url(http://i597.photobucket.com/albums/tt55/geocom69/mariacolorf.jpg)!important;
 background-size:100% 100%; }

You can move the module left or right  with this piece of code Just add the code to the very bottom of the background code.  It looks like this ( padding-right:40%!important; ) Just change the word right to left if you want it on the Left side.  The percentage will change how far over it moves I recommend not going above 40% Because people with small laptops may have it run off their page.  40% is a perfect for screen resolutions ranging from 800x600 through 1600 by 1024.  To move it up and down just use the top line of this code  ( padding-top: 4.5%!important; ) I recommend not changing it to less than 1% on some networks a white bar or different color bar will show up at the top of your screen.  and of course you can change the percentage of the bottom line to pixels  if you prefer using pixels ( padding-right:1px!important; )

after applying the changes I recommend checking it out in  different screen resolutions on your computer.

if you have any problems just let me know.

Sign-in button

this code will create a background image for the sign in button Just replace the image link with the one you prefer.

Sign-in
DIV.xg_module.xg_lightborder.signin-module FORM.xg_module_body.xg_lightborder  INPUT.button{
 background-image: url( http://i597.photobucket.com/albums/tt55/geocom69/ALevyne888-1.gif )!important;
  background-size:100% 100%; }



or would you prefer to have your sign in button with rounded corners.  You can change the dimension of the button just changing these numbers on all three lines  21px 21px 21px 21px; all three lines should look exactly the same

Sign-in

DIV.xg_module.xg_lightborder.signin-module FORM.xg_module_body.xg_lightborder INPUT.button {
   border: 1px solid #aaa!important;
   border-radius:21px 21px 21px 21px;
   -moz-border-radius:21px 21px 21px 21px;
   -webkit-border-radius:21px 21px 21px 21px;}




and if you'd like the rounded borders with a shadow effect use this code.  Like I said you if want to change the dimension of the button change the numbers in all three lines that look like this 21px 60px 8px 45px;  all three lines should look exactly the same
 

Sign-in

DIV.xg_module.xg_lightborder.signin-module FORM.xg_module_body.xg_lightborder INPUT.button {
   border: 1px solid #aaa!important;
   border-radius:21px 60px 8px 45px;
   -moz-border-radius:21px 60px 8px 45px;
   -webkit-border-radius:21px 60px 8px 45px;
   -webkit-box-shadow:0px 0px 10px #ccc;
   -moz-box-shadow:6px 6px 10px #ccc;
   box-shadow:6px 6px 10px #ccc;
   -ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
   filter:progid:DXImageTransform.Microsoft.Shadow(Strength=4,Direction=135,Color='#000000');
   clear: both;
   position: relative;
   word-wrap: break-word;
   padding:8px;}

Fonts and font colors

change the font & font color name to whatever you want in each code

    this is the name of the font you will be replacing  ( Helvetica Neue ) and the color ( black )

    This one's for - Forgot your password?
DIV.xg_module.xg_lightborder.signin-module a {
        font-family: Helvetica Neue ; color:black;}


    And this one's for - users name and password
DIV.xg_module.xg_lightborder.signin-module LABEL {
        font-family: Helvetica Neue ;color:black;}


    And this one's for  - sine in button
DIV.xg_module.xg_lightborder.signin-module INPUT.button  {
        font-family: Helvetica Neue ;color:black;}


   And this one's for  - about your network
DIV.xg_module.xg_lightborder.signin-module DIV.signin-about H3 {
        font-family: Helvetica Neue ;color:black;}


    And this one's for  - click here to join
DIV.xg_module.xg_lightborder.signin-module P.dy-right  {
        font-family: Helvetica Neue ;color:black;}

You need to be a member of Ning Creators Social Network to add comments!

Join Ning Creators Social Network

Votes: 0
Email me when people reply –

Replies

  • Pretty radical stuff. Thanks!

  • NC for Hire

    Wow lot of options...great job George.

    • thank you again Bernard I always appreciate your input :-)

  • thx, sorry but it doesn't work for me :(

    • it should work!!!.

      if you're placing this code in your NC custom code box you will need to add this <style> above the code and this </style> below the code.

      If it still doesn't work for you just send me your link and I'll write the code for your network.

      • Thanks George

        • my link : http://weekendrencontre.ning.com/

          •  yours is completely different LOL

            I hope this works for you.

            This code is for the Sign in page background

            DIV#xg.xg_theme.account.external-auth.xg_widget_main.xg_widget_main_authorization.xg_widget_main_authorization_signIn
             {margin-left:-50%;
             padding-left: 24.5%!important;
             padding-right: 54.5%!important;
             padding-top: 20.5%!important;
             padding-bottom: 42% ;}
            DIV#xg.xg_theme.account.external-auth.xg_widget_main.xg_widget_main_authorization.xg_widget_main_authorization_signIn{
             background-image: url(https://api.ning.com/files/YQhkdgMgba6MbiAIQb*aHCIyH8niRlDHcqT9RoThi3QXlXlC-cNbP*PZJ8GUUIxf9JykGCKTEkVdxxEhGoOuthm*PYOry6C3/Tran.jpg)!important;
             background-attachment:
             fixed; background-size:100% 100%; }
             

            this code is for the Sign-in module background


            DIV#xg.xg_theme.account.external-auth.xg_widget_main.xg_widget_main_authorization.xg_widget_main_authorization_signIn DIV.xg_module.xg_lightborder.signin-module FORM.xg_module_body.xg_lightborder {
             background-image: url(https://api.ning.com/files/YQhkdgMgba6MbiAIQb*aHCIyH8niRlDHcqT9RoThi3QXlXlC-cNbP*PZJ8GUUIxf9JykGCKTEkVdxxEhGoOuthm*PYOry6C3/Tran.jpg)!important;
             background-attachment:
             fixed; background-size:100% 100%; }

             

            Background image for the sign-in button


            DIV#xg.xg_theme.account.external-auth.xg_widget_main.xg_widget_main_authorization.xg_widget_main_authorization_signIn DIV.xg_module.xg_lightborder.signin-module FORM.xg_module_body.xg_lightborder INPUT.button { background-image: url(https://api.ning.com/files/TranscodedWallpaper.jpg); background-attachment: fixed; background-size:100% 100%;  }

            sign in button with rounded corners.  You can change the dimension of the button just changing these numbers on all three lines  21px 21px 21px 21px; all three lines should look exactly the same

             
            DIV#xg.xg_theme.account.external-auth.xg_widget_main.xg_widget_main_authorization.xg_widget_main_authorization_signIn DIV.xg_module.xg_lightborder.signin-module FORM.xg_module_body.xg_lightborderINPUT.button {
               border: 1px solid #aaa!important;
               border-radius:21px 21px 21px 21px;
               -moz-border-radius:21px 21px 21px 21px;
               -webkit-border-radius:21px 21px 21px 21px;}


            rounded borders with a shadow effect use this code.  Like I said you if want to change the dimension of the button change the numbers in all three lines that look like this 21px 60px 8px 45px;  all three lines should look exactly the same

             
            DIV#xg.xg_theme.account.external-auth.xg_widget_main.xg_widget_main_authorization.xg_widget_main_authorization_signIn DIV.xg_module.xg_lightborder.signin-module FORM.xg_module_body.xg_lightborder INPUT.button {
               border: 1px solid #aaa!important;
               border-radius:21px 60px 8px 45px;
               -moz-border-radius:21px 60px 8px 45px;
               -webkit-border-radius:21px 60px 8px 45px;
               #ccc;-moz-box-shadow:6px 6px 10px
               #ccc;box-shadow:6px 6px 10px
               #ccc;-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
               filter:progid:DXImageTransform.Microsoft.Shadow(Strength=4,Direction=135,Color='#000000');
               clear: both;
               position: relative;
               word-wrap: break-word;
               padding:8px;}

            • yes indeed lol sorry but I have put all the codes after then

This reply was deleted.
 

Some interesting articles related to community management, digital marketing etc. could be found in our digest. Don't hesitate to leave a feedback so we would know that we should continue :-)

Latest Activity

kostasgr replied to Bizz's discussion
GETTING REALLY FRUSTRATED WITH THIS !!
"Bizz ! .. we should all mention it .... and the internal RSS feeds do not work are all off ...and t…"
4 hours ago
Bizz replied to Bizz's discussion
GETTING REALLY FRUSTRATED WITH THIS !!
"Glad to see you added this to the forum as well so at least they know it's network wide and not jus…"
4 hours ago
kostasgr replied to kostasgr's discussion
RSS OFF..///--.ning_3...///

 
 
 
 
 
 
 
 
 
  
 
 
 "
4 hours ago
kostasgr replied to Bizz's discussion
GETTING REALLY FRUSTRATED WITH THIS !!
4 hours ago
kostasgr replied to Bizz's discussion
GETTING REALLY FRUSTRATED WITH THIS !!
"hi Bizz ..!!...And I have the same problem ... I have +++ and the RSS interiors do not work ... the…"
5 hours ago
Bizz posted a discussion
Whatever Ning has done or is doing is causing a lot of problems and it's getting really annoying. N…
7 hours ago
kostasgr posted a discussion
Hi !! ... does anyone know any code ?? Because they told me they did a renewal .. the ning ..and th…
8 hours ago
⚡JFarrow⌁ replied to Bizz's discussion
Tip: PROFILE THEMES
"great work Bizz... coming along nice!"
yesterday
⚡JFarrow⌁ replied to Anastasia_Ning_Support's discussion
New time formats now available
"true"
yesterday
Bizz replied to Anastasia_Ning_Support's discussion
New time formats now available
"There needs to be an option for the date format as well, for instance from the image above events a…"
yesterday
Luciano Passaro and Rosas † Negras are now friends
yesterday
Anastasia_Ning_Support posted a discussion
Since NING users are scattered across the entire globe, we’ve added an option of switching between…
yesterday
More…

Meanwhile, you can check our social media channels