Public Forums 71,145 posts

[rvillela Friend rvillelaJoin date: March 2013Posts: 30Downloads:0Uploads:5 Thanks: 7 Thanked: 5 times in 1 posts]

#194505

In K2, the item images use class=”modal” to show the image that is clickable to view a larger image.

In Purity III “modal” has the following definition:

.modal {
display: none;
overflow: auto;
overflow-y: scroll;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
}

This means the the image is NOT displayed at all. When I comment out this definition, everything works as before.
What was the intent here? Is there another way to have K2 work with this modal definition?

Thanks

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

#521413

Hi there,

The root of issue does not come from T3 Framework and Purity III template. It was due to your component which loads older bootstrap library, this cause conflicts and overridden issue with our newer bootstrap version.

To fix this, following steps would help to ensure the compatibility of Purity III with other 3rd extensions:

Step 1: Create a .less file with the same name of your component (Eg. You use K2 component, you create a com_k2.less file), copy this file into …[root]/templates/purity_iii/extra/ directory.

Step 2: Go to your site back end > Extensions> Template Manager, click the Purity III template. Then, click General tab and turn on Development mode.

Step 3: Click the Add-ons tab. You will see the component you want to re-style or fix bug. Then, tick on the menu you wish to load the .less file above.

Step 4: Use Firebug (Firefox plugin) to debug the conflict between component and template, then add style into the .less file.

Step 5: Once done all the fixes, click Less to Css compile (via administration of Purity III template). To help your site load faster, you can turn off the Development mode.

Hope above workaround would be of help.

1 user says Thank You to Saguaros for this useful post

1. rvillela

[rvillela Friend rvillelaJoin date: March 2013Posts: 30Downloads:0Uploads:5 Thanks: 7 Thanked: 5 times in 1 posts]

#521554

Saguaros, thank you for the very elegant recommendation.

No matter how I tried, I could not get this to work, so I did the following:
1) I already had a the following overload css file here: /templates/purity_iii/css/k2.css
2) I made the necessary changes here, and it seems to be working as expected.

Is there is significant advantage to doing it the way you recommended?

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

#521582

<blockquote>[root]/templates/purity_iii/extra/</blockquote>

My apology for the mis-typing, it should be [root]/templates/purity_iii/less/extras/. You put less file there then compile Less to Css (remember to back up your site first because when compiling Less to Css, all current Css file will be overridden by compiled CSS file).

[Author]

Posts