Joomla Templates Club 406,261 posts

[mackdoyle Friend mackdoyleJoin date: May 2012Posts: 21Downloads:0Uploads:1 Thanked: 1 times in 1 posts]

#182802

I have read through the forums and have tried several things but have yet to solve my issue.

I need to expand the width of the middle block. I am using a custom layout that only contains right1 in the middle block. I have tried adding “width” “colwidth” and specialwidth” in the layout file but I am thinking those properties are not supported in JA Elastica because they have no effect.

So working with layout-normal.css I am overriding the ja-masonry class as follows:

.main {
width: 960px;
}

/* MASONRY PRESETS (240px*5 Grids)
——————————————————— */
/* Main Content */
#ja-content,
.ja-frontpage #ja-content {
width: 480px;
}

.ja-masonry {
width: 335px;
}

The middle block lays out properly but the total width of the content and middle blocks are only around 800px and not filling the 960px main wrapper.

*See attached for an example of my issue

I realize there is more to the framework than simply resizing the ja-masonry width but I would like help on what else I can modify to get this to work. This is not optional for me. This sites and 5 others I use JA-Elastica for are required to have IAB standard ads in the right column that are 300x250px.

Are there further modifications I can make to get the block to break from from the 240px grid? Grid-double is too wide and I cannot use that either. I need a custom width.

Thanks for any help or pointers to documentation that explains this in more detail. (I have read the Elastica Module Configuration and the T3 Framework Guides)

---

Attachments:

1. 

[degagee Friend degageeJoin date: June 2011Posts: 10Downloads:10Uploads:2 Thanks: 2 Thanked: 1 times in 1 posts]

#475134

Hello mackdoyle,

you were on the right way, I thinK.
But you have to change the styles like this:

.main {
width: 960px;
}

/* MASONRY PRESETS (240px*5 Grids)
——————————————————— */
/* Main Content */
#ja-content,
.ja-frontpage #ja-content {
width: 625px;
}

.ja-masonry {
width: 335px;
}

You won’t see the changes if you work with Firebug in Firefox, but you will see the changes after reload…

Good luck,
Flo

[mackdoyle Friend mackdoyleJoin date: May 2012Posts: 21Downloads:0Uploads:1 Thanked: 1 times in 1 posts]

#475171

Thanks for the reply Flo.

I have played with the width of the content block but changing it from anything but 480px pushes the middle block below it. Even if I just bump it up 10px, which still totals less than the 960px container.

I wonder if the code that places them on the page at load only works in a 240px grid? Not sure where that code would be though.

[degagee Friend degageeJoin date: June 2011Posts: 10Downloads:10Uploads:2 Thanks: 2 Thanked: 1 times in 1 posts]

#475182

Hello Mackdoyle,

sorry, it seems, that you’re right: the “system” uses the 240px grid.
Maybe you take a look at the blocks/masonry.php. There you’ll find
[PHP] //detect layout width
if ($(window).width() >= 720) {
curr_layout = ‘fixed’;
colW = 240;[/PHP]
Maybe you can change something here, this I don’t know…
Please let me know, if you find a solution for this topic!

[degagee Friend degageeJoin date: June 2011Posts: 10Downloads:10Uploads:2 Thanks: 2 Thanked: 1 times in 1 posts]

#475235

or you better take a look at T3 Version 3, as far as I have seen, we can change the width of the columns and layouts easily:
http://www.joomlart.com/blog/jat3-framework/t3v3-beta2-release-introducing-the-layout

1 user says Thank You to degagee for this useful post

1. JA Developer

[mackdoyle Friend mackdoyleJoin date: May 2012Posts: 21Downloads:0Uploads:1 Thanked: 1 times in 1 posts]

#475566

T3v3 looks great. I will have to start with that on my new sites.

For this site, I think I am too far along and the release date is too near to start over with it. I did make some progress though. So for anyone on v2 that needs a column sized for IAB standard 300×250 ad spots, or just wants a 2/3-1/3 layout, here is a complete hack I got working.

WARNING: I am just learning T3 and this could be the wrong way to work with the framework. But it did work for me.

I changed the 240px grid to a 170px grid. This gives you a grid-double of 340px for the 1/3 column and a grid-quadruple of 680px for the 2/3 column. Perfect for 300px ads plus padding and margin.

First you need to update the CSS.

css/layout.css:

.ja-masonry {
width: 170px;
}

.grid-double {
width: 340px;
}

.grid-tripple {
width: 510px;
}

/* Main Content */
#ja-content {
width: 680px; /* 4 grids */
}

/* 4 grids content */
width: 680px;

/* 3 grids content */
width: 510px;

/* 2 grids content */
width: 340px;

/* 1 grids content */
width: 170px

css/template-normal.css
.main {
width: 1020px;
}

Now, you need to modify the blocks/masonry.php file.
Replace all references of 240 to 170
Replace all references of 720 to 680

As a last step you need to cut the default margins and padding in half for the content and moduletables:
Change style that defines ja-content-main{
margin:.5em;
padding: 1em;

Change style that defines ja-moduletable-inner to:
margin:.5em;
padding:1em;

If I remembered all my steps, that should do it.

[Author]

Posts