Joomla Templates Club 406,261 posts

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

#446136

I really do not understand why the suggested modifications are not taking effect. I tested them within Firebug and they worked as they should. Are you clearing your JAT3 cache after making the changes – just in case?

[shafee_howard Friend shafee_howardJoin date: March 2012Posts: 38Downloads:0Uploads:15 Thanks: 15 Thanked: 1 times in 1 posts]

#446212

I’m unclear too.

Were you able to make ‘header’ and ‘mainnav’ actually center in the viewport? That’s great!

I cleared the browser cache — probably that’s not what you mean by the JA T3 cache. In any case the changes I made DID have an effect, just not what I want. With the margin-left of 490 the two were shifted way to the right — on my 1024×600 screen they start halfway across. . This is true in all the browsers I tried. I did try with margin-left of zero, that brings them all the way over the the left side of the viewport,

I could set a small margin that would line them up with the rest of the template, but that would only look right on a WSVGA display.

I’m looking at the served HTML (view source) and wow, there are SO many CSS files it’s hard to imagine finding any particular class declaration. I guess that’s what FireBug does.

Anyway I’d appreciate hearing where to go from here — HB

---

Attachments:

1. 

[shafee_howard Friend shafee_howardJoin date: March 2012Posts: 38Downloads:0Uploads:15 Thanks: 15 Thanked: 1 times in 1 posts]

#446333

I was just thinking, if someone were using a 1920 x 1080 display, a 940 px block with a 490 px margin would come out perfectly centered. But only w/ that resolution. — HB

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

#446335

Is your site at a fixed width – center aligned?

[shafee_howard Friend shafee_howardJoin date: March 2012Posts: 38Downloads:0Uploads:15 Thanks: 15 Thanked: 1 times in 1 posts]

#446796

I have width set at 930, actually. A don’t see any alignment setting, maybe I missed that. Where is it ??

Thanks — Howard Ballinger

---

Attachments:

1. 

[shafee_howard Friend shafee_howardJoin date: March 2012Posts: 38Downloads:0Uploads:15 Thanks: 15 Thanked: 1 times in 1 posts]

#447656

Hi, I still need help to be able to center those two top blocks on the screen. What can I do now ????

Thanks — Howard Ballinger

[swissa Friend swissaJoin date: November 2011Posts: 1955Downloads:7Uploads:277 Thanks: 175 Thanked: 717 times in 572 posts]

#447659

Sorry for butting in here…

I tried this on my mac and the following changes helped to centre everything. Make a copy of the template.css first just in case.

@641 change the margin-left: 490px to margin:auto;

#ja-header {background: none repeat scroll 0 0 #C33;
margin-left: auto;
width: 930px;
}

@698 deleting the margin-left: 490px; and adding margin-left: auto; and margin-right: auto seems to work

#ja-mainnav {background: url("../images/mainnav-bg.gif") repeat-x scroll left bottom #C33;
margin-left: auto;
margin-right: auto;
padding-bottom: 6px;
width: 930px;
}

and finally for the logo @ 652 simply delete the margin-left: -30px;

h1.logo, div.logo-text h1 {font-size: 250%;
line-height: 1;
}

I’m sure Tom will let us know if this is good code or not but as I said, it works on my screen so fingers crossed for you.

Regards

2 users say Thank You to swissa for this useful post

1. shafee_howard
2. Phill

[shafee_howard Friend shafee_howardJoin date: March 2012Posts: 38Downloads:0Uploads:15 Thanks: 15 Thanked: 1 times in 1 posts]

#448074

By George, you’ve got it !! (I think…)

I’ll have to check it on some other monitors to make sure it stays centered but it looks like it will. What’s the resolution on your monitor, Swissa ?? Both of my machines are at 1024px width; If I narrow the window but still keep it > 930px, the whole template stays centered 🙂

And Tom, how does this look to you ??

Thanks — Howard Ballinger

[swissa Friend swissaJoin date: November 2011Posts: 1955Downloads:7Uploads:277 Thanks: 175 Thanked: 717 times in 572 posts]

#448169

Hi Howard,

My macbook is at 1280 and the attached monitor is at 1440 and it works on these. I really hope it works for you on other monitors. If I were you I would do one other thing and remove the map image from the red @ 646

#ja-header .main {

• background: url(../images/map-bg.png) no-repeat left bottom;
• padding: 8px 0 15px 0;

}

Just change to

#ja-header .main {

• padding: 8px 0 15px 0;

}

and if you want to lose the red altogether just delete the padding too.

#ja-header .main {

• }

Wish you the best.

2 users say Thank You to swissa for this useful post

1. Phill
2. shafee_howard

[shafee_howard Friend shafee_howardJoin date: March 2012Posts: 38Downloads:0Uploads:15 Thanks: 15 Thanked: 1 times in 1 posts]

#448318

Actually I did this

#ja-header .main {padding: 0;
}

There must have been some padding inherited from upstream. Anyway good suggestion, I have what I wanted — thanks. And on to the next hurdle (I’ll start a new thread) — HB

[Author]

Posts