Welcome, Guest
Username: Password: Remember me
Forgot your password? Forgot your username? Create an account
Forum
JEM - an Event Manager for Joomla
General JEM topics, -help and -tutorials
Tutorials
Module-wide - icomoon font for clock display + label for date
  • Page:
  • 1

TOPIC:

Module-wide - icomoon font for clock display + label for date 7 years 4 months ago #20224

  • Bluefox
  • Bluefox's Avatar Topic Author
  • Offline
  • Moderator
  • Moderator
  • Posts: 4523
  • Thank you received: 493
Joomla version: 3
JEM: 2.1.5

Just a bit info about styling the module-wide and it would be good if you do know a bit about how to modify php pages.
Was adapting the module and maybe it can be usefull to others. Won't explain it into detail.



Blue label
As you can see in the image there is a blue label around the date + time. To achieve that i had to adapt the code in the helper + tmpl file.

In the helper we do define variables for day+month so we can catch it in the tmpl.
$eventdate = new JDate($row->dates);
$eventday = $eventdate->format('d');
$eventmonth = $eventdate->format('M');			
$lists[$i]->eventday    = $eventday;

Be aware my events do have a time+date, but if you have events without time+date you have to do a bit extra.
In the tmpl there is a new td to display the day+month
<col width="5%" class="jemmodw_col_cal" />
...............................................................................
<td class="center">
		<div class="label label-info">
			<div>
			<?php 
			echo $item->eventday;
			?>
			</div>
			<div>
			<?php 
			echo $item->eventmonth;
			?>
			</div>
		</div>
		</td>
if the label doesn't appear then there is a big chance that the template you are using does not support class.


clock
In the image there is also a clock, din't like the current image so did replace it.
Within the stylesheet we can remove these lines for the time class
padding-left: 20px;
background: url(img/time.png) no-repeat;

in the tmpl we can add this line
<span class="icon-clock" style="font-size:12px;"> </span>
if the clock does not appear then there is a big chance that your template does not support the icon class and if that's the case then Icomoon isn't supported.


Make whole row clickable
One additional thing i wanted to achieve is to have the whole row clickable, this as there only links to the events to be displayed (in my case) and to achieve that we can do the following.
<script>
jQuery(document).ready(function($) {
    $(".clickable-row").click(function() {
        window.document.location = $(this).data("href");
    });
});
</script>
<style>
div#jemmodulewide table.eventset tr:hover td {
	cursor: pointer !important;
}
</style>
..............
<?php foreach ($list as $item) : ?>
	<tr class='clickable-row' data-href=<?php echo $item->eventlink; ?>>
...................................
Info: stackoverflow.com/questions/17147821/how...-clickable-as-a-link


styling table
to style the table the class "table" can be added
<table class="eventset table table-hover" summary="mod_jem_wide">
the table-hover class makes sure you will have a color when hovering.


remove title atributes
Something i did find annoying was that hovering a link it was showing text, this happens as there is a "title" atrribute.
When you remove it there won't be a tip displayed.


remove blank images
The helper is defining blank images and it's displayed in the module. in my case i didn't want to display the images so removed the td's.

just some info....
(won't respond to PM)
==================================================================
running: pre-alpha JEM 4.x (custom version) + Joomla 4.0.0-beta7 + PHP 7.3
Attachments:
The following user(s) said Thank You: jojo12

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

Last edit: by Bluefox.

Module-wide - icomoon font for clock display + label for date 7 years 4 months ago #20225

  • Bluefox
  • Bluefox's Avatar Topic Author
  • Offline
  • Moderator
  • Moderator
  • Posts: 4523
  • Thank you received: 493
am thinking of adding an option to change the color of the label, this way the featured items can be be more eye-catching.
But there are other ways to achieve it.
(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.

Module-wide - icomoon font for clock display + label for date.. 7 years 4 months ago #20227

  • Bluefox
  • Bluefox's Avatar Topic Author
  • Offline
  • Moderator
  • Moderator
  • Posts: 4523
  • Thank you received: 493
hmm, just noticed that there doesn't to be a way to link to a "more events.... or something like that.
It's possible to set a limit but as there are probably more events then it might be nice to offer a way to link to the rest of the events.

right, some more coding to be done.
(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.

Module-wide - icomoon font for clock display + label for date.. 7 years 4 months ago #20229

  • Bluefox
  • Bluefox's Avatar Topic Author
  • Offline
  • Moderator
  • Moderator
  • Posts: 4523
  • Thank you received: 493
Radio buttons - backend


You probably noticed the radio buttons in the backend.
They are not styled in the Joomla 3 (to account for joomla 2.x) way but it can be done by editing the xml and add the needed class. Frankly i don't like how it's displayed currently so did alter it.

Did add the class
class="btn-group btn-group-yesno"

And when applied it will be looking like


yep, in case of an update it will be overwritten but do know how to modify files so for me it doesn't matter.
(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.

Module-wide - icomoon font for clock display + label for date.. 7 years 4 months ago #20230

  • Bluefox
  • Bluefox's Avatar Topic Author
  • Offline
  • Moderator
  • Moderator
  • Posts: 4523
  • Thank you received: 493

Bluefox wrote: hmm, just noticed that there doesn't to be a way to link to a "more events.... or something like that.
It's possible to set a limit but as there are probably more events then it might be nice to offer a way to link to the rest of the events.
right, some more coding to be done.


The thing with a link to more events can be achieved but requires some coding, for example by using the userStates.

Within the helper.
# Retrieve the available Events
		$events = $model->getItems();
		
		$totalEvents = $model->getTotal();
		$totalCurrentEvents = count($events);
		
		$app = JFactory::getApplication();
		$app->setUserState('totalEvents',$totalEvents);
		$app->setUserState('totalCurrentEvents',$totalCurrentEvents);
		
		# Loop through the result rows and prepare data
		$lists = array();
		$i     = 0;

within the module php file
// check if any results returned
if (empty($list)) {
	return;
}

$totalEvents = $app->getUserState('totalEvents');
$totalCurrentEvents = $app->getUserState('totalCurrentEvents');
$showMoreEvents = false;

if ($totalEvents > $totalCurrentEvents) {
	$showMoreEvents = true;
}

And then in the template below the foreach loop..
<?php 
if ($showMoreEvents) {
?>
<tr class='clickable-row' data-href="...link....">
	<td colspan="20">
		<div class="btn btn-success" style="float:right">
			Klik hier voor meer activiteiten...
		</div>
	</td>
</tr>
<?php
}
?>

and if you want to have an icon then it can be something like
<?php 
if ($showMoreEvents) {
?>
<tr class='clickable-row' data-href="...link....">
	<td colspan="20">
		<div style="float:right">
			
			<span class="btn btn-success">
			<span class="icon-list" style="font-size:12px;"> </span>
				Klik hier voor meer activiteiten...
			</span>
		</div>
	</td>
</tr>
<?php
}
?>



it's probably code that can be done better, but well it's just an example.
(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
Forum
JEM - an Event Manager for Joomla
General JEM topics, -help and -tutorials
Tutorials
Module-wide - icomoon font for clock display + label for date
Time to create page: 0.415 seconds

Downloads

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