WordPress.org

Ready to get started?Download WordPress

Forums

Events Manager
[resolved] Styling events list widget (3 posts)

  1. Daniele
    Member
    Posted 1 year 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?

  2. finnj
    Member
    Posted 1 year ago #

    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>
  3. NicoWp
    Member
    Posted 10 months ago #

    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 http://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="http://www.officinebeat.com/en/event/a-trio-modern-jazz/"> … </a>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </li>

    How can I delete list mark-up elements?

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.