Joomla Templates Club 406,261 posts

[bmtoth Friend bmtothJoin date: May 2008Posts: 101Downloads:0Uploads:0 Thanks: 29 Thanked: 6 times in 1 posts]

#148483

Is there a way to center EVERYTHING?

Instead of having the template aligned to the left of the screen. Can I center the entire template?

Thank you.

[uniquebiz Friend uniquebizJoin date: February 2010Posts: 596Downloads:0Uploads:40 Thanks: 33 Thanked: 156 times in 119 posts]

#331917

Yeah it seems almost unfinished when you view on a 24 in screen, hugging the left as it does, yet Rasite even at narroww screen is central, guess you could try putting the whole thing in a div and centering it but it seems a poor solution at best? Or debug Rasite and find where the auto (width) parameters kick in and duplicate them maybe

Shannon

[jay973 Friend jay973Join date: October 2008Posts: 401Downloads:0Uploads:12 Thanks: 28 Thanked: 105 times in 68 posts]

#332044

In the #body tag you can specify the width and set the margin to auto like this:

width:980px;
margin:auto;

That will center it.

Cheers,

Jason.

4 users say Thank You to jay973 for this useful post

1. uniquebiz
2. aris
3. amilks
4. aamirah

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

#332158

Please kindly read the wiki http://wiki.joomlart.com/wiki/JA_Template_Framework/FAQs, it help you so much in the template customizing

[amilks Friend amilksJoin date: June 2009Posts: 40Downloads:0Uploads:4 Thanks: 10 Thanked: 6 times in 1 posts]

#332393

Thank you Jay,

However, I found that with this:


width:980px;
margin:auto;


some stuff is cut off so you need to do this:


width:95%;
margin:auto;


to the body tag and change this:


.ja-cpanel-switcher {
position: absolute;
right: -145px;
bottom: -10px;
color: #858585;
width: 22px;
height: 22px;
text-decoration: none;
font-size: 95%;
font-weight: bold;
text-indent: -5000px;
}


to this:


.ja-cpanel-switcher {
position: absolute;
right: -65px;
bottom: -10px;
color: #858585;
width: 22px;
height: 22px;
text-decoration: none;
font-size: 95%;
font-weight: bold;
text-indent: -5000px;
}


1 user says Thank You to amilks for this useful post

1. Arvind Chauhan

[iguinee Friend iguineeJoin date: December 2009Posts: 453Downloads:10Uploads:39 Thanks: 58 Thanked: 32 times in 1 posts]

#333459

<em>@amilks 164546 wrote:</em><blockquote>Thank you Jay,

However, I found that with this:


width:980px;
margin:auto;


some stuff is cut off so you need to do this:


width:95%;
margin:auto;


to the body tag and change this:


.ja-cpanel-switcher {
position: absolute;
right: -145px;
bottom: -10px;
color: #858585;
width: 22px;
height: 22px;
text-decoration: none;
font-size: 95%;
font-weight: bold;
text-indent: -5000px;
}


to this:


.ja-cpanel-switcher {
position: absolute;
right: -65px;
bottom: -10px;
color: #858585;
width: 22px;
height: 22px;
text-decoration: none;
font-size: 95%;
font-weight: bold;
text-indent: -5000px;
}

</blockquote>

Hello,

I am trying to follw these instructions about setting the template width to auto but I cannot find these details:

width:980px;
margin:auto;

some stuff is cut off so you need to do this:

width:95%;
margin:auto;

Where can I find that please?

[iguinee Friend iguineeJoin date: December 2009Posts: 453Downloads:10Uploads:39 Thanks: 58 Thanked: 32 times in 1 posts]

#333763

anyone please?

[amilks Friend amilksJoin date: June 2009Posts: 40Downloads:0Uploads:4 Thanks: 10 Thanked: 6 times in 1 posts]

#333773

Check template.css or layout.css in templates/lime/css

I will tell you that a bunch of stuff needs changing to makethis work properly.

1 user says Thank You to amilks for this useful post

1. iguinee

[iguinee Friend iguineeJoin date: December 2009Posts: 453Downloads:10Uploads:39 Thanks: 58 Thanked: 32 times in 1 posts]

#333795

This code is located in css LAYOUT.


width:95%;
margin:auto;


And in TEMPLATE css I have changed this:


.ja-cpanel-switcher {
position: absolute;
right: -145px;
bottom: -10px;
color: #858585;
width: 22px;
height: 22px;
text-decoration: none;
font-size: 95%;
font-weight: bold;
text-indent: -5000px;
}


to this:


.ja-cpanel-switcher {
position: absolute;
right: 0px;
bottom: -10px;
color: #858585;
width: 22px;
height: 22px;
text-decoration: none;
font-size: 95%;
font-weight: bold;
text-indent: -5000px;
}


Trying to find this made me frustrated at some point. So I had to post this hoping others will not go through the same feelings.

1 user says Thank You to iguinee for this useful post

1. marm

[chalobollywood Friend chalobollywoodJoin date: March 2010Posts: 19Downloads:0Uploads:9 Thanks: 6 Thanked: 1 times in 1 posts]

#338724

hi everyone / iguinee

could you guys help me to put the site of JA Lime into Center position , i am very very newbie to joomla so if you can kindly make it easy for me …which file i have to open and edit…plz help really appreciate.

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

#338854

Dear chalobollywood!

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

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

and find codes:

.main { width: 980px; max-width: 1200px; margin: 0 auto 0 55px; position: relative;}

and replace:

.main { width: 980px; max-width: 1200px; margin: 0 auto; position: relative;}

Good luck

6 users say Thank You to Saguaros for this useful post

1. chalobollywood
2. smitheringale
3. biljana_g
4. caz_blue
5. aamirah
6. muchemwa

[chalobollywood Friend chalobollywoodJoin date: March 2010Posts: 19Downloads:0Uploads:9 Thanks: 6 Thanked: 1 times in 1 posts]

#338865

Thnx its working now ….the site is in center …

1 user says Thank You to chalobollywood for this useful post

1. smitheringale

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

#341909

<em>@tienhc 172754 wrote:</em><blockquote>Dear chalobollywood!

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

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

and find codes:

.main { width: 980px; max-width: 1200px; margin: 0 auto 0 55px; position: relative;}

and replace:

.main { width: 980px; max-width: 1200px; margin: 0 auto; position: relative;}

Good luck</blockquote>

Cheers tienhc 🙂 That works like a charm!

Would you be able to help me with one further refinement please?

I would like to achieve the following: –

1. grey background
2. white border, margin or padding around site

I’ve attached a picture to give you some idea of what I’d like to achieve. Bear in mind that I spent less than 1 minute in photoshop to create this image, but I think it looks very nice indeed.

I’m sure this will be very easy to do using the excellent instructions in your t3 wiki.

But as you are so much more intimate and involved with joomlart templates and the t3 framework than I am, perhaps you can accomplish this in seconds, whereas I may require much longer – and still not get it right 🙂

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

#342596

Dear smitheringale!

Here is the soluton to resolve your issue?

1- open the file template.css and try to the following codes

#ja-wrapper { overflow: hidden; }

and replace:

#ja-wrapper {
margin:0 auto;
overflow:hidden;
padding:0 3px;
width:981px;
}

Good luck

[Author]

Posts