Joomla Templates Club 406,261 posts

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

#156690

I cannot figure out, for the life of me, how to reduce the width of ja-col1 (see image below)

What I want is the left column to be the width I have it now, and the main content to fill the rest (with, perhaps, 8px or so padding between them.

I’ve tried to modify the width value of ja-col1 – but it never works.

HELP PLEASE !!!

:((

---

Attachments:

1. 

[gberm Friend gbermJoin date: July 2010Posts: 55Downloads:0Uploads:0 Thanks: 4 Thanked: 3 times in 1 posts]

#363841

You can edit:

YOUR-SITE-PATH/templates/ja_rutile/css/template.css
line 559: Width of #ja-col1 (now is 28%)
line 525: Width of #ja-content (now is 72%)

The sum of 2 objects must be 100%, if you need a gap padding, please subtract from the width of one object.

1 user says Thank You to gberm for this useful post

1. TomC

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

#363930

Appreciate the attempt to help, but none of what you offered worked at all.

Now, of course, it’s all messed up.

Feel free to take a look and, if you can figure it out, let me know –> http://www.musicians-marketplace.com

Why do web designers operate under the assumption that anyone who might try to work with their templates will be rocket scientists ?? Honestly, things could be layed out a WHOLE LOT SIMPLER and with MUCH BETTER LOGIC than they are.

>:(

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

#363934

A supplemental related issue . . . . .

If you click on “Layouts” and select “Content + Right Column,” you will see that the right column is not flush with the right side. So, this issue I am dealing with is affecting both the left AND right – and it all seems to have to do with the fluidity of the main content area.

WHY DOES THIS HAVE TO BE SO DIFFICULT ???

PLEASE HELP ME UNDERSTAND HOW TO WORK WITH THIS !!!

:((

[Phill Moderator PhillJoin date: February 2014Posts: 7013Downloads:40Uploads:77 Thanks: 917 Thanked: 2206 times in 1818 posts]

#363938

Open template.css and around line 700


div.module, div.module_text, div.module_menu, div.module_hilite, div.ja-box-br {
background:url("../images/box-br.gif") no-repeat scroll right bottom #FFFFFF;
clear:both;
float:left;
overflow:hidden;
padding:0;
width:80%;

}

The bit in red controls the width of the modules within that column. I assume you want the modules to fill that column and not have the gap. If so increase the width to 100%

1 user says Thank You to Phill for this useful post

1. TomC

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

#363940

Okay, I believe understand that bit of logic … but then, how do I edit the CSS so that the main content section expands (width wise) to within 5px or so of the left column (on the Home Page) … AND/OR … so that if “Content + Right Column” is selected, the right column lines up against the right side border and the content expends to within 5px of the right column? (as described within my original post)

Hope that makes sense.

:((

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

#363944

<em>@tcraw1010 204927 wrote:</em><blockquote>Okay, I believe understand that bit of logic … but then, how do I edit the CSS so that the main content section expands (width wise) to within 5px or so of the left column (on the Home Page) … AND/OR … so that if “Content + Right Column” is selected, the right column lines up against the right side border and the content expends to within 5px of the right column? (as described within my original post)

Hope that makes sense.

:((</blockquote>

Nothing I have tried has worked (so far). I don’t understand this at all.

[Phill Moderator PhillJoin date: February 2014Posts: 7013Downloads:40Uploads:77 Thanks: 917 Thanked: 2206 times in 1818 posts]

#363945

Sorry, not quite sure what you want. Do you want smalle side columns and the content to be wider?

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

#363947

<em>@phill luckhurst 204934 wrote:</em><blockquote>Sorry, not quite sure what you want. Do you want smalle side columns and the content to be wider?</blockquote>

Yes, that’s exactly what I want – I want the content to be fluid with whatever width I choose for the right or left column.

Trouble is, I cannot seem to get BOTH to work – I reduce the width of the left column, but the content doesn’t “stretch” to fill the gap. Do I need to change the width of BOTH the right and left columns concurrently for this to work?

[Phill Moderator PhillJoin date: February 2014Posts: 7013Downloads:40Uploads:77 Thanks: 917 Thanked: 2206 times in 1818 posts]

#363948

OK, now I understand. The percentage thing above is correct but you have to remember that this design used images for the background which is why it looks odd when you increase the width. If you want to increase the width you will also have to alter the background image.

If you want fluid width for the main content then you will probably have to make the background a fixed colour rather than an image.

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

#363949

Ahhhhhhhhhhh … but I also want the border/shadow look of the edges of the modules. How can I maintain that while changing backgrounds to solid colors? Pretty sure other templates are able to do this, right?

The follow-up question would be WHY WHY WHY would the JA Developers of this template do it this way – thereby making the layout so stagnant versus flexible?

:confused:

[Menalto Friend MenaltoJoin date: May 2007Posts: 4736Downloads:0Uploads:43 Thanks: 2 Thanked: 531 times in 361 posts]

#363951

Take a look in the template.css file for this here:
Where you can see each and every width statement you can adjust to make the width suit your need.
NOTE: If you change any width you need to edit the images that is used for the #ja-content div(three total).

/* COLLAPSIBLE LAYOUT
--------------------------------------------------------- */

/*content + left*/
#ja-containerwrap-fr #ja-col1 {
width: 22%;
}

#ja-containerwrap-fr #ja-content {
width: 78%;
background: url(../images/content-center2.gif) repeat-y center;
}

/*content + right*/

#ja-col2 {
float:right;
overflow:hidden;
width:22%;
}
#ja-mainbody {
float:left;
width:78%;
}

/*full*/
#ja-containerwrap-f #ja-content {
background:url("../images/content-center1.gif") repeat-y scroll center center transparent;
width:100%;
}


1 user says Thank You to Menalto for this useful post

1. TomC

[Phill Moderator PhillJoin date: February 2014Posts: 7013Downloads:40Uploads:77 Thanks: 917 Thanked: 2206 times in 1818 posts]

#363953

Blimey, where did you pop up from. Haven’t seen you on here in ages. Good to see you.

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

#363954

So, if I am understanding correctly, the JA template designers for this template used fixed width images instead of a more fluid design? WHY would they do that?

[Phill Moderator PhillJoin date: February 2014Posts: 7013Downloads:40Uploads:77 Thanks: 917 Thanked: 2206 times in 1818 posts]

#363956

You will have to ask them. It was their choice. Seems to happen a lot with all template clubs.

[Author]

Posts