Joomla Templates Club 406,261 posts

[deveshi Friend deveshiJoin date: October 2013Posts: 37Downloads:0Uploads:5 Thanks: 7 Thanked: 2 times in 1 posts]

#191511

Greetings,

May I ask for some help with the code for adding a module position directly to the left of the current login button on the Mitius template so that I can place the Jomsocial Facebook connect module there.

I would like the end product to look something like this:

Thank you very much for any help you can offer.

---

Attachments:

1. 

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

#509509

I’m thinking THIS"> may be helpful.

😎

1 user says Thank You to TomC for this useful post

1. deveshi

[deveshi Friend deveshiJoin date: October 2013Posts: 37Downloads:0Uploads:5 Thanks: 7 Thanked: 2 times in 1 posts]

#509735

Hey Tom,

Sorry about the delayed reply, I’ve been working at this over the weekend in an attempt to figure this out before contacting you again and Ive managed to get half way. I think I am still having issues with the CSS styling to get the module position to sit where I want it.

I’ve managed to create the module position in the correct area via the PHP file and it is showing up on the backend module positions on account of the XML file. However, the new module position is sitting above the login button as opposed to directly next to it.

I have added to the CSS file as follows:

/*deveshi facebook login */
.facebook-login {
padding: 0;
border: 1px solid #ccc
position: absolute;
left: 470px;
top: 40px;
width: 265px;
z-index: 999;
}


This is the same code as per your tutorial except I have changed the ‘right’ attribute to ‘left’ due to where I would like it positioned on the page.

Here is the link to the website so you can see for yourself what is going on.

http://www.inferis.co.uk

I sincerely thank you for your help with this matter.

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

#509739

Does it still sit atop the login button if you adjust the “top” and “left” properties a bit?

I would try to play around with the property values in Firebug, but I don’t believe you have anything published in the new module position at the moment for me to see if changing the properties mentioned above would change anything.

1 user says Thank You to TomC for this useful post

1. deveshi

[deveshi Friend deveshiJoin date: October 2013Posts: 37Downloads:0Uploads:5 Thanks: 7 Thanked: 2 times in 1 posts]

#509851

Hey,

I’ve continued to work on this to no avail, but I think you are right in that it would seem the facebook login module is not appearing in the new module position (see image 1 below the highlighted line of code ). It would appear from this that the module is still being dropped into the “top-login” module position.

However I do not understand why this would be the case. I have successfully created the new module position as you can see from the template layout (image 2 ) and I have selected the correct module position in the backend for the facebook module (image 3 ).

I did attempt to play with the CSS code as you suggested using Chrome inspect element I cannot seem to find the new CSS code that we entered into the template.css file. Upon inspecting the facebook login element it appears to me that the CSS is being read from the bootstrap.CSS file rather than the template.CSS file for this module (see image 1) except in the case of some inherited code from the body (template.css:241). Could this be the issue?

I am sorry about this. I am new to CSS and the coding side of website development… I expect this is completely down to user error lol.

Again your help with this is very much appreciated.

---

Attachments:

1. 
2. 
3. 

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

#509934

Hi guys,

One row should be equal to ‘span12’, as I can see from the header block of your site, it has structure like this:

<div class=”row”>
<div class=”span8″>
………………………..
<div class=”span4″>
…………………………
<div class=”span4″>
</div>

You can open the header block you changed before and edit the span like this:

1 user says Thank You to Saguaros for this useful post

1. deveshi

[deveshi Friend deveshiJoin date: October 2013Posts: 37Downloads:0Uploads:5 Thanks: 7 Thanked: 2 times in 1 posts]

#509969

I got it working!

I had made an error in the code in the header.php file identifying the facebook-login module.

Thanks so much for your help guys, you’ve been awesome.

[Author]

Posts