I've been working out a way to make the modal box window pop up look less clumsy and more user friendly.

The solution to make this work without hacking the core files is to make a copy of the original template and rename this to whatever you want. For example i renamed the new folder news.

Then all you need to do is edit some of the template files and install JCE Editor and JCE Media box.

1: enable System - JCE MediaBox plugin

For this I choose the light pop up theme. Shorten the fade and scale speed to 10 so it looks like less of a pop up window.

Set the Overlay color #FFFFFF, Width: 100% and Height 100% and click save.

2. To override K2's default Modal pop up you will need to edit the template files.

Components/com/k2/templates/templatenamefolder/

open all the files and change any off the lines: <a class="modal" rel="{handler:'iframe',size:{x:990,y:550}}" href="<?php echo $this->item->editLink; ?>">

to

<a class="jcepopup rel="{handler:'iframe',size:{x:990,y:550}}" href="<?php echo $this->item->editLink; ?>">
It doesn't matter about the size as the jce modal plugin overrides the iframe size to 100% as set above in the plugin.

3. I used the K2 User login module so applied the same jcepopup class to the module files as well.


4: Finally when you go to admin components k2 in the admin area there is a parameters tab under frontend editing i set the default state for the toogle bar to hidden. This hides the meta box and opens the page using the full width.

Have a look at the screen shot and let me know if anyone comes up with any usefull ideas.

I have done this in joomla 2.5

Jason

Hi. Thanks for sharing this.

1. Please make a screenshot of your 4th item. I cannot find the configuration what you have written.
2. When I override the "new" template files, where do I have to define K2 to take the new template?
or do you mean to override the original template files ? (Item 2 of your description)

Go to components k2, then on the top right toolbar there is a button named paramaters.

See attached.




Regards

Jason

I have done what you said.
I made a backup of all template files in the default folder to another folder.
Then i edited all files in the default folder like this:

<a class="jcepopup" rel="{handler:'iframe',size:{x:990,y:550}}" href="<?php echo $this->item->editLink; ?>">

In your description the " in red is missing. Is it right what i wrote ?

I think nothing has changed since yet on my popup window.

Pls. see one file as an example.

Please advise

Please advise me too...I want to change the size and location of the damn pop up box.

This is what I see when I inspect the element on the page:

<!-- .modal {
position: fixed;
top: 50%;
left: 50%;
z-index: 1050;
width: 560px;
margin: -250px 0px 0px -280px;
overflow: auto;
background-color: rgb(255, 255, 255);
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 6px 6px 6px 6px;
box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.3);
background-clip: padding-box;
} -->

It's driving me crazy. I have spent hours on this. I can't find that code in any of the css files. And the stupid box pops up on the page covering the title of the article and floating when you scroll down the page. In addition the picture of the authors that are in the pop up are only 100px wide but the box is 560px.

Anybody?

You can see how really stupid it looks here:

www.totalhealthmagazine.com/features/radio-interviews/dr-stephen-sinatra-on-the-great-cholesterol-myth.html

I'm sure this is going to come back and bite in the a** but a scrolling pop up box over top of the article making it difficult to read was driving me crazy. So here is my fix. I use Inspect Element in firefox to find the code above. I copied and pasted it into my K2.override.css file. Uploaded and presto the modal box is gone. This is a quick fix...and maybe I'll know enough one day to be able to do this based on category or something so it is not site wide but in the meantime if you need to change position or resize you modal boxes just use the code here in your override script and play with it until you have the size and position you want. I had to make it invisible because it floats behind my header and just looks stupid.

<!--
.modal {
position: top;
top: 0px;
left: 60%;
z-index: 1050;
width: 150px;
margin: -250px 0px 0px -280px;
overflow: auto;
background-color: rgb(255, 255, 255);
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 6px 6px 6px 6px;
box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.3);
background-clip: padding-box;
} -->

Thank you so much for this post!!!! What are the files that need to be modified so that when you click on Add Item in the module K2 User, I can't seem to find a modal line in any of the files.

Thanks

I found the file, just after posting, here are the files and the modified code for others who may need it..

modules/mod_k2_user/tmpl/userblock.php

Around Line 35, you'll find
<a class="modal" rel="{handler:'iframe',size:{x:990,y:550}}" href="<?php echo $user->profile->addLink; ?>"><?php echo JText::_('K2_ADD_NEW_ITEM'); ?></a>


Replace with:


<a class="jcepopup rel="{handler:'iframe',size:{x:990,y:550}}" href="<?php echo $user->profile->addLink; ?>"><?php echo JText::_('K2_ADD_NEW_ITEM'); ?></a>

If I understand correctly, this is used to alter the Author's Popup Box in the frontend for editing and submitting items?

If you have succeeded in this, is there any way to alter the behaviour of the popup for the K2 Image?
That is, not force images above their maximum dimensions, be it in small, medium or large setting...

By default K2 creates copies of images of the various sizes for different views. I would like to have K2 Respect the dimensions of the Item image and not overstretch them, while linking to original image for the lightbox popup...

Any way to do that? it's driving me mad...I got 300px images that are forced to more than double the size.

I can set a reasonable size for Item image, e.g. 350px width, and I can edit the K2 files to change placement of the image and its caption (to float on the left, instead of sitting on top), but I can't find a way to limit the popup to the image's maximum original dimensions.

If you find an answer on this, please share with the K2 Team as well.

thanks for sharing this. my editingforms are now displayed in a beautiful fullscreen modal by jcepopup but: close button is not working because jcepopup have to be closed by clicking on its own close button (i can live with that!). but what i really need is, that the jcepopup will be closed if i click on save button!

how did you manage that, or did'nt you?

thanks

Thanks Jason M. and all for this post! I have re-posted it and added a few notes to make it easier for anyone else needing to do the same here: getk2.org/community/English-K2-Community/192458-K2-needs-to-be-responsive#192458