Moo Masonry and Joomla 3?

**GK User** Wed Jan 23, 2013 11:59 am

Hello,

I had a couple of questions about Joomla 3 and moo masonry.

1) Joomla 3 is built on bootstrap...that being said, why did Gavick decide to override bootstrap and use moo masonry?

I was expecting to be able to use bootstrap to build layouts in Gavick Joomla 3 templates, but found out that its overridden by moo masonry.

2) Since I like to use bootstrap, i just include the bootstrap files in the css and js folders and reference it in the <head>. Is there any potential issues for me/anyone using bootstrap like this with the Gavick templates?

I find that layouts are easier and quicker to use that moo masonry, plus there are no tutorials on the Gavick Documentation on how to build columns with moo masonry, whereas the bootstrap site shows you how and shows the code.

3) Also, since Joomla 3 is built on bootstrap, wouldn't using moo masonry be overriding the main benefits of Joomla 3, and replacing the core of Joomla 3 with a javascript layout over the top (moo masonry)?

John

**teitbite** Wed Jan 23, 2013 5:00 pm

Hi

Our templates are made on Gavern framework which had a moo masonry developed since J2.5 projects. This is why it's still more similar to that logic. I believe with time framework will evolve and new features will be added some replaced with a better solutions.

**GK User** Wed Jan 23, 2013 10:49 pm

teitbite wrote:Hi

Our templates are made on Gavern framework which had a moo masonry developed since J2.5 projects. This is why it's still more similar to that logic. I believe with time framework will evolve and new features will be added some replaced with a better solutions.

Yeah i saw thats what Gavick did.

Is there any potential problem to including the Bootstrap js and css files in the head, and using Bootstrao ontop of Gavick framework/moo masonry?

For me, if I compare JoomlArt and Gavick, Gavick wins in every department, expect that for Joomla 3, we don't get Bootstrap.

Thanks,

John

**teitbite** Thu Jan 24, 2013 5:05 am

Hi

To be honest noone has tried to do this, or was not reporting problems

Please try it and I'll help You get pass obstacles if occure.

**GK User** Wed Jan 30, 2013 5:01 am

Hello,

I have encountered my first problem.

If you want access to my site, please give me your email so I can send details.

Please find attached the problem.

The problem resides in the 'bootstrap.css' and it conflicts with the MAIN IMAGE on a K2 ITEM Layout. The main image sits ontop of the page and to the top right of page. If I remove the bootstrap.css from loading, then the issue disappears.

Can you please assist.

Screen shit attached

**teitbite** Wed Jan 30, 2013 1:03 pm

Hi

Please just show me an exact page where I can see this problem.

**teitbite** Fri Feb 01, 2013 8:09 pm

Hi

I'm not sure how should it looks like, but this code added to override.css (override in template settings needs to be enabled) will fix width issue:

Code: Select all: .itemImageBlock > a { width: auto; }

**GK User** Tue Feb 12, 2013 11:11 pm

Hello Teitbite,

I sent you a PM a couple of weeks ago with access to my site so you can see the issue.

Regarding your last comment (not sure how it should look)....It should look exactly as per the Gavick Fest K2 Item layout, not with the image floating ontop of the page.

Thanks,

**GK User** Tue Feb 12, 2013 11:19 pm

austenn01 wrote:Hello Teitbite,

I sent you a PM a couple of weeks ago with access to my site so you can see the issue.

Regarding your last comment (not sure how it should look)....It should look exactly as per the Gavick Fest K2 Item layout, not with the image floating ontop of the page.

Thanks,

EDIT:

Ok, i have added the code you gave below,, sure it stops the K2 Item Layout image from stretching all the way to the right, but it doesnt stop the K2 Item Layout image from floating ontop of the page...see screen shot attached...

**GK User** Tue Feb 12, 2013 11:40 pm

Hello,

I belive I fixed the issue.

This is the code from Bootstrap that WAS CREATING THE ISSUE:

.modal {
background-clip: padding-box;
background-color: #FFFFFF;
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 6px 6px 6px 6px;
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
left: 50%;
margin-left: -280px;
outline: medium none;
position: fixed;
top: 10%;
width: 560px;
z-index: 1050;
}

And I added the following to the overide.css file, changing it to:

.modal {
background-clip: padding-box;
background-color: #FFFFFF;
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 6px 6px 6px 6px;
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
left: 0%;
margin-left: 0px;
outline: medium none;
position: relative;
top: 10%;
width: auto;
z-index: 1;
}

Thanks,

**teitbite** Wed Feb 13, 2013 3:50 pm

Hi

Ok. Great. In the matter of fact I have a little knowledge about bootstrap and was thinking that floating was on purpose

But I'm good with css, so if You will encounter any other problem just let me know with an explanation how should it be done as a result view.