Joomla Templates Club 406,261 posts

[john777 Friend john777Join date: December 2010Posts: 47Downloads:0Uploads:24 Thanks: 7]

#158444

hi ,

Firstly wishing the entire team of JA a very happy new year,
I have two issues using ja social,

I want to change the logo position to absolute center from its default position., like that pyro template logo position,

2. how do i change ja login position to its left, as some of the letters are hiding behind cpanel,

[aman204 Friend aman204Join date: January 2010Posts: 1945Downloads:0Uploads:43 Thanks: 11 Thanked: 418 times in 356 posts]

#370774

1) Change this::

h1.logo, div.logo-text {template.css(line 642)
float: left;
position: relative;
z-index: 1;
}

to

h1.logo, div.logo-text {template.css(line 642)
margin:0 auto;
position: relative;
z-index: 1;
}

2) To avoid confusion, Can you please provide in screenshot marked with annotations as to how you want it to be

[john777 Friend john777Join date: December 2010Posts: 47Downloads:0Uploads:24 Thanks: 7]

#370899

Please find the attachments, I adjusted logo width to 600, so that is why the logo appears between left and center positions in the screenshot:
the text file is a replica of how my template.css looks like.
the above suggestion did not fix the issue, I am not sure if I did exactly how you want me to do,

my second issue: jA login’s module position usually hide behind the cpanel tab, in other words th name :create an account” hide behind cpanel, which looks unprofessional, I want to change the ja login module position to furthur left.

Please help

---

Attachments:

1. 

[john777 Friend john777Join date: December 2010Posts: 47Downloads:0Uploads:24 Thanks: 7]

#371019

in this new screenshot, i used fluid for my template width 1320, I could not make changes to the template.css file as i don’t see any as suggested at the line 642,

below are the codings for the logo which i see on my ja_social template.css,

“
h1.logo, div.logo-text h1 { font-size: 250%; line-height: 1; margin:0 15px;}

/* Logo Image —*/
h1.logo { float: none; margin: 40px auto 20px; width: 300px; height: 100px; }

h1.logo a {

background: url(../images/logo.png) no-repeat left;
display: block;
width: 300px;
height: 100px;
}

/* Logo Text —*/

div.logo-text h1 {

font-size: 280%;

font-family: Arial, sans-serif;

font-weight: bold;

margin: 0;

padding: 0 0 0 15px;
}

div.logo-text h1 a {
color: #fff;
text-decoration: none;
text-shadow: 0 1px 1px #0367A6;
}

i changed the code for the logo in ja-social, as it was in the template ja–droid to make the logo look exactly in the center of the template, please help,

<em>@john777 213779 wrote:</em><blockquote>Please find the attachments, I adjusted logo width to 600, so that is why the logo appears between left and center positions in the screenshot:
the text file is a replica of how my template.css looks like.
the above suggestion did not fix the issue, I am not sure if I did exactly how you want me to do,

my second issue: jA login’s module position usually hide behind the cpanel tab, in other words th name :create an account” hide behind cpanel, which looks unprofessional, I want to change the ja login module position to furthur left.

Please help</blockquote>

---

Attachments:

1. 

[aman204 Friend aman204Join date: January 2010Posts: 1945Downloads:0Uploads:43 Thanks: 11 Thanked: 418 times in 356 posts]

#371031

To avoid confusion, It would be really nice if you could please mark screenshot with annotations as to what you need.

The above css suggestion was quite similar to making adjustment as JA pyro’s logo

You can also use this screenshot tool to make annotations 🙂
http://www.techsmith.com/snagit/

[john777 Friend john777Join date: December 2010Posts: 47Downloads:0Uploads:24 Thanks: 7]

#371215

Aman, I am so sorry, I would normally do the marking on screenshots, but unfortunately my windows crashed very recently and I am using ubuntu for browsng or any other activity, and I am not so familiar with ubuntu or any of its tool for this purpose, Please observe this tiny bit of screenshot i am sending you now, the logo is not at the center of the template , it is close to the center but it is not, I would like to have my logo right under top panel tab,

here is the second issue, you can observe in the screenshot that JA login position or log in and create an account tabs/buttons/text hide behind the cpanel which is farther top right corner of the screenshot, Is there any thing i can do so that the text does not hide behind the cpanel, and the logo stays exactly at the center/middle of the template, no matter what the size of the template width was,

Extra info: I am using fluid for template width and the width i specified in the backend/admin/template manager was 1320, this is when I notice the the text ‘create an account’ is hiding behind the cpanel.

here is the URL http://shahhah.org/

thanks a trillion in advance, I really need to continue doing some template modifications as soon as I am done with it, I loved ja social for its jomsocial theme and agora theme and ofcourse many other templates too, I joined the club of joomlart inspite of being a club member in yootheme, rockettheme and gavick respectively, This is my first issue and I really appreciate some help!, and I am so sorry for not providing you approriate screenshots all this while.

---

Attachments:

1. 

[aman204 Friend aman204Join date: January 2010Posts: 1945Downloads:0Uploads:43 Thanks: 11 Thanked: 418 times in 356 posts]

#371280

Please turn off css compression in template parameters to give in right line and file reference

[john777 Friend john777Join date: December 2010Posts: 47Downloads:0Uploads:24 Thanks: 7]

#371343

<em>@aman204 214273 wrote:</em><blockquote>Please turn off css compression in template parameters to give in right line and file reference</blockquote>

I am not sure what you mean, but I understand that you want me to turn off the css compression on the backend template parameters, which I did as suggested, I do not see any changes on the frontend.

please let me know, if you mean to redo the css changes which I already did, but with css compression in off mode in order to make the changes effective.

Please find the attached screenshot.

---

Attachments:

1. 

[aman204 Friend aman204Join date: January 2010Posts: 1945Downloads:0Uploads:43 Thanks: 11 Thanked: 418 times in 356 posts]

#371356

Yes, I wanted you to turn off css compression as given in screenshot 🙂 thanks!

1) As your logo width is around 200px, You can set in width values here accordingly::

h1.logo a {template.css (line 342)
background: url(“../images/logo.png”) no-repeat scroll left center transparent;
display: block;
height: 100px;
width: 300px;
}

and

h1.logo {template.css (line 340)
float: none;
height: 100px;
margin: 40px auto 20px;
width: 300px;
}

and logo will appear centered 🙂

2) You can increase right value here accordingly::

#ja-headtools {template.css (line 454)
position: absolute;
right: 15px;
top: 5px;
}

[john777 Friend john777Join date: December 2010Posts: 47Downloads:0Uploads:24 Thanks: 7]

#371425

hurray!!! that worked, thanks a ton., pay a visit to shahhah.org if you have any questions about christ, god bless you.,

[Author]

Posts