Welcome, Guest
Username: Password: Remember me
  • Page:
  • 1

TOPIC:

J3+Styling - Backend - Events view 6 years 7 months ago #20468

  • Bluefox
  • Bluefox's Avatar Topic Author
  • Offline
  • Moderator
  • Moderator
  • Posts: 4525
  • Thank you received: 492
Joomla 3.4.6
JEM 2.1.5

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


When viewing the events view there are some things that are not looking that nicely




Left-icon
There is no icon displayed as the way for it was changed in Joomla 3
Currently there is a <span class="icon-events"></span> so it's possible to
address it.

The thing here is that it is having the icon class applied to it and therefore you have
to alter a bit of code/css.


File: ....administrator/components/com_jem/views/events/view.html.php
Function: "addToolbar"

there you will see
JToolBarHelper::title(JText::_('COM_JEM_EVENTS'), 'events');

change it to
JToolBarHelper::title('<span class="view_title">'.JText::_('COM_JEM_EVENTS').'</span>', 'events');


the "events" text is the part after the "icon-" and you can change it to something else if you want.
For example you can change it to "calendar" and it would show a calender icon as it's build in.
Build in icons of Joomla: docs.joomla.org/J3.x:Joomla_Standard_Icomoon_Fonts/nl
--> as you can see there is no "events" in the list.



File: ....media/com_jem/css/backend.css

basicly the class for the icon was changed to icon-events. It's possible to alter the view.html.php
and to change events to 48-events but it would be better to add a class to backend.css
.icon-events
{ 
	background-image: url(../images/icon-48-events.png); 
}

When that is added the icon won't be displayed nicely as the css to display things is
expecting a different icon so you need to alter a bit more.

you could add
.container-title {
	height: 50px;
}

.container-title h1.page-title {
	display: block;
}

.view_title {
	position: absolute;
	top: 40px;
}


.page-title [class^="icon-"], 
.page-title [class*=" icon-"] {
    height: 48px;
     width: 48px;
}
the class view_title was used so it wouldn't interfere with the page_title class.

just an example :)


