Joomla Templates Club 406,261 posts

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#397361

Hi tcraw1010,

Here is the detail guide to integrate JA SOCIAL login button to JA RAVE, in fact this can be applied to any template.
We choose to put it in a position like JA Social, on the upper right conner, here are the steps:
1. open templatesja_raveblocksmainnav.php, add this code to the top:


<?php if($this->countModules('ja-login')) : ?>
<div id="ja-headtools" class="ja-headtool">
<ul>
<jdoc:include type="modules" name="ja-login" />
</ul>
</div>
<?php endif; ?>


2. open templatesja_ravetemplateDetails.xml, add this into the positions list:


<position>ja-login</position>


we will get:


<positions>
<position>hornav</position>
<position>breadcrumbs</position>
<position>search</position>
<position>banner</position>
<position>left</position>
<position>right</position>
<position>top</position>
<position>user1</position>
<position>user2</position>
<position>user3</position>
<position>user4</position>
<position>user5</position>
<position>user6</position>
<position>user7</position>
<position>user8</position>
<position>user9</position>
<position>user10</position>
<position>user11</position>
<position>footer</position>
<position>syndicate</position>
<position>debug</position>
<position>ja-login</position>
</positions>


3. download and install Ja login (I assume that you are using J1.5):
http://www.joomlart.com/forums/downloads.php?do=cat&id=10403

4. go to Module manager and assign JA login to position “ja-login”, save.

5. open templatesja_ravecsstemplate.css, add this to the end:

/* 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;
}

Done, you will a get result like this on Ja rave. Now the remaining work is customizing the its style to fit ja rave.

2 users say Thank You to Ninja Lead for this useful post

1. TomC
2. himangi

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#397462

THANK YOU, hungnd . . . . your solution worked – EXCEPT that the box for the “Create An Account” fields is displaying BEHIND the main nav bar – when it should display over/in front of it. (This is somewhat odd because the “Login” box displays over the main nav menu … so why wouldn’t the “Create An Account” box?)

I tried adjusting the z-index in the style.css file within the ja-login module as below, but this did not work

#jabox-overlay {

width: 100% !important;
height: 100% !important;
min-height: 100% !important;
position: fixed !important;
background: #fff;
z-index: 999;
top: 0;
left: 0;

}

What do I need to adjust to get the “Create An Account” box to display over/on-top of the main nav bar ??

THANK YOU for your efforts as well, himangi !!!

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#397510

Still hoping for some assistance with this final aspect . . .

[himangi Friend himangiJoin date: April 2011Posts: 1406Downloads:1Uploads:86 Thanks: 21 Thanked: 345 times in 332 posts]

#397553

Hi,

I am not sure why but z-index value 11 is given higher priority than value 999. Please try changing z-index value to 9 in the following code in your template.css file

#ja-mainnav {
line-height: 1;
position: relative;
z-index: 11;
}

1 user says Thank You to himangi for this useful post

1. TomC

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#397668

That worked, Himangi – THANK YOU !!! 😀

Incidentally, the “template.css” file that needed to be changed was within plugins/system/jat3/base-themes/default/css Having become accustomed to checking this path regularly – though i still don’t quite understand the structural logic behind burying these files deep within the “plugins” file structure – I thought to look there first. Low and behold, there is was at line 700.

THANK YOU, too, to Hungnd as well for the CSS code fix – which turned out to be the winning/working solution. 😀

[himangi Friend himangiJoin date: April 2011Posts: 1406Downloads:1Uploads:86 Thanks: 21 Thanked: 345 times in 332 posts]

#397763

Hi,

Glad you problem is solved! 🙂

If you have made changes I suggested in the plugins/system/jat3/base-themes/default/css/template.css files, these will be overwritten when you upgrade the plugin, so please make whatever changes you want, in the templates/your_template/css/template.css file only, so that your changes wont get lost.

<blockquote>though i still don’t quite understand the structural logic behind burying these files deep within the “plugins” file structure – I thought to look there first</blockquote>
All the common files like menu functionality, layouting blocks etc. have been placed in the plugin, so that if you dont have any file in your T3 template, you will still have some specific layout and styling for your website..

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#397879

<em>@himangi 248810 wrote:</em><blockquote>
All the common files like menu functionality, layouting blocks etc. have been placed in the plugin, so that if you dont have any file in your T3 template, you will still have some specific layout and styling for your website..</blockquote>
So I guess the key is to BACKUP the block/default files within the plugins folder OFTEN.

😉

[himangi Friend himangiJoin date: April 2011Posts: 1406Downloads:1Uploads:86 Thanks: 21 Thanked: 345 times in 332 posts]

#397965

No need to backup those specific files, since files remain there until you uninstall the plugin.. My point is whatever changes you need to make in template, should be done strictly from template files. if you find out that you need to make changes in the file which is present in plugin but not in the T3 template, you should copy that file from plugin and place it at the same place as in plugin (you may need create folders sometimes to create the same path for the file like it is in plugin) and make changes in this file which you have placed in the template..

I hope it’s more clear now..

[Author]

Posts