Joomla Templates Club 406,261 posts

[danisjboy Friend danisjboyJoin date: September 2010Posts: 14Downloads:0Uploads:0 Thanks: 2 Thanked: 1 times in 1 posts]

#155259

Hi, this will be my first post since I got my one year membership just some days ago. I’m already way ahead with designing my new website, http://norshine.no. But I have some questions about the new template Portfolio:

1. Is it possible for me to use the nice drop down login (on the top-right) from the Ja Social-template in my Ja Portfolio template? If so, how can I manage that?

2. Also the very nice drop down “Top Panel” from Ja Social – is it possible to get this in Ja Portfolio as well?

I’m know very well how to handle Joomla, but my programming skills aren’t very advanced, so if there are any code that needs to be added/edited, I would need this from one of you guys, please.

I’ll wait excited to see how this forum will manage to answer my questions. And thanks to the developers of those VERY nice templates. Way ahead of anyone else!

EDIT (Toppanel only): I have managed to add the Top Panel Module to my site, and are at the moment trying to fix the CSS. But I got a problem. Why does the drop down panel slide BEHIND the navigation bar? How can I fix this?

EDIT 2 (Toppanel only): Well, I actually managed to fix it myself *applause*, by editing the z-index property of the main wrapper of the Top Panel to a higher value.

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

#359027

Dear danisjboy,

Have you solved all the problems?

[danisjboy Friend danisjboyJoin date: September 2010Posts: 14Downloads:0Uploads:0 Thanks: 2 Thanked: 1 times in 1 posts]

#359178

I don’t know how to get the Ja Login module shown as in Ja Social (in the top corner).

And I have a problem with styling the Top Panel. If you see on my site http://norshine.no, you’ll see that the modules in the top panel are shown below each other, which is wrong. I do have set “Col” in the Top Panel administration, so I think its some CSS I need to edit to get them next to each other. You have any clue?

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#359232

hmm

Oh, to make those modules to display well on the panel, you need to create css styles for them, i recommend you should get css from ja social : /templates/ja_social/css/mod_jatoppanel.css

[danisjboy Friend danisjboyJoin date: September 2010Posts: 14Downloads:0Uploads:0 Thanks: 2 Thanked: 1 times in 1 posts]

#359454

Thanks for the tip. Copied some of the code from /templates/ja_social/css/mod_jatoppanel.css into modules/ja-toppanel/css/style.css and it now shows as I would like it to.

Then there’s only the fancy login to go. How do I get the Ja-Login from Ja Social at the top-left of Ja Portfolio?

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#359511

You can download the ja login module in here: http://www.joomlart.com/forums/downloads.php?do=file&id=1468

[danisjboy Friend danisjboyJoin date: September 2010Posts: 14Downloads:0Uploads:0 Thanks: 2 Thanked: 1 times in 1 posts]

#359525

Yes, but how do i assign a module position for the login box? And do i need to import some css from Ja Social to have it look the same way?

EDIT: I’ve added the Ja Login Module, and the links are appearing at the top, but not quite as they should. When i press them the login forms and so on works nicely. But how do I fix the links to be next to each other and with the small icons (images have been added to the right folder)?

Have a look: http://norshine.no

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#359646

Yes, and here is the code for styling header tools:

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

you find them into the /templates/ja_social/css/template.css file:

[danisjboy Friend danisjboyJoin date: September 2010Posts: 14Downloads:0Uploads:0 Thanks: 2 Thanked: 1 times in 1 posts]

#359680

I appreciate that you are helping me with this issue, but I have already added those stylings to the Portfolio template.css and that hasn’t fixed the login style completely, only partly. I don’t know why this is, but I might think it’s because I need to add a custom module position at the top-left corner for the login. Right now the Ja Login is added to the “top” position (the same position in which the contact and phone number details are added to). In Ja Social there is a seperate module position which is named “ja-login”.

If I’m right, that I need to make such a “ja-login” module position (in the top-left corner), how do I do that? Please advice 😀

[danisjboy Friend danisjboyJoin date: September 2010Posts: 14Downloads:0Uploads:0 Thanks: 2 Thanked: 1 times in 1 posts]

#359801

Does noone know how to fix my little problem with the Ja Login?

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#359981

You open the file: modulesmod_jalogintmpldefault.php and find the followingcode:

[PHP]defined(‘_JEXEC’) or die(‘Restricted access’); ?>[/PHP]

replace:
[PHP]defined(‘_JEXEC’) or die(‘Restricted access’); ?>
<div align=”ja-headtools”>
<ul>
[/PHP]

and add the following at end of the file:
[PHP]
</ul>
</div>
[/PHP]

2) css codes: i gave you in the post #8

#ja-headtools {
position: absolute;
right: 15px;
top: 5px;
}

replace:


#ja-headtools {
float:right;
}

🙂

1 user says Thank You to Saguaros for this useful post

1. danisjboy

[danisjboy Friend danisjboyJoin date: September 2010Posts: 14Downloads:0Uploads:0 Thanks: 2 Thanked: 1 times in 1 posts]

#360072

Thanks for the reply. Well, your little “code-edit” did remove the “list-dots” from the links, but the links are still on top of each other, and not alligned to the left. And the icons from the Ja Social template are not showing even though I’ve uploaded them to the correct folder and checked the CSS.

What am I doing wrong? 😀 And again I really appreciate your help.

[amir00251 Friend amir00251Join date: January 2011Posts: 113Downloads:38Uploads:13 Thanks: 13 Thanked: 11 times in 1 posts]

#377850

Hello guys, I have the same problem as mentioned in this post by danisjboy. My real problem is that I would have liked to have the JA Social template updated for J1.6. Now I have to work on Ja Portfolio to make it as close as possible to Ja Social (due to long delay expectation of J1.6 release for Ja Social). I really am not interested in Jomsocial or Agora or K2 and still due to late update of these I have to work on JA Portfolio. I subscribed up to Joomlart only because of JA Social and now I am in trouble.

Anyway, with this explanation about my situation, please help me and other guys to improve the Ja Portfolio. My problems and questions:
1- Same as danisjboy, I do have the Login and Create an Account but not at the top right and not with icons. I have done all the instructions in this forum and have the same problem.

2- By adding Date and Latest Update (and trying to add login) at top, current Custom HTML module has been disappeared. How can I have the JA Portfolio module under Date, Latest Update, Login part.

3- Finally, in Ja Social there is a top-panel module. I have now installed Ja top panel for J1.6 and have css problems to show it in right place and right format. One problem is that it dos not show as dropdown but if i put the modules inside it I can see the modules, second problem is that I cannot put this module (or any other module at the “top” position after adding last update and date and time in the left of this position?

Many thanks

[Author]

Posts