Music City Login Pop-Up

I would like my Music City Login Pop-Up to Look Like the Fashion Template login Pop up. see images below:

I like to full size Facebook Login Button of the Fashion Template. Also my login button need an alternate color to be seen.

Thanks

Hi

Try something like this:

From the template directory, open ../css/gk.stuff.css and comment this code:

Code: Select all

span#fb-auth small {
   width: 20px;
   height:13px; 
   background: transparent url('../images/fbauth.png') no-repeat 0 -1px;
   text-indent: -999em;
   display: block;
   float: left;
   -moz-box-shadow:inset 0px 1px 0px 0px #aab5cd;
   -webkit-box-shadow:inset 0px 0px 1px 0px #556a9a;
   box-shadow:1px 0px #556a9a;
   border-right: 1px solid #a0aecd;
   margin: 2px 7px 0 0
}

span#fb-auth {
   -webkit-box-shadow: inset 0px 1px 0px 0px #aab5cd;
   -moz-box-shadow: inset 0px 1px 0px 0px #aab5cd;
   box-shadow: inset 0px 1px 0px 0px #aab5cd;
   background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #798db9), color-stop(1, #556b9b) );
   background: -webkit-linear-gradient( center top, #798db9 5%, #556b9b 100% );
   background: -moz-linear-gradient( center top, #798db9 5%, #556b9b 100% );
   background: -o-linear-gradient( center top, #798db9 5%, #556b9b 100% );
   background: -ms-linear-gradient( center top, #798db9 5%, #556b9b 100% );
   background: linear-gradient( center top, #798db9 5%, #556b9b 100% );
   background-color: #798db9;
   border: 1px solid #4d576b;
   display: inline-block;
   color: #fff;
   font-family: arial;
   font-size: 12px;
   font-weight: bold;
   padding: 3px 14px 8px 6px;
   text-decoration: none;
   text-shadow: 1px 1px 0px #445375;
   cursor: pointer;
   height: 14px;
   line-height: 19px;
}

span#fb-auth:hover {
   background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #556b9b), color-stop(1, #798db9) );
   background: -webkit-linear-gradient( center top, #556b9b 5%, #798db9 100% );
   background: -moz-linear-gradient( center top, #556b9b 5%, #798db9 100% );
   background: -o-linear-gradient( center top, #556b9b 5%, #798db9 100% );
   background: -ms-linear-gradient( center top, #556b9b 5%, #798db9 100% );
   background: linear-gradient( center top, #556b9b 5%, #798db9 100% );
   background-color: #556b9b;
}


Them go to template parameters and enable override.css file.
On that file, add the following:

Code: Select all

#gkPopupOverlay,#gkPopupLogin {background: #fff;}
.gkPopupWrap {padding: 35px;border: none;}
.gkPopupWrap h3 {margin: 0 0 18px;font-size: 32px;line-height: 32px;}
#gkPopupOverlay {background: #000;}
#login-form ul {   border-top: 1px solid #E7E7E7;overflow: hidden;padding: 12px 0 0;}
#loginForm li {background-image: none; padding-left: 0}

/* Login with Facebook button */
span#fb-auth small {
   width: 20px;
   background: transparent url('../images/fbauth.png') no-repeat 0 2px;
   text-indent: -999em;
   display: block;
   float: left;
   border-right: 1px solid #a0aecd;
   margin: 2px 7px 0 0;
   height: 17px;
}

span#fb-auth {
   background-color: #798db9;
   border: 1px solid #4d576b;
   display: inline-block;
   color: #fff;
   font-family: arial;
   line-height: 22px;
   font-size: 12px;
   font-weight: bold;
   margin: 12px 0 6px;
   padding: 2px 24px 7px 12px;
   text-decoration: none;
   text-shadow: 1px 1px 0px #445375;
   cursor: pointer;
   height: 17px;

   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;

   -webkit-transition: background-color 0.2s ease-out;
   -moz-transition: background-color 0.2s ease-out;
   -o-transition: background-color 0.2s ease-out;
   -ms-transition: background-color 0.2s ease-out;
   transition: background-color 0.2s ease-out;
   position: relative;
   top: -3px;
}

span#fb-auth:hover {
   background-color: #556b9b;
}

.login span#fb-auth {
   margin: 6px 0 0 10px;
}


Looks similar this way

Cheers

Thanks that worked great. 1 other thing how do I change the facebook button text from "Sign In" to "Log In With Facebook"

Thanks

Hi

Try something like this:

From the template directory, open ../css/gk.stuff.css and comment this code:

Code: Select all

span#fb-auth small {
   width: 20px;
   height:13px; 
   background: transparent url('../images/fbauth.png') no-repeat 0 -1px;
   text-indent: -999em;
   display: block;
   float: left;
   -moz-box-shadow:inset 0px 1px 0px 0px #aab5cd;
   -webkit-box-shadow:inset 0px 0px 1px 0px #556a9a;
   box-shadow:1px 0px #556a9a;
   border-right: 1px solid #a0aecd;
   margin: 2px 7px 0 0
}

span#fb-auth {
   -webkit-box-shadow: inset 0px 1px 0px 0px #aab5cd;
   -moz-box-shadow: inset 0px 1px 0px 0px #aab5cd;
   box-shadow: inset 0px 1px 0px 0px #aab5cd;
   background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #798db9), color-stop(1, #556b9b) );
   background: -webkit-linear-gradient( center top, #798db9 5%, #556b9b 100% );
   background: -moz-linear-gradient( center top, #798db9 5%, #556b9b 100% );
   background: -o-linear-gradient( center top, #798db9 5%, #556b9b 100% );
   background: -ms-linear-gradient( center top, #798db9 5%, #556b9b 100% );
   background: linear-gradient( center top, #798db9 5%, #556b9b 100% );
   background-color: #798db9;
   border: 1px solid #4d576b;
   display: inline-block;
   color: #fff;
   font-family: arial;
   font-size: 12px;
   font-weight: bold;
   padding: 3px 14px 8px 6px;
   text-decoration: none;
   text-shadow: 1px 1px 0px #445375;
   cursor: pointer;
   height: 14px;
   line-height: 19px;
}

span#fb-auth:hover {
   background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #556b9b), color-stop(1, #798db9) );
   background: -webkit-linear-gradient( center top, #556b9b 5%, #798db9 100% );
   background: -moz-linear-gradient( center top, #556b9b 5%, #798db9 100% );
   background: -o-linear-gradient( center top, #556b9b 5%, #798db9 100% );
   background: -ms-linear-gradient( center top, #556b9b 5%, #798db9 100% );
   background: linear-gradient( center top, #556b9b 5%, #798db9 100% );
   background-color: #556b9b;
}


Them go to template parameters and enable override.css file.
On that file, add the following:

Code: Select all

#gkPopupOverlay,#gkPopupLogin {background: #fff;}
.gkPopupWrap {padding: 35px;border: none;}
.gkPopupWrap h3 {margin: 0 0 18px;font-size: 32px;line-height: 32px;}
#gkPopupOverlay {background: #000;}
#login-form ul {   border-top: 1px solid #E7E7E7;overflow: hidden;padding: 12px 0 0;}
#loginForm li {background-image: none; padding-left: 0}

/* Login with Facebook button */
span#fb-auth small {
   width: 20px;
   background: transparent url('../images/fbauth.png') no-repeat 0 2px;
   text-indent: -999em;
   display: block;
   float: left;
   border-right: 1px solid #a0aecd;
   margin: 2px 7px 0 0;
   height: 17px;
}

span#fb-auth {
   background-color: #798db9;
   border: 1px solid #4d576b;
   display: inline-block;
   color: #fff;
   font-family: arial;
   line-height: 22px;
   font-size: 12px;
   font-weight: bold;
   margin: 12px 0 6px;
   padding: 2px 24px 7px 12px;
   text-decoration: none;
   text-shadow: 1px 1px 0px #445375;
   cursor: pointer;
   height: 17px;

   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;

   -webkit-transition: background-color 0.2s ease-out;
   -moz-transition: background-color 0.2s ease-out;
   -o-transition: background-color 0.2s ease-out;
   -ms-transition: background-color 0.2s ease-out;
   transition: background-color 0.2s ease-out;
   position: relative;
   top: -3px;
}

span#fb-auth:hover {
   background-color: #556b9b;
}

.login span#fb-auth {
   margin: 6px 0 0 10px;
}


Looks similar this way

Cheers

Hi again

You probably are making some confusion.
The Facebook button text is already "Log in with Facebook"

If you want to change the Facebook button text, you can do it on ../language/en-GR/en-GB.tpl_gk_musicity.ini on:

Code: Select all

TPL_GK_LANG_FB_LOGIN_TEXT="Log in with Facebook"

In other hand, if you are referring to change "Sign in" text button like it show the screenshot:

screen.png

You can change it also on same page:

Code: Select all

TPL_GK_LANG_REGISTER="Sign In"

Cheers