Joomla Templates Club 406,261 posts

[sudheermatta Friend sudheermattaJoin date: June 2010Posts: 25Downloads:0Uploads:4 Thanks: 9]

#152768

I am a JA newbie, can you please help me align my website to the center?

I have tried solutions proposed in other templates and they dont seem to work for me.

eg: I tried from
(http://www.joomlart.com/forums/topic/center-everything/

Here is the best solution to alignt center for the site:

1) open the file: /templates/ja_lime/css/layout.css

and find codes:
HTML Code:
.main { width: 980px; max-width: 1200px; margin: 0 auto 0 55px; position: relative;}
and replace:
HTML Code:
.main { width: 980px; max-width: 1200px; margin: 0 auto; position: relative;}

It didnt help.

Can you please help?

Live site:

http://www.asys.us/index.php

http://www.asys.us direct link doesnt work, since the joomla site is not live yet.

Thanks,

[John Wesley Brett Moderator John Wesley BrettJoin date: July 2013Posts: 2142Downloads:17Uploads:26 Thanks: 175 Thanked: 645 times in 426 posts]

#350491

Sudheermatta,

It appears somehow a CSS setting has been changed.
Goto: [FONT=”Arial Black”]/templates/ja_halite/css/layout.css – line 29[/FONT]

Change from this:


.wrap {
clear:both;
width:1024px;
}


To this:


.wrap {
clear:both;
width:100%;
}


Have fun.
John.

[smitheringale Friend smitheringaleJoin date: December 2009Posts: 236Downloads:0Uploads:0 Thanks: 63 Thanked: 44 times in 18 posts]

#350497

I think the simplest way to centre align halite is to do this

Go to template.css and look for ja-wrapper

It probably looks something like ja-wrapper { }

Between the curly brackets, add this

ja-wrapper {
margin:auto; CENTRES SITE
width:981px; THE WIDTH OF THE SITE
background-color:#ffffff; MAKES THE BACKGROUND OF THE WRAPPER WHITE
}

Then look for body bd { }

This will be in template.css and the css template for the colour you are using, and add a background colour

body bd {
background-color:#cccccc; LIGHT GREY
}

You might even apply 20px padding to the wrapper to make it have something of a border, in this case, the bit between ja-wrapper would be: –

ja-wrapper {
margin:auto; CENTRES SITE
width:981px; THE WIDTH OF THE SITE
background-color:#ffffff; MAKES THE BACKGROUND OF THE WRAPPER WHITE
padding:20px; GIVES 20 PIXELS PADDING - LIKE A WHITE BORDER
}

<em>@sudheermatta 187278 wrote:</em><blockquote>I am a JA newbie, can you please help me align my website to the center?

I have tried solutions proposed in other templates and they dont seem to work for me.

eg: I tried from
(http://www.joomlart.com/forums/topic/center-everything/

Here is the best solution to alignt center for the site:

1) open the file: /templates/ja_lime/css/layout.css

and find codes:
HTML Code:
.main { width: 980px; max-width: 1200px; margin: 0 auto 0 55px; position: relative;}
and replace:
HTML Code:
.main { width: 980px; max-width: 1200px; margin: 0 auto; position: relative;}

It didnt help.

Can you please help?

Live site:

http://www.asys.us/index.php

http://www.asys.us direct link doesnt work, since the joomla site is not live yet.

Thanks,</blockquote>

[sudheermatta Friend sudheermattaJoin date: June 2010Posts: 25Downloads:0Uploads:4 Thanks: 9]

#350574

jbrett,
Thanks very much for the reply. I have a small change to my question. Please help.

I really meant to ask, how can I restrict my site to be centered, and show up only in the center, and extend side to side. (like the blue area in my site extends from left to right. Instead I want it only show up in the center.

Eg: I want it to look like http://www.ibm.com or http://www.cisco.com where the site is only restricted in the center.

Please help. My client like the template, and just wants it restricted to the center. So changing to a different template is not an option for me.

Thanks much for your time. Really appreciate a response.

[sudheermatta Friend sudheermattaJoin date: June 2010Posts: 25Downloads:0Uploads:4 Thanks: 9]

#350576

smitheringle,
Thank you very much for the reply.

I tried the changes you suggested. I believe it did align it in the center. Unfortunately like I misarticulated, what I really needed to do is restrict my site to only the center. Like http://www.cisco.com or http://www.ibm.com.

Can you please help. sincerely appreciate your help.

Thanks.

Sudheer

[Laura Rubino Friend Laura RubinoJoin date: September 2014Posts: 86Downloads:0Uploads:0 Thanks: 2 Thanked: 15 times in 14 posts]

#350577

It should have been centered. could you provide a link to your site so i can see just how centered you want it?

[aaronfarias Friend aaronfariasJoin date: July 2010Posts: 132Downloads:0Uploads:0 Thanks: 3 Thanked: 12 times in 12 posts]

#350582

All the css elements are set to 100% since it is a fluid design. You will have to restrict it to a certain number of pixels.

[sudheermatta Friend sudheermattaJoin date: June 2010Posts: 25Downloads:0Uploads:4 Thanks: 9]

#350589

<em>@makegoodmedia 187431 wrote:</em><blockquote>It should have been centered. could you provide a link to your site so i can see just how centered you want it?</blockquote>

http://www.asys.us/index.php

[sudheermatta Friend sudheermattaJoin date: June 2010Posts: 25Downloads:0Uploads:4 Thanks: 9]

#350590

<em>@aaronfarias 187436 wrote:</em><blockquote>All the css elements are set to 100% since it is a fluid design. You will have to restrict it to a certain number of pixels.</blockquote>

When I restrict it to 1024px, with

.wrap {
clear:both;
width:1024px;
}

The site is coming to 1024px. However, The site is aligning to the left. I want it 1024px width, but align to center.

[Laura Rubino Friend Laura RubinoJoin date: September 2014Posts: 86Downloads:0Uploads:0 Thanks: 2 Thanked: 15 times in 14 posts]

#350593

Go to your layout.css and search for this #ja-mainbody

remove the float:left;

[smitheringale Friend smitheringaleJoin date: December 2009Posts: 236Downloads:0Uploads:0 Thanks: 63 Thanked: 44 times in 18 posts]

#350685

Hi Sudheermatta,

I have recently centred a Ja Ores template and it looked just like the IBM website. (EDIT: I thought you were talking about Ores – but what I say below works just as well for halite too – see screenshot as proof)

What I mentioned above Does work actually (strangely someone rated my suggestion as bad – how weird), but this is my step by step solution – please note that this works from the quickstart only – some other changes you might already have made to the code might interfere with things.

Finally – I’m going to say the site will be 981 pixels wide as 1024 px is too big for many browsers – not everyone has a big fancy screen 🙂

1) Go to template.css file and look for

