J3+Styling - Backend - Events view

Bluefox
Topic Author
Offline
Moderator
Posts: 4529
Thanks: 493

J3+Styling - Backend - Events view

9 years 3 weeks ago - 9 years 1 week ago

#20468

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

Code:

JToolBarHelper::title(JText::_('COM_JEM_EVENTS'), 'events');

change it to

Code:

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

Code:

.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

Code:

.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.....

Attachments:

Last edit: 9 years 1 week ago by Bluefox.

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

Bluefox
Topic Author
Offline
Moderator
Posts: 4529
Thanks: 493

Re: J3+Styling - Backend - Events view

9 years 3 weeks ago

#20469

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

Code:

/* align radio buttons horizontally */
.inputbox {
	/* margin:5px; */
	cursor:pointer;
}

it's will disable the line of the margin.

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

Bluefox
Topic Author
Offline
Moderator
Posts: 4529
Thanks: 493

Re: J3+Styling - Backend - Events view

9 years 3 weeks ago

#20470

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

Code:

<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

Code:

<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.

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

Bluefox
Topic Author
Offline
Moderator
Posts: 4529
Thanks: 493

Re: J3+Styling - Backend - Events view

9 years 3 weeks ago - 9 years 3 weeks ago

#20471

Search / Clear to icons

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

change

Code:

	<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:

Code:

<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

Code:

#filter-bar input#filter_search {
	margin-left: 10px;
}

Attachments:

Last edit: 9 years 3 weeks ago by Bluefox.

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

Bluefox
Topic Author
Offline
Moderator
Posts: 4529
Thanks: 493

Re: J3+Styling - Backend - Events view

9 years 3 weeks ago - 9 years 3 weeks ago

#20472

JLayout
Ofcourse we can work with JLayout: docs.joomla.org/J3.x:JLayout_Improvements_for_Joomla ! but that's for someone else.

Last edit: 9 years 3 weeks ago by Bluefox.

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

help to better help you:

J3+Styling - Backend - Events view

J3+Styling - Backend - Events view

Attachments:

Re: J3+Styling - Backend - Events view

Re: J3+Styling - Backend - Events view

Re: J3+Styling - Backend - Events view

Attachments:

Re: J3+Styling - Backend - Events view