Public Forums 71,145 posts

[evillen Friend evillenJoin date: September 2010Posts: 9Downloads:8Uploads:0]

#895409

I’ve just upgraded to Joomla v3.4 from v2.5. I was using the older T3 framework and I’m trying to use the new T3 Framework. Many of my pages have this html code:

<p>We saw countless <span><a class="modal" href="images/Myanmar-Stupas.jpg">Buddhist Stupas</a></span></p>

This worked okay in the older T3 framework (after I added "JHTML::_(‘behavior.modal’);" to the template index.php file.)

This technique works fine in the standard Beez3, but the link is simply not displayed in "T3_bs3_blank".

How can I get the Modal class working in T3 Framework?

[evillen Friend evillenJoin date: September 2010Posts: 9Downloads:8Uploads:0]

#896080

OK, after beating my head against a wall for a day, I’ve discovered this little gem – —

tag contains modal class which, by default, is declared with “display: none” property in Bootstrap so that you won’t see the text.

It looks like I have to create a custom.css file in "root/templates/mytemplate/css/custom.css" and then create a new .modal class. Is that the correct approach? Also why is the default bootstrap modal class in T3 set to display:none. Am I missing something or is this a bug?

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#896646

Hi @evillen,

May I know your site url so I can have a look at the problem first ?

[evillen Friend evillenJoin date: September 2010Posts: 9Downloads:8Uploads:0]

#896983

Hi,

Have a look at this page. There should be two images with modal links and a dozen words with modal links.

It works okay on my Joomla 2.5 site:
http://www.thehowarths.net/albacronicles/recent-posts/584-myanmar-then-back

But doesn’t work on my test Joomla 3.4 site:
http://yachtalba.com/albacronicles/recent-posts/584-myanmar-then-back

Thanks for your help.

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#897532

Hi @evillen,

Please open file templates/your_template/css/custom.css (create a new one if you don’t have this file) and add this code :

body .modal {
     display: inline-block;
     position: static;
}

[evillen Friend evillenJoin date: September 2010Posts: 9Downloads:8Uploads:0]

#897608

Hi Adam,

That works – thank you very much.

http://yachtalba.com/albacronicles/recent-posts/584-myanmar-then-back

The hyperlink text is floating in the middle of the line and the content text is not flowing around the images, so I guess that I have to add more formatting css to the custom.css file ?

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#898682

Hi @evillen,

Update the previous code as below so you’re good to go :

body .modal {
     display: inline-block;
     position: static;
     vertical-align: middle;
}

[evillen Friend evillenJoin date: September 2010Posts: 9Downloads:8Uploads:0]

#898838

Hi Adam,

That’s great. Many thanks for your help. I really like the T3 framework.

If you’ve got a spare minute, can you explain why modal is configured to display:none in the T3 Bootstrap?

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#899795

Hi @evillen,

Actually it’s a minor bug in the template and I reported this matter so our development team can check and fix it asap.

[evillen Friend evillenJoin date: September 2010Posts: 9Downloads:8Uploads:0]

#899921

OK, thanks for your help.

[evillen Friend evillenJoin date: September 2010Posts: 9Downloads:8Uploads:0]

#901632

Hi,

I’ve run into a problem with images embedded in articles that is also related to the modal problem, which I’m unable to resolve. Could you have a look at a typical page for me?

http://yachtalba.com/alba-chronicles/recent-posts/22-myanmar-then-back

1. I’m using custom.css to override the modal "display:none" issue. This works fine with text and also displays images, but something is preventing text wrapping around the image.

2. The first image on the page has <a class="modal" and the text doesn’t flow around the image.

3. I’ve removed the modal class from the second image and the text flows correctly.

Any idea?

[evillen Friend evillenJoin date: September 2010Posts: 9Downloads:8Uploads:0]

#902853

Hi,

I’m still struggling to find a solution to get around the "modal" bug and can’t get text to flow around my images (see previous post).

Can you give me any clues as to what to do?

Neville

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

#903161

In the ‘custom.css’ file, add float: left; property for this class:

body .modal {
     display: inline-block;
     position: static;
     float: left;

[evillen Friend evillenJoin date: September 2010Posts: 9Downloads:8Uploads:0]

#903295

Hi,

Thank you very, very much. I’d tried everything, but never thought of "reinforcing" the in-line css of the surrounding div. So simple, when you see it…

I’m very happy with the T3 framework – excellent work.

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

#903591

Thanks for your kind words!

Have a nice day!!!

[Author]

Posts