Joomla Templates Club 406,261 posts

[bollog Friend bollogJoin date: March 2011Posts: 43Downloads:0Uploads:14 Thanks: 5]

#162240

Hi everyone,

I would like to add ‘Login’ and ‘Create Account’ boxes, like in JA Social template, being displayed at ‘Top’ position of my JA Portfolio template for Joomla 1.5 and Joomla 1.6 installations. Correct me if am wrong but I guess this can be handled via the ‘Quick Contact’ mod_custom html tag. What is the piece of code that should be added?

Thanks in advance

Regards,

George

[Sherlock Friend SherlockJoin date: September 2014Posts: 11453Downloads:0Uploads:88 Thanks: 221 Thanked: 2478 times in 2162 posts]

#384692

Hi bollog,

You can do the task by yourself follow these steps
1) Download and install the module jalogin into your Portfolio site,assign it to the ‘top’ position
2) Install a JA Social quickstart
3) Copy these files,folders from the social to the corresponding ones of the Portfolio
templatesja_socialhtmlmod_jalogin

4) add below css into the template.css file of the Potfolio

/* Headtools —*/
#ja-headtools {
position: absolute;
right: 15px;
top: 5px;
}

#ja-headtools ul {
float: left;
margin: 0;
padding: 0;
white-space: nowrap;
}

#ja-headtools li {
background: none;
display: inline;
line-height: normal;
margin: 0;
padding: 0;
}

#ja-headtools li a {
display: block;
float: left;
color: #fff;
margin-left: 5px;
padding-bottom: 4px;
}

#ja-headtools li a span { display: block; padding: 2px 5px 2px 24px; }

#ja-headtools li a.login-switch span { background: url(../images/icons/icon-user.png) no-repeat 5px 2px; }
#ja-headtools li a.register-switch span { background: url(../images/icons/icon-register.png) no-repeat 5px 2px; }

#ja-headtools li a.login-switch.show span { background-image: url(../images/icons/icon-user-show.png); }
#ja-headtools li a.register-switch.show span { background-image: url(../images/icons/icon-register-show.png); }

#ja-headtools li a:hover {
background: url(../images/arrow-hover-90cw.png) no-repeat 10px center;
text-decoration: none;
}

#ja-headtools li a.show {
background: url(../images/arrow-up.gif) no-repeat center bottom;
color: #FFFFFF;
position: relative;
z-index: 1000;
}

#ja-headtools li a.show span {}

#ja-headtools li a.show span { display: block; }

#ja-user-register, #ja-user-login {
background: url(../images/ja-login-bg.gif) repeat-x left bottom #fff;
border: 1px solid #A1D5E9;
color: #333;
display: none;
height: auto;
overflow: hidden;
padding: 10px 15px;
position: absolute;
right: -15px;
text-align: left;
top: 21px;
z-index: 999;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 0 3px 5px rgba(0,0,0,.4);
-moz-box-shadow: 0 3px 5px rgba(0,0,0,.4);
-webkit-box-shadow: 0 3px 5px rgba(0,0,0,.4);
}

#ja-user-login .ja-login-user,
#ja-user-login .ja-login-password,
#ja-user-login .mod_login_remember {
float: left;
width: 145px;
display: block;
}

#ja-user-login .button,
#ja-user-register .button {
color: #fff;
background: url(../images/button_bg.png) 0 50% repeat-x #238db4;
border: 1px solid #238db4;
text-shadow: 0 1px 1px #4a4a4a;
}

#ja-user-login .button:hover,
#ja-user-register .button:hover {
border: 1px outset #fff;
}

.ja-login-links {
margin-top: 10px;
}

#ja-headtools .ja-login-links a {
color: #238db4;
padding: 0;
}

#ja-headtools li a.logout-switch {
display: inline;
float: none;
margin-left: 3px;
}

I hope these would help !

1 user says Thank You to Sherlock for this useful post

1. bollog

[bollog Friend bollogJoin date: March 2011Posts: 43Downloads:0Uploads:14 Thanks: 5]

#385032

Hi dathq,

Thanks for your support!

Regards

[Author]

Posts