Login Module Position to Nomal Module Position

I would like to know is there a way to convert the LOGIN module position:

I am using CB login with facebook connect in the LOGIN module position. I would like to convert this to a normal module position so that the login will not have the pop up and the facebook login will be visible, and once logged in the profile image and logout will be visible in this position.

Thanks

Hi,

I don't really understand your idea, but if you want to get rid of the popup, just open file /templates/gk_musicity/js/gk.scripts.js and remove login popup section:

Code: Select all

// login popup
   if(document.id('btnLogin') || document.id('btnRegister')) {
         var popup_overlay = document.id('gkPopupOverlay');
      popup_overlay.setStyles({'display': 'block', 'opacity': '0'});
      popup_overlay.fade('out');
      var opened_popup = null;
      var popup_login = null;
      var popup_login_h = null;
      var popup_login_fx = null;
      var popup_register = null;
      var popup_register_h = null;
      var popup_register_fx = null;
      
      if(document.id('btnLogin')) {
         popup_login = document.id('gkPopupLogin');
         popup_login.setStyle('display', 'block');
         popup_login_h = popup_login.getElement('.gkPopupWrap').getSize().y + 8;
         popup_login_fx = new Fx.Morph(popup_login, {duration:200, transition: Fx.Transitions.Circ.easeInOut}).set({'opacity': 0, 'height': 0, 'margin-top':0});
         document.id('btnLogin').addEvent('click', function(e) {
            new Event(e).stop();
            popup_overlay.fade(0.85);
            popup_login_fx.start({'opacity':1, 'margin-top': -popup_login_h / 2, 'height': popup_login_h});
            opened_popup = 'login';
         });
      }
      
      if(document.id('btnRegister')) {
         popup_register = document.id('gkPopupRegister');
         popup_register.setStyle('display', 'block');
         popup_register_h = popup_register.getElement('.gkPopupWrap').getSize().y + 8;
         popup_register_fx = new Fx.Morph(popup_register, {duration:200, transition: Fx.Transitions.Circ.easeInOut}).set({'opacity': 0, 'height': 0, 'margin-top':0});
         document.id('btnRegister').addEvent('click', function(e) {
            new Event(e).stop();
            popup_overlay.fade(0.85);
            popup_register_fx.start({'opacity':1, 'margin-top': -popup_register_h / 2, 'height': popup_register_h});
            opened_popup = 'register';
            showGKRecaptcha('gk_recaptcha',  'submit_1', 'recaptcha_required_1');
         });
      }
      
      popup_overlay.addEvent('click', function() {
         if(opened_popup == 'login')   {
            popup_overlay.fade('out');
            popup_login_fx.start({
               'opacity' : 0,
               'height' : 0,
               'margin-top': 0
            });
         }
         
         if(opened_popup == 'register') {
            popup_overlay.fade('out');
            popup_register_fx.start({
               'opacity' : 0,
               'height' : 0,
               'margin-top': 0
            });
         }   
      });
   }
});


Hi,

I don't really understand your idea, but if you want to get rid of the popup, just open file /templates/gk_musicity/js/gk.scripts.js and remove login popup section:

Code: Select all

