Styling events list widget

  • Resolved Daniele

    (@lele_82)


    11 years, 10 months ago

    Hi,

    i would like to manage every singular
    list element of the widget events list.

    i have this code: 

    $events = EM_Events::get(apply_filters('em_widget_events_get_args',$instance));
		echo "<ul>";
		$li_wrap = !preg_match('/^<li>/i', trim($instance['format']));
		if ( count($events) > 0 ){
			foreach($events as $event){
				if( $li_wrap ){
					echo '<li>'. $event->output($instance['format']) .'</li>';
				}else{
					echo $event->output($instance['format']);
				}
			}
		}else{
			echo '<li>'.$instance['no_events_text'].'</li>';
		}

    This line

    echo '<li>'. $event->output($instance['format']) .'</li>';

    is the interested element… This generates this: 

    <ul>
<li>date format</li>
<li>place</li>
</ul>

    How can i style these elements individually?

Viewing 2 replies - 1 through 2 (of 2 total)

  • You need to add some css to theme, this can be done in different ways, in some themes you can add custom css in the theme interface others you will have to edit a css file.

    But first you will need to identify the id you need to hook into, this can be done with Chrome. When the widget is displayed on the screen, right click on the widget, and look for: #em_widget-3, where the number 3 can be change – I am using the below to remove the bullets.

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

    In addition to this, you can style the content (except the bullets) with <style> directly in the content you define in the widget – you can see an example here and the code to style below

    <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<br>@#_LOCATIONNAME
</br>
</td>
</tr>
</table>

    Hi, I used this code for customize my widget, but I want to delete list and work only with table elements.
    The widget is visible in this page https://www.officinebeat.com/en/events/.

    The html generated by the widget is:

    <ul>

    <li>
        <table class="table table-cal">
            <tbody>
                <tr>
                    <td width="8%">
                        <div style="border: 1px solid #02c0e6; border-radius: 0 5px 0 5px; overflow: hidden; color: #525252; float: left; font-weight: normal; line-height: 1.3em; margin: 0px 0px; text-align: center; width: 3.4em; font-size: 10px;">
                            <div style="background: #02c0e6; text-transform: uppercase; color: #ffffff;"> … </div>
                            <div style="padding: 0.2em 0 0.1em !important; background: #fff; font-size: 11px; font-weight: bold;"> … </div>
                            <div style="	line-height: 1.2em; background: #fff;"> … </div>
                        </div>
                    </td>
                    <td width="92%">
                        <div style=" font-size: 0.8em; font-weight: bold; color: #515151; line-height: 1.5em">
                            <a href="https://www.officinebeat.com/en/event/a-trio-modern-jazz/"> … </a>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </li>

    How can I delete list mark-up elements?

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Styling events list widget’ is closed to new replies.