Joomla Templates Club 406,261 posts

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

#167236

This guide will show you how to integrate a horizontal login – similar to JA Business and/or JA Social – to your Teline IV site . . . .

IMPORTANT NOTE:
You may need to disable or relocate your ‘search” module to a different location – otherwise things may not fit correctly. Either way, you will still need to fiddle around a bit with the css positioning and styling to get it right for your particular needs.

ALSO, you will need to create your own background images, or borrow some images from another template – such as JA Business or JA Social – for the dropdown login/registration boxes

1. Open templatesja_teline_ivblockstopbar.php and add this code at the bottom:


<?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_teline_ivtemplateDetails.xml, add this into the positions list:


<position>ja-login</position>

3. Download and install Ja Login module
FOR J1.5

FOR J1.7

4. Go to Module Manager and assign JA Login to position “ja-login” …. SAVE

5. Open templatesja_teline_ivcsstemplate.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 . . . . Now the remaining work is customizing the its style to fit your JA Teline IV based website.

As of the date the following screen-captures were taken, my site is still very much a work-in-progress, but these should give you an idea of the kind of basic results you can expect.

😎

---

Attachments:

1. 
2. 
3. 

3 users say Thank You to TomC for this useful post

1. skiwi
2. sedance
3. boontong

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

#405296

SUPPLEMENTAL “TOP NAV” TUTORIAL

I also decided I didn’t want the top “Headlines” option – so I disabled it and created a “top-nav” position and menu for some top navigation items. Here is how I went about accomplishing this (rather simple, actually) . . .

IMPORTANT NOTE:
As with the tutorial above, you will likely need to disable or relocate your ‘search” module to a different location – otherwise things may not fit correctly. Either way, you will still need to fiddle around a bit with the css positioning and styling to get it right for your particular needs.

ALSO, you will need to create your own background images or borrow some additional images from another template – such as JA Business or JA Social – for any additional touches, such as a small arrow before “Login” and/or “Create An Account.” Up to you.

1. Open templatesja_teline_ivblockstopbar.php and add this code in the middle:

?php if($this->countModules('top-nav')) : ?>
<div id="top-nav">
<jdoc:include type="modules" name="top-nav" />
</div>
<?php endif; ?>

2. Open templatesja_teline_ivtemplateDetails.xml, add this into the positions list:


<position>top-nav</position>


3. Open templatesja_teline_ivcsstemplate.css, add this to the end:


/* TOP NAV ---*/
#top-nav {
position: absolute;
top: 3px;
right: 200px;
}

#top-nav a { color: #000; text-decoration: none; }

#top-nav ul {
margin: 0;
padding: 2px 0;
}

#top-nav li {
display: inline;
margin: 0;
padding: 0;
line-height: 1.6;
background: url(../images/vline.gif) no-repeat center right;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
color: #000;
}

#top-nav li a {
display: inline;
padding: 0 10px;
font-size: 12px;
}


4. Go to your Menu Manager and create a new menu – call it whatever you like. I called mine “Top Nav.” Create some menu items as you would any menu … though, for the purposes of this top nav menu, it’s best/practical to keep it at ONE level (i.e. no sub nav items)

5. You should now have a new module within your Module Manager – under whatever name you designated when setting up your new menu. Assign this menu to the “top-nav” position.

This should do it. As with many tips-and-tricks, there may be some trial-and-error involved for your particular situation – e.g. custom styling, positioning, images, etc.

If this is something you might like for YOUR particular site, hope this has been helpful.

😎

---

Attachments:

1. 

1 user says Thank You to TomC for this useful post

1. sedance

[sedance Friend sedanceJoin date: May 2011Posts: 25Downloads:0Uploads:6 Thanks: 3 Thanked: 1 times in 1 posts]

#414040

Hello and thanks a lot for this guide!!

i have few problems with this:

i want the login horizontal. i dont know how tho fix.

and if i logout i become a “invalit token”, because the module want go back to the index.php
i change before all original header.php, all index.php with JURI::base like this:

[PHP]<?php
$app = & JFactory::getApplication();
$siteName = $app->getCfg(‘sitename’);
if ($this->getParam(‘logoType’, ‘image’)==’image’): ?>
<h1 class=”logo”>
<a href=<?php echo JURI::base(); ?> title=”<?php echo $siteName; ?>”><span><?php echo $siteName; ?></span></a>[/PHP]

i think thats the problem, but i cant fix in the tmpl/default.php from the login modul

hope you can help me.

---

Attachments:

1. 
2. 

[antoniliyn Friend antoniliynJoin date: November 2011Posts: 38Downloads:4Uploads:13 Thanks: 14 Thanked: 3 times in 1 posts]

#430807

Made in this manual. Everything works.
http://www.joomlart.com/forums/topic/additional-menu-at-the-top-position/

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

#430870

<em>@antoniliyn 290638 wrote:</em><blockquote>Made in this manual. Everything works.
http://www.joomlart.com/forums/topic/additional-menu-at-the-top-position/</blockquote>

Glad both pavit and I were able to assist you.

😎

[alain68 Friend alain68Join date: November 2009Posts: 20Downloads:132Uploads:3 Thanks: 6 Thanked: 1 times in 1 posts]

#439955

Hi,

I use the template anion. What is the procedure to create a HORIZONTAL LOGIN ?

Thanks,

Alain

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

#440033

<em>@alain68 302751 wrote:</em><blockquote>Hi,

I use the template anion. What is the procedure to create a HORIZONTAL LOGIN ?

Thanks,

Alain</blockquote>
The process is – for all intents and purposes – the same . . . . . give it a try.

[alain68 Friend alain68Join date: November 2009Posts: 20Downloads:132Uploads:3 Thanks: 6 Thanked: 1 times in 1 posts]

#440103

Hi,

I use anion version 2.5.

Under “templates/ja_anion/blocks” I have header.php and mainnav.php, no topbar.php. What file should I use ?

Alain

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

#442964

<em>@alain68 302955 wrote:</em><blockquote>Hi,

I use anion version 2.5.

Under “templates/ja_anion/blocks” I have header.php and mainnav.php, no topbar.php. What file should I use ?

Alain</blockquote>
Use header.php

Here is an additional tutorial for creating a new module position[/url] that may also assist you further.

[boontong Friend boontongJoin date: March 2009Posts: 9Downloads:8Uploads:0 Thanks: 2]

#443154

Hi Tom

Can I do the same for JA-NEX?

I tried following your instruction but still too slow to follow exactly.

Can you help please.

Thanks
Boontong

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

#443334

Boontong . . .
So that we don’t bog down this particular thread with trying to accomplish this with JA NEX, may I suggest you start a new thread regarding this issue (i.e. JA Login into JA Nex) within the JA NEX Section of the forum (http://www.joomlart.com/forums/forum/ja-nex/) and reference me in your question.

When I see your thread, I will respond and we can work this thing through, k?

😎

[Author]

Posts