// login popup
   if(document.id('btnLogin') || document.id('btnRegister')) {
         var popup_overlay = document.id('gkPopupOverlay');
      popup_overlay.setStyles({'display': 'block', 'opacity': '0'});
      popup_overlay.fade('out');
      var opened_popup = null;
      var popup_login = null;
      var popup_login_h = null;
      var popup_login_fx = null;
      var popup_register = null;
      var popup_register_h = null;
      var popup_register_fx = null;
      
      if(document.id('btnLogin')) {
         popup_login = document.id('gkPopupLogin');
         popup_login.setStyle('display', 'block');
         popup_login_h = popup_login.getElement('.gkPopupWrap').getSize().y + 8;
         popup_login_fx = new Fx.Morph(popup_login, {duration:200, transition: Fx.Transitions.Circ.easeInOut}).set({'opacity': 0, 'height': 0, 'margin-top':0});
         document.id('btnLogin').addEvent('click', function(e) {
            new Event(e).stop();
            popup_overlay.fade(0.85);
            popup_login_fx.start({'opacity':1, 'margin-top': -popup_login_h / 2, 'height': popup_login_h});
            opened_popup = 'login';
         });
      }
      
      if(document.id('btnRegister')) {
         popup_register = document.id('gkPopupRegister');
         popup_register.setStyle('display', 'block');
         popup_register_h = popup_register.getElement('.gkPopupWrap').getSize().y + 8;
         popup_register_fx = new Fx.Morph(popup_register, {duration:200, transition: Fx.Transitions.Circ.easeInOut}).set({'opacity': 0, 'height': 0, 'margin-top':0});
         document.id('btnRegister').addEvent('click', function(e) {
            new Event(e).stop();
            popup_overlay.fade(0.85);
            popup_register_fx.start({'opacity':1, 'margin-top': -popup_register_h / 2, 'height': popup_register_h});
            opened_popup = 'register';
            showGKRecaptcha('gk_recaptcha',  'submit_1', 'recaptcha_required_1');
         });
      }
      
      popup_overlay.addEvent('click', function() {
         if(opened_popup == 'login')   {
            popup_overlay.fade('out');
            popup_login_fx.start({
               'opacity' : 0,
               'height' : 0,
               'margin-top': 0
            });
         }
         
         if(opened_popup == 'register') {
            popup_overlay.fade('out');
            popup_register_fx.start({
               'opacity' : 0,
               'height' : 0,
               'margin-top': 0
            });
         }   
      });
   }
});


I am using CB connect for my login, with the popup how do I make the FB login button show instead of the [sign in] button from the template. see attached image. Click the login at site http://www.secbattles.com to see the action of the sign in button in the login popup

Try adding this code to CSS Override:

Code: Select all

.facebook_button{
background-image: url("images/icon.png") !important;
}


I will look like this http://easycaptures.com/fs/uploaded/580/9662309977.jpg

Try adding this code to CSS Override:

Code: Select all

.facebook_button{
background-image: url("images/icon.png") !important;
}


I will look like this http://easycaptures.com/fs/uploaded/580/9662309977.jpg

Thanks that did work to change the button to FB blue but the f is mission can tell if it's being cut off and also can we turn off the color change on the hover.

Oh sorry please change the image url in that code to http://www.secbattles.com/components/co ... s/icon.png

Oh sorry please change the image url in that code to http://www.secbattles.com/components/co ... s/icon.png

Don That worked great. Now I would like to stop the color change when you hover over the button. see attachment

Open file: /templates/gk_musicity/css/style1.css

Remove this code:

Code: Select all

.button:hover,
.button:focus,
button:hover,
button:focus,
a.readon:hover,
a.readon:focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
input[type="button"]:hover,
input[type="button"]:focus,
.color .button,
.color button,
.color a.readon,
.color input[type="submit"],
.color input[type="button"],
.color2 .button,
.color2 button,
.color2 a.readon,
.color2 input[type="submit"],
.color2 input[type="button"],
.noborder1 .button,
.noborder1 button,
.noborder1 a.readon,
.noborder1 input[type="submit"],
.noborder1 input[type="button"],
.gkPopupWrap button,
.gkPopupWrap .button,
.custom_plupload_buttons a:hover { background: transparent url('../images/style1/color_bg.png') no-repeat 0 0!important; }


Let me know if it helps.

Open file: /templates/gk_musicity/css/style1.css

Remove this code:

Code: Select all

.button:hover,
.button:focus,
button:hover,
button:focus,
a.readon:hover,
a.readon:focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
input[type="button"]:hover,
input[type="button"]:focus,
.color .button,
.color button,
.color a.readon,
.color input[type="submit"],
.color input[type="button"],
.color2 .button,
.color2 button,
.color2 a.readon,
.color2 input[type="submit"],
.color2 input[type="button"],
.noborder1 .button,
.noborder1 button,
.noborder1 a.readon,
.noborder1 input[type="submit"],
.noborder1 input[type="button"],
.gkPopupWrap button,
.gkPopupWrap .button,
.custom_plupload_buttons a:hover { background: transparent url('../images/style1/color_bg.png') no-repeat 0 0!important; }


Let me know if it helps.

This Worked Great

I'm really glad to know that, is there any else problem that I may assist you with?

Regards,