ja-wrapper { overflow:hidden}

and change this to

#ja-wrapper { overflow: hidden; width:981px; margin:auto; padding:15px;background-color:#fff;}

Then go to the color css – for example, I used a light theme, so I would go to light-theme.css and add change this


body#bd { color: #353535; background-color: #fff; }

to this

body#bd { color: #353535; background-color: #cccccc; }

You might need to add a background-color or #ccc (grey) to some other color.css files as well depending on what color style you are using.

If you hate the white padding around the site – remove the padding:15px in the ja-wrapper code above.

This does work – I’ve just tested it again! (screen shot attached)

<em>@sudheermatta 187444 wrote:</em><blockquote>When I restrict it to 1024px, with

.wrap {
clear:both;
width:1024px;
}

The site is coming to 1024px. However, The site is aligning to the left. I want it 1024px width, but align to center.</blockquote>

1 user says Thank You to smitheringale for this useful post

1. sudheermatta

[sudheermatta Friend sudheermattaJoin date: June 2010Posts: 25Downloads:0Uploads:4 Thanks: 9]

#350749

smitheringale, you are an absolute god send! Thankyou. Thank you. Thankyou.

Someday I hope to be of some help to you or someone else, at a similar level.

You have absolutely nailed the issue for me. I cant thank you enough!

[John Wesley Brett Moderator John Wesley BrettJoin date: July 2013Posts: 2142Downloads:17Uploads:26 Thanks: 175 Thanked: 645 times in 426 posts]

#350753

I’m still trying to see whether this is a bug or not…or whether there is an enhancement opportunity.

Why were you not able to accomplish this by simply going to
EXTENSIONS > TEMPLATE MANAGER > (template) > PARAMETERS > TEMPLATE WIDTH

Were the “SPECIFIED PIXEL” settings not working?

Thanks for your help.
John.

[smitheringale Friend smitheringaleJoin date: December 2009Posts: 236Downloads:0Uploads:0 Thanks: 63 Thanked: 44 times in 18 posts]

#350760

Hi Jbrett,

Actually, I think that changing the template width in the backend using a specified pixel does work – but it only seems to affect the middle part of the website – the header and footer still stretch for the whole width of the browser window. Thus, even to make it look like a centred site, you have to do something else – and what I outlined above seems to work as well as anything else. My option for using padding rather than a border is for creating a valid site. Having a border colour the same colour as the backgound colour seems to throw up a validation warning (although it still passes). However, I don’t know if this causes problems to browsers not using a technically-correct box model (IE 6 maybe?)

<em>@jbrett 187660 wrote:</em><blockquote>I’m still trying to see whether this is a bug or not…or whether there is an enhancement opportunity.

Why were you not able to accomplish this by simply going to
EXTENSIONS > TEMPLATE MANAGER > (template) > PARAMETERS > TEMPLATE WIDTH

Were the “SPECIFIED PIXEL” settings not working?

Thanks for your help.
John.</blockquote>

[smitheringale Friend smitheringaleJoin date: December 2009Posts: 236Downloads:0Uploads:0 Thanks: 63 Thanked: 44 times in 18 posts]

#350762

I forgot to mention, that you should make sure the template is set to a specified pixel width of 980px in the http://www.yoursite.com/administrator area.

EXTENSIONS > TEMPLATE MANAGER > (template) > PARAMETERS > TEMPLATE WIDTH

choose USE SPECIFIED PIXEL as your option, and type 980 in the box provided. I think it should already have 980px in it.

<em>@sudheermatta 187655 wrote:</em><blockquote>smitheringale, you are an absolute god send! Thankyou. Thank you. Thankyou.

Someday I hope to be of some help to you or someone else, at a similar level.

You have absolutely nailed the issue for me. I cant thank you enough!</blockquote>

[Author]

Posts