to be continued.....
(won't respond to PM)
==================================================================
running: pre-alpha JEM 4.x (custom version) + Joomla 4.0.0-beta7 + PHP 7.3
Attachments:

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

Last edit: by Bluefox.

J3+Styling - Backend - Events view 6 years 7 months ago #20469

  • Bluefox
  • Bluefox's Avatar Topic Author
  • Offline
  • Moderator
  • Moderator
  • Posts: 4525
  • Thank you received: 492
Spacing between elements
And with that i'm referring to the spacing between filter_type + search and date+ filters

It's happening as the class "inputbox" is added to the elements.
Within backend.css we are defining a margin for that class and doing so it's causing a problem.

So you can try to do this in file: .../media/com_jem/css/backend.css
/* align radio buttons horizontally */
.inputbox {
	/* margin:5px; */
	cursor:pointer;
}
it's will disable the line of the margin.
(won't respond to PM)
==================================================================
running: pre-alpha JEM 4.x (custom version) + Joomla 4.0.0-beta7 + PHP 7.3

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

J3+Styling - Backend - Events view 6 years 7 months ago #20470

  • Bluefox
  • Bluefox's Avatar Topic Author
  • Offline
  • Moderator
  • Moderator
  • Posts: 4525
  • Thank you received: 492
Make date fields smaller

It looks to me that the date fields are a bit to large. It happens as we are limiting the format (%Y-%m-%d) instead of also outputting the time but as default the calendar field will get a input-medium attached to it.

To change that you can do the following..
File: ...administrator/components/com_jem/views/events/tmpl/default.php

change
<label class="filter-hide-lbl" for="filter_begin"><?php echo JText::_('COM_JEM_EVENTS_FILTER_STARTDATE'); ?></label>
<?php echo JHtml::_('calendar', $this->state->get('filter_begin'), 'filter_begin', 'filter_begin', '%Y-%m-%d' , array('size'=>10, 'onchange'=>"this.form.fireEvent('submit');this.form.submit()"));?>

<label class="filter-hide-lbl" for="filter_end"><?php echo JText::_('COM_JEM_EVENTS_FILTER_ENDDATE'); ?></label>
<?php echo JHtml::_('calendar', $this->state->get('filter_end'), 'filter_end', 'filter_end', '%Y-%m-%d' , array('size'=>10, 'onchange'=>"this.form.fireEvent('submit');this.form.submit()"));?>


To
<label class="filter-hide-lbl" for="filter_begin"><?php echo JText::_('COM_JEM_EVENTS_FILTER_STARTDATE'); ?></label>
<?php echo JHtml::_('calendar', $this->state->get('filter_begin'), 'filter_begin', 'filter_begin', '%Y-%m-%d' , array('class'=>'input-small','size'=>10, 'onchange'=>"this.form.fireEvent('submit');this.form.submit()"));?>

<label class="filter-hide-lbl" for="filter_end"><?php echo JText::_('COM_JEM_EVENTS_FILTER_ENDDATE'); ?></label>
<?php echo JHtml::_('calendar', $this->state->get('filter_end'), 'filter_end', 'filter_end', '%Y-%m-%d' , array('class'=>'input-small','size'=>10, 'onchange'=>"this.form.fireEvent('submit');this.form.submit()"));?>

in that case we are defining a new class to be used for the date field elements.
(won't respond to PM)
==================================================================
running: pre-alpha JEM 4.x (custom version) + Joomla 4.0.0-beta7 + PHP 7.3

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

J3+Styling - Backend - Events view 6 years 7 months ago #20471

  • Bluefox
  • Bluefox's Avatar Topic Author
  • Offline
  • Moderator
  • Moderator
  • Posts: 4525
  • Thank you received: 492
Search / Clear to icons

To change the clear/search you can do this
File: ..../administrator/components/com_jem/views/events/tmpl/default.php

change
	<fieldset id="filter-bar">
		<div class="filter-search fltlft">
			<?php echo $this->lists['filter']; ?>
			<input type="text" name="filter_search" id="filter_search" placeholder="<?php echo JText::_('COM_JEM_SEARCH');?>" value="<?php echo $this->escape($this->state->get('filter_search')); ?>" class="text_area" onChange="document.adminForm.submit();" />
			<button type="submit"><?php echo JText::_('JSEARCH_FILTER_SUBMIT'); ?></button>
			<button type="button" onclick="document.id('filter_search').value='';this.form.submit();"><?php echo JText::_('JSEARCH_FILTER_CLEAR'); ?></button>
		</div>
		<div class="filter-select fltrt">
			<label class="filter-hide-lbl" for="filter_begin"><?php echo JText::_('COM_JEM_EVENTS_FILTER_STARTDATE'); ?></label>
			<?php echo JHtml::_('calendar', $this->state->get('filter_begin'), 'filter_begin', 'filter_begin', '%Y-%m-%d' , array('size'=>10, 'onchange'=>"this.form.fireEvent('submit');this.form.submit()"));?>

			<label class="filter-hide-lbl" for="filter_end"><?php echo JText::_('COM_JEM_EVENTS_FILTER_ENDDATE'); ?></label>
			<?php echo JHtml::_('calendar', $this->state->get('filter_end'), 'filter_end', 'filter_end', '%Y-%m-%d' , array('size'=>10, 'onchange'=>"this.form.fireEvent('submit');this.form.submit()"));?>

			<select name="filter_state" class="inputbox" onchange="this.form.submit()">
			<option value=""><?php echo JText::_('JOPTION_SELECT_PUBLISHED');?></option>
			<?php echo JHtml::_('select.options', JHtml::_('jgrid.publishedOptions'), 'value', 'text', $this->state->get('filter_state'), true);?>
			</select>

			<select name="filter_access" class="inputbox" onchange="this.form.submit()">
				<option value=""><?php echo JText::_('JOPTION_SELECT_ACCESS');?></option>
				<?php echo JHtml::_('select.options', JHtml::_('access.assetgroups'), 'value', 'text', $this->state->get('filter.access'));?>
			</select>
		</div>
	</fieldset>
	<div class="clr"> </div>

To:
<fieldset id="filter-bar">
		<div class="filter-search pull-left btn-wrapper input-append">
			<?php echo $this->lists['filter']; ?>
			<input type="text" name="filter_search" id="filter_search" placeholder="<?php echo JText::_('COM_JEM_SEARCH');?>" value="<?php echo $this->escape($this->state->get('filter_search')); ?>" class="text_area" onChange="document.adminForm.submit();" />
			<button class="btn" type="submit"><span class="icon-search"></span></button>
			<button class="btn" type="button" onclick="document.id('filter_search').value='';this.form.submit();"><span class="icon-delete"></span></button>
		</div>
		<div class="filter-select pull-right">
			<label class="filter-hide-lbl" for="filter_begin"><?php echo JText::_('COM_JEM_EVENTS_FILTER_STARTDATE'); ?></label>
			<?php echo JHtml::_('calendar', $this->state->get('filter_begin'), 'filter_begin', 'filter_begin', '%Y-%m-%d' , array('class'=>'input-small','size'=>10, 'onchange'=>"this.form.fireEvent('submit');this.form.submit()"));?>

			<label class="filter-hide-lbl" for="filter_end"><?php echo JText::_('COM_JEM_EVENTS_FILTER_ENDDATE'); ?></label>
			<?php echo JHtml::_('calendar', $this->state->get('filter_end'), 'filter_end', 'filter_end', '%Y-%m-%d' , array('class'=>'input-small','size'=>10, 'onchange'=>"this.form.fireEvent('submit');this.form.submit()"));?>

			<select name="filter_state" class="inputbox" onchange="this.form.submit()">
			<option value=""><?php echo JText::_('JOPTION_SELECT_PUBLISHED');?></option>
			<?php echo JHtml::_('select.options', JHtml::_('jgrid.publishedOptions'), 'value', 'text', $this->state->get('filter_state'), true);?>
			</select>

			<select name="filter_access" class="inputbox" onchange="this.form.submit()">
				<option value=""><?php echo JText::_('JOPTION_SELECT_ACCESS');?></option>
				<?php echo JHtml::_('select.options', JHtml::_('access.assetgroups'), 'value', 'text', $this->state->get('filter.access'));?>
			</select>
		</div>
	</fieldset>
	<div class="clearfix"> </div>

it wil add things like input-append and the btn class.

You can also add a bit of spacing between filter_type and search
#filter-bar input#filter_search {
	margin-left: 10px;
}
(won't respond to PM)
==================================================================
running: pre-alpha JEM 4.x (custom version) + Joomla 4.0.0-beta7 + PHP 7.3
Attachments:

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

Last edit: by Bluefox.

J3+Styling - Backend - Events view 6 years 7 months ago #20472

  • Bluefox
  • Bluefox's Avatar Topic Author
  • Offline
  • Moderator
  • Moderator
  • Posts: 4525
  • Thank you received: 492
JLayout
Ofcourse we can work with JLayout: docs.joomla.org/J3.x:JLayout_Improvements_for_Joomla! but that's for someone else.
(won't respond to PM)
==================================================================
running: pre-alpha JEM 4.x (custom version) + Joomla 4.0.0-beta7 + PHP 7.3

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

Last edit: by Bluefox.
  • Page:
  • 1
Time to create page: 0.636 seconds

Donate

If you find JEM useful and if you use it on your site, please consider a donation to the project.

Private Messages

You are not logged in.

Follow us......