Joomla Templates Club 406,261 posts

[arucardx Friend arucardxJoin date: July 2010Posts: 346Downloads:0Uploads:10 Thanks: 21 Thanked: 138 times in 104 posts]

#179627

I’m looking to reduce the size of both Grid-Double and Grid-Triple because the images on my site are very big so setting those result in very big image. This I thought would be a very simple CSS modification just like color styles. But it end up being a puzzle.

I managed to find the settings in layout.css, layout-hd.css, layout-mobile.css, etc etc and to make matters more complicated, there’s a different value set for S,M,L and XL. But still that’s cool, it just means more work. But the problem I’m having is, no matter how I change the % value, the size is still the same >_<

See the block of code here below from layout-hd.css which I believe is the one since I have a 1920 x 1080 resolution. I have tried layout.css too, my guess is for 4:3 resolutions. From the default value as shown below, I can modify grid triple to 28.4% so it becomes the same display size as grid-double. Simple right? Strangely, it doesn’t take effect. Grid-Triple remains the same display size on my site.

Cleared temp files, tried deleting the layout-hd.css file and everything displayed in the same width so clearly its that file. But why doesn’t the % value takes effect?

/* MASONRY PRESETS
--------------------------------------------------------- */
/* Default (Medium) ----*/
.item {
width: 14.2%; /* 7 cols */
}

.grid-double {
width: 28.4%;
}

.grid-triple {
width: 42.6%;
}

[arucardx Friend arucardxJoin date: July 2010Posts: 346Downloads:0Uploads:10 Thanks: 21 Thanked: 138 times in 104 posts]

#463149

After digging more into the code and understanding what grid-double and grid-triple actually does, I realize that to modified this incorrectly would cause the article display to break pretty much or create uneven spacing. So modifying it is out of the question unless I wanna shrink everything down.

Still just out of curiosity, why didn’t the changes made in that css take effect?

[julianaka Friend julianakaJoin date: March 2012Posts: 7Downloads:0Uploads:0 Thanks: 5 Thanked: 1 times in 1 posts]

#514725

I had the same problem and it seems that it is controlled by javascrip. In ja_wall/js/wall.js you have the following code

// update width for items
$bricks.width (cw_);
$bricks.filter(‘.grid-double’).width(cw_ * 2);
$bricks.filter(‘.grid-triple’).width(cw_ * 3);
$container.find(‘.corner-stamp’).each(function(){
$(this).width(Math.ceil(cw_ * ($(this).hasClass(‘grid-triple’) ? 3 : $(this).hasClass(‘grid-double’) ? 2 : 1)) -1);
});

So changes in css doesn’t make any effect unless you change this code (at least in my template version). Too bad!

1 user says Thank You to julianaka for this useful post

1. Ninja Lead

[Author]

Posts