Title: Our customization
Last modified: January 13, 2018

---

# Our customization

 *  [dreambowl](https://wordpress.org/support/users/dreambowl/)
 * (@dreambowl)
 * [8 years, 5 months ago](https://wordpress.org/support/topic/our-customization/)
 * Hello,
 * thank you for this awesome plugin!
 * For our needs we had some things to change:
 * vsel-list.php
 *     ```
       		if ( !empty($page_start_date) && !empty($page_end_date) ) {
       			// error in case of wrong date
       			if ($page_start_date > $page_end_date) {
       				$output .= '<p1 class="vsel-meta-date vsel-meta-error-date">';
       				$output .= esc_attr__( 'Error: please reset date', 'very-simple-event-list' ); 
       				$output .= '</p1><br />';
       			}
       			if ( ($page_date_hide != 'yes') ) {
       				if ($page_end_date > $page_start_date) {
       					if ($page_date_combine == "yes") {
       						$output .= '<p1 class="vsel-meta-date vsel-meta-combined-date">';
       						$output .= sprintf(esc_attr($page_start_label), '<span>'.date_i18n( get_option( 'date_format' ), esc_attr($page_start_date) ).'</span>' ); 
       						$output .= ' - ';
       						$output .= sprintf(esc_attr($page_end_label), '<span>'.date_i18n( get_option( 'date_format' ), esc_attr($page_end_date) ).'</span>' ); 
       						$output .= '</p1><br />';
       					} else {
       						$output .= '<p1 class="vsel-meta-date vsel-meta-start-date">';
       						$output .= sprintf(esc_attr($page_start_label), '<span>'.date_i18n( get_option( 'date_format' ), esc_attr($page_start_date) ).'</span>' ); 
       						$output .= '</p1><br />';
       						$output .= '<p1 class="vsel-meta-date vsel-meta-end-date">';
       						$output .= sprintf(esc_attr($page_end_label), '<span>'.date_i18n( get_option( 'date_format' ), esc_attr($page_end_date) ).'</span>' ); 
       						$output .= '</p1><br />';
       					}
       				} elseif ($page_end_date == $page_start_date) {
       					$output .= '<p1 class="vsel-meta-date vsel-meta-single-date">';
       					$output .= sprintf(esc_attr($page_date_label), '<span>'.date_i18n( get_option( 'date_format' ), esc_attr($page_end_date) ).'</span>' ); 
       					$output .= '</p1><br />';
       				}
       			}
       		}
       		if ( ($page_time_hide != 'yes') ) {
       			if (!empty($page_time)){
       				$output .= '<p1 class="vsel-meta-time">';
       				$output .= sprintf(esc_attr($page_time_label), '<span>'.esc_attr($page_time).'</span>' ); 
       				$output .= '</p1><br />';
       			}
       		}
       		if ( ($page_location_hide != 'yes') ) {
       			if (!empty($page_location)){
       				$output .= '<p1 class="vsel-meta-location">';
       				$output .= sprintf(esc_attr($page_location_label), '<span>'.esc_attr($page_location).'</span>' ); 
       				$output .= '</p1><br />';
       			}
       		}
       		if ( ($page_link_hide != 'yes') ) {
       			if (!empty($page_link)){
       				$output .= '<p1 class="vsel-meta-link">';
       				$output .= sprintf( '<a href="%1$s"'. $page_link_target .'>%2$s</a>', esc_url($page_link), esc_attr($page_link_label) ); 
       				$output .= '</p1><br />';
       			}
       		}
       ```
   
 * vsel-style.css
 *     ```
       /* Paragraph tag */
       #vsel p1 {line-height:1.6; background-color:rgba(0,0,0,0.7); margin:0 0 0 0; padding:2px 10px 2px 10px;}
       #vsel h4 {background-color:rgba(0,0,0,0.7);}
   
       /* Wrapper around single event in list */
       #vsel .vsel-content { width:100%; clear:both; float:left; margin:0 0 5px; padding:0 0 5px; border-bottom:1px solid #dbad55; position:relative;}
   
       /* Meta section */
       #vsel .vsel-meta {float:left; position:absolute; z-index:11;}
       #vsel .vsel-meta-full {clear:both;}
       #vsel .vsel-meta-title {margin:5px 0 5px 0; padding:5px 10px 5px 10px;}
   
       /* Image and info section */
       #vsel .vsel-image-info {width:100%; float:right; position:relative; z-index:10;}
       #vsel .vsel-image {max-width:100%; height:auto; float:right; margin:0 0 0 0; padding:0; border:0; position:relative; z-index:10;}
   
       /* Mobile */
       @media screen and (max-width:767px) { 
       	#vsel p1 {background-color:transparent; margin:0 0 0 0; padding:0;}
       	#vsel h4 {background-color:transparent;}
   
       	#vsel .vsel-meta {width:100%; clear:both; position:relative;}
       	#vsel .vsel-meta-title {margin:0 0 0 0; padding:0 0 0 0;}
   
       	#vsel .vsel-image-info {width:100%; clear:both; float:left; position:relative;}
       }
       ```
   
 * Tag p renamed to p1 because it didnt work with our Theme (own), the line break
   so the background is shown only behind existing text. Image in our case 992px
   width.
 * Screenshot: [https://imgur.com/XMfJvUV](https://imgur.com/XMfJvUV)
 * Maybe You can do this way of displaying in a future version of VSEL. Because 
   we stuck now in updating it 😉
 * Thank You!
 * Greets
    dreambowl

Viewing 1 replies (of 1 total)

 *  Plugin Author [Guido](https://wordpress.org/support/users/guido07111975/)
 * (@guido07111975)
 * [8 years, 5 months ago](https://wordpress.org/support/topic/our-customization/#post-9863041)
 * Hi,
 * I don’t fully understand what you mean.
 * If you want a background image for each event in list (that covers whole content
   area), you can do something like this:
 *     ```
       .vsel-content {background-image:url("my-background.jpg"); background-repeat:no-repeat;}
       ```
   
 * Guido

Viewing 1 replies (of 1 total)

The topic ‘Our customization’ is closed to new replies.

 * ![](https://ps.w.org/very-simple-event-list/assets/icon-256x256.png?rev=1415754)
 * [VS Event List](https://wordpress.org/plugins/very-simple-event-list/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/very-simple-event-list/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/very-simple-event-list/)
 * [Active Topics](https://wordpress.org/support/plugin/very-simple-event-list/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/very-simple-event-list/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/very-simple-event-list/reviews/)

 * 1 reply
 * 2 participants
 * Last reply from: [Guido](https://wordpress.org/support/users/guido07111975/)
 * Last activity: [8 years, 5 months ago](https://wordpress.org/support/topic/our-customization/#post-9863041)
 * Status: not a support question