help to better help you:

Please: add always Joomla / JEM version and details to your posts, so we can try to reproduce your issue!

J3+Styling - Backend - Event view

J3+Styling - Backend - Event view

9 years 3 weeks ago - 9 years 1 week ago
#20491
JEM: 2.1.5
Joomla: 3.4.6 Template: Isis

be aware: changes will be overwritten in case of an update, but maybe it's usefull to someone.

some of the things that can be done better
- page icon
- sliders at the right side
- Select for venue/contact

Attachments:

Last edit: 9 years 1 week ago by Bluefox.

Please Log in or Create an account to join the conversation.

Re: J3+Styling - Backend - Event view

9 years 2 weeks ago - 9 years 2 weeks ago
#20493
sliders at the right side

The thing here is that the code for displaying the sliders is
Code:
JHtml::_('sliders.start'....... JHtml::_('sliders.panel'........ JHtml::_('sliders.end');

an that's the way it was done in Joomla 2.x, it's ofcourse fine to do so as the code works. But the thing here is that the needed classes have been removed from Joomla 3.x and doing so there isn't much styling left. So you can consider to do 2 things: add the classes or just incorporate the new way. Would prefer to use the bootstrap code.

The Joomla 3 way is to incorporate bootstrap Accordion
Code:
JHtml::_('bootstrap.startAccordion',....... JHtml::_('bootstrap.addSlide', ....... JHtml::_('bootstrap.endSlide');...... JHtml::_('bootstrap.endAccordion');

When the bootstrap way is added to the page ..../administrator/components/com_jem/views/event/view.html.php it will be looking like the image.

One downside of using the bootstrap way can be that it doesn't remember the active slide if i'm right. Have to test it to be sure. If it's not remembered then maybe it can be usefull to create a custom js-file for it. Hmm, will test it out

Attachments:

Last edit: 9 years 2 weeks ago by Bluefox.

Please Log in or Create an account to join the conversation.

Re: J3+Styling - Backend - Event view

9 years 2 weeks ago - 9 years 2 weeks ago
#20495
Page Icon

As notice the icon is not there so add it back. when you read the topic about the events-view you have noticed that a bit of code was changed/added to display the Joomla 2.x icons and won't repeat that.

..../media/com_jem/css/backend.css
add
Code:
.icon-eventedit { background-image: url(../images/icon-48-eventedit.png); }


..../administrator/components/com_jem/views/event/view.html.php
Find: function "protected function addToolbar"

change
Code:
JToolBarHelper::title($isNew ? JText::_('COM_JEM_ADD_EVENT') : JText::_('COM_JEM_EDIT_EVENT')), 'eventedit');

to
Code:
JToolBarHelper::title('<span class="view_title">'.($isNew ? JText::_('COM_JEM_ADD_EVENT') : JText::_('COM_JEM_EDIT_EVENT')).'</span>', 'eventedit');

Attachments:

Last edit: 9 years 2 weeks ago by Bluefox.

Please Log in or Create an account to join the conversation.

Re: J3+Styling - Backend - Event view

9 years 2 weeks ago - 9 years 2 weeks ago
#20496
Select fields for venue/contact


To change these fields you have to edit the modal fields.

.../administrator/components/com_jem/models/fields/modal/venue.php

Change
Code:
// The current venue input field $html[] = '<div class="fltlft">'; $html[] = ' <input type="text" id="'.$this->id.'_name" value="'.$venue.'" disabled="disabled" size="35" />'; $html[] = '</div>'; // The venue select button $html[] = '<div class="button2-left">'; $html[] = ' <div class="blank">'; $html[] = ' <a class="modal" title="'.JText::_('COM_JEM_SELECT').'" href="'.$link.'&amp;'.JSession::getFormToken().'=1" rel="{handler: \'iframe\', size: {x:800, y:450}}">'. JText::_('COM_JEM_SELECT').'</a>'; $html[] = ' </div>'; $html[] = '</div>';

To
Code:
// The current venue input field $html[] = '<span class="input-append">'; $html[] = ' <input type="text" class="input-medium" id="'.$this->id.'_name" value="'.$venue.'" disabled="disabled" size="35" />'; // The venue select button $html[] = ' <a class="modal btn hasTooltip" title="'.JText::_('COM_JEM_SELECT').'" href="'.$link.'&amp;'.JSession::getFormToken().'=1" rel="{handler: \'iframe\', size: {x:800, y:450}}">'; $html[] = '<span class="icon-file"></span> '; $html[] = JText::_('COM_JEM_SELECT').'</a>'; $html[] = '</span>';


.../administrator/components/com_jem/models/fields/modal/contact.php

Change
Code:
// The current contact input field $html[] = '<div class="fltlft">'; $html[] = ' <input type="text" id="'.$this->id.'_name" value="'.$contact.'" disabled="disabled" size="35" />'; $html[] = '</div>'; // The contact select button $html[] = '<div class="button2-left">'; $html[] = ' <div class="blank">'; $html[] = ' <a class="modal" title="'.JText::_('COM_JEM_SELECT').'" href="'.$link.'&amp;'.JSession::getFormToken().'=1" rel="{handler: \'iframe\', size: {x:800, y:450}}">'. JText::_('COM_JEM_SELECT').'</a>'; $html[] = ' </div>'; $html[] = '</div>';

To
Code:
// The current contact input field $html[] = '<span class="input-append">'; $html[] = ' <input type="text" class="input-medium" id="'.$this->id.'_name" value="'.$contact.'" disabled="disabled" size="35" />'; // The contact select button $html[] = ' <a class="modal btn hasTooltip" title="'.JText::_('COM_JEM_SELECT').'" href="'.$link.'&amp;'.JSession::getFormToken().'=1" rel="{handler: \'iframe\', size: {x:800, y:450}}">'; $html[] = '<span class="icon-file"></span> '; $html[] = JText::_('COM_JEM_SELECT').'</a>'; $html[] = '</span>';

If you like you can also change the icon "file" to whatever icon you want.
Icomoon font-set: docs.joomla.org/J3.x:Joomla_Standard_Icomoon_Fonts

Attachments:

Last edit: 9 years 2 weeks ago by Bluefox.

Please Log in or Create an account to join the conversation.

Re: J3+Styling - Backend - Event view

9 years 2 weeks ago - 9 years 2 weeks ago
#20497
One downside of using the bootstrap way can be that it doesn't remember the active slide if i'm right. Have to test it to be sure. If it's not remembered then maybe it can be usefull to create a custom js-file for it. Hmm, will test it out

As expected the Accordion slide is not remembered but that can be fixed, did create a js file for JEM3 (a while back) so yep that one can be used. So let's try it.

../administrator/components/com_jem/views/events/view.html.php
EDIT of jojo12: if I am right it's
../administrator/components/com_jem/views/event/view.html.php

Add this line
Code:
// Load scripts JHtml::_('jquery.framework'); JHtml::_('script', 'com_jem/slider-state.js', false, true);

so it will be like
Code:
................................................... // Load scripts JHtml::_('jquery.framework'); JHtml::_('script', 'com_jem/slider-state.js', false, true); JHtml::_('script', 'com_jem/attachments.js', false, true); .............

Doing so it will search for a file called slider-state.js, that file doesn't exists (yet) so you need to create it.

Go to folder: .../media/com_jem/js/ and add the attached js file to the folder

Attachments:

Last edit: 9 years 2 weeks ago by jojo12.

Please Log in or Create an account to join the conversation.

Re: J3+Styling - Backend - Event view

9 years 2 weeks ago
#20499
Reset Hits

.../administrator/components/com_jem/models/fields/hits.php

change
Code:
protected function getInput() { $onclick = ' onclick="document.id(\''.$this->id.'\').value=\'0\';"'; return '<input style="border:0;" type="text" name="'.$this->name.'" id="'.$this->id.'" value="'.htmlspecialchars($this->value, ENT_COMPAT, 'UTF-8').'" readonly="readonly" /><input type="button"'.$onclick.' value="'.JText::_('COM_JEM_RESET_HITS').'" class="button"/>'; }

to
Code:
/** * Method to get the field input markup. * * @return string The field input markup. */ protected function getInput() { $onclick = ' onclick="document.id(\''.$this->id.'\').value=\'0\';"'; $html = array(); $html[] = '<span class="input-append">'; $html[] = '<input style="border:0;" type="text" name="'.$this->name.'" id="'.$this->id.'" value="'.htmlspecialchars($this->value, ENT_COMPAT, 'UTF-8').'" readonly="readonly" />'; $html[] = '<a class="btn"'.$onclick.'>'; $html[] = '<span class="icon-refresh"></span> '; $html[] = JText::_('COM_JEM_RESET_HITS').'</a>'; $html[] = '</span>'; return implode("\n", $html); }

The btn will have black borders but you can correct that with a bit of css

Attachments:

Please Log in or Create an account to join the conversation.

Time to create page: 0.776 seconds