Widget bullet fix

  • Resolved finnj

    (@finnj)


    12 years ago

    Hi Authors,

    a small enhancement request:

    I am using events manager with the suffusion theme, and I need to remove the bullets added by the <ul> <li> code of the widget.

    The best way I have been able to fix this, is to add a simple div statement to the em_events.php (widget folder), and then use custom include css (from suffusin theme) to remove the bullets:
    .em_event_widget ul li {background-image:none !important;}

    The change it looks like this: Before, After

    The code change to em_events.php is below, and I hope you can add this (or something similar we can hook into – I believe it is easy and low risk ?? :

    $events = EM_Events::get(apply_filters('em_widget_events_get_args',$instance));
		//Hook enabling css formatting of eventlist widget
		echo "<div class='em_event_widget'>";
		echo "
<ul>";
		$li_wrap = !preg_match('/^
<li>/i', trim($instance['format']));
		if ( count($events) > 0 ){
			foreach($events as $event){
				if( $li_wrap ){
					echo '</li>
<li>'. $event->output($instance['format']) .'</li>
';
				}else{
					echo $event->output($instance['format']);
				}
			}
		}else{
			echo '
<li>'.$instance['no_events_text'].'</li>
';
		}
		if ( !empty($instance['all_events']) ){
			$events_link = (!empty($instance['all_events_text'])) ? em_get_link($instance['all_events_text']) : em_get_link(__('all events','dbem'));
			echo '<li class="all-events-link">'.$events_link.'';
		}
		echo "</ul>
";
		//End hook enabling css formatting of eventlist widget
		echo "</div>";
	    echo $args['after_widget'];

    Then I use this code to build the widget list:

    <table>
<tr>
<td>
<div style=					"border: 1px solid #c2c2c2;
							border-top-color: #ffffff;
							border-radius: 5px;
							overflow: hidden;
							color: #525252;
							float: left;
							font-weight: normal;
							background-color: #f9f9f9;
							background-repeat: no-repeat;
							line-height: 1.2em;
							margin: 0px 0px;
							text-align: center;
							width: 3.5em;
							font-size: 11px;
							">
<div style=					"background: #617284;
							text-transform: uppercase;
							color: #ffffff;
							">
	#D</div>
<div style=					"padding: 0.2em 0 0.1em !important;
							font-size: 12px;
							font-weight: bold;
							">
	#j</div>
<div style="		line-height: 1.2em;">
	#M</div>
</div>
</td>
<td style="padding=1px 5px">#_EVENTLINK@#_LOCATIONNAME
</br>
</td>
</tr>
</table>

    https://www.ads-software.com/extend/plugins/events-manager/

Viewing 6 replies - 1 through 6 (of 6 total)
  • agelonwl

    (@angelonwl)

    have you tried to hook into em_widget_events_get_args filter instead?

    https://codex.www.ads-software.com/Function_Reference/add_filter

    Thread Starter finnj

    (@finnj)

    My explanation was probably not good enough…

    It is only in the event widget I want to remove the bullets created by <ul>

    I would like Marcus to add the following code into the em_events.php (widget folder) so I can avoid php changes :

    //Hook enabling css formatting of eventlist widget
		echo "<div class='em_event_widget'>";

    To me it seems like a simple and no-risk change, but if the same can done in a smarter way it is fine by me :).

    Having the <div> to hook into will enable users to change the styling for the entire widget, not only withing the <ul> scope.

    if it can be done without php, and without this change, I would like a suggestion for that.
    Marcus answered:

    currently there’s no way to prevent this from being a list

    in this post:
    https://www.ads-software.com/support/topic/widget-bullets?replies=3

    Plugin Author Marcus (aka @msykes)

    (@netweblogic)

    The above wouldn’t work because many people are already assuming it comes as a UL list. Will change this in the future when time permits so you can use your own header/footer html.

    What you can do now is just copy the widget php file, and rename the widget so you create your own widget. Then, edit at will and include that one instead of our one.

    You’d want to edit the class name, this line:
    parent::WP_Widget(false, $name = 'Events', $widget_ops);

    and the last line in that file so you can differentiate between ours and yours

    Thread Starter finnj

    (@finnj)

    Hi Marcus,

    I am not asking you to remove the UL, and with the proposed solution it should work as previously unless you add the changes to your theme css. I can see that it could be difficult to see what i suggested:

    Add the DIV statement just before the UL statement:

    echo "<div class='em_event_widget'>";
echo "<ul>";

    and a close of the DIV just after the close of UL

    Unless you add em_event_widget reference in you css files, UL should behave as the DIV statement wasn’t there, and as before.

    The name em_event_widget, can be any unique name, it is just my suggestion.

    the DIV statement enables users (me) to remove the bullets by adding this to the custom includes in my theme (Suffusion):
    .em_event_widget ul li {background-image:none !important;}

    As far as I know I would still have to modify php files each time you release an upgrade, if I made a copy of the widget, as it needs to be loaded through the plugin.

    Apart for this change request i love your plugin, and I especially like the posibilities to modify output you have implemented, it is just the bullets in the widget I have been unable to get rid of.

    Thanks for looking into this.

    Plugin Author Marcus (aka @msykes)

    (@netweblogic)

    i see what you mean now. however this should already be possible, WP adds classes to surrounding WP widgets, specific to each widget type. can’t you use that? try checking out your source code with e.g. Chrome’s element inspector (right click on your widget > Inspect Element).

    Thread Starter finnj

    (@finnj)

    Hi Marcus,

    I never got around to try this, but after your new version I had to ??

    You were right, bullets can be removed using the following css:

    #em_widget-3 ul li {
padding-left:1px !important;
background-image:none !important;
}

    Why it is em_widget-3 I dont know, but it works ??

    Thanks

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Widget bullet fix’ is closed to new replies.