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
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
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
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
sliders at the right side
The thing here is that the code for displaying the sliders is
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
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
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
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
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
..../administrator/components/com_jem/views/event/view.html.php
Find: function "protected function addToolbar"
change
to
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');
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
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
To
.../administrator/components/com_jem/models/fields/modal/contact.php
Change
To
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
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.'&'.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.'&'.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.'&'.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.'&'.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
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 agoOne 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
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
Reset Hits
.../administrator/components/com_jem/models/fields/hits.php
change
to
The btn will have black borders but you can correct that with a bit of css
.../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
Please Log in or Create an account to join the conversation.
Time to create page: 0.533 seconds