Widget use

Resolved todAnthony
(@todanthony)

12 years, 2 months ago

http://cajunrollergirls.com/site/

Plugin is great. I want the widget in my header section as you see it. When I use the “add Link To Event Page” option where it says SHOW ALL EVENTS, the spacing on the entire widget blocks over the social widget icons below it and that cannot be clicked. Is there a way to get that SHOW ALL EVENTS link to move higher? When I remove this option then my social widget is clickable.

Also I would like to make that a bit nicer, Maybe a button for SHOW ALL EVENTS and I’d like to change up the fonts and colors for the whole text in the widget.

TY in advanced

tod

https://wordpress.org/plugins/event-list/

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

Thread Starter

todAnthony

(@todanthony)

12 years, 2 months ago

WP version is 3.8.1

Thread Starter

todAnthony

(@todanthony)

12 years, 2 months ago

Please disregard my query on the ‘covering’ issue on the header widget. I adjusted sizes of other things and I am happy with this outcome.

I still would like advice on making the plain text look nicer and the possibility of a button to SHOW ALL EVENTS.

TY again sirs.

tod

wptestert

(@wptestert)

12 years, 2 months ago

I am in the helping mood today, so here I go

first, make these small changes in two files (latest version 0.6.4)

– includes/sc_event-list.php

on line 389, replace this:

private function html_date( $date ) {
		$out = '<div class="event-weekday">'.mysql2date( 'D', $date ).'</div>';
		$out .= '<div class="event-day">'.mysql2date( 'd', $date ).'</div>';
		$out .= '<div class="event-month">'.mysql2date( 'M', $date ).'</div>';
		$out .= '<div class="event-year">'.mysql2date( 'Y', $date ).'</div>';
		return $out;
	}

by this:

private function html_date( $date ) {
		//*custommod $out = '<div class="event-weekday">'.mysql2date( 'D', $date ).'</div>';
	    $out .= '<div class="event-month">'.mysql2date( 'M', $date ).'</div>';
		//*custommod first month, then day
		$out .= '<div class="event-day">'.mysql2date( 'd', $date ).'</div>';
	    $out .= '<div class="event-year">'.mysql2date( 'Y', $date ).'</div>';
		return $out;
	}

then in the file:

– includes/widget.php

on line 178

replace this:

echo '<div style="clear:both"><a title="'.$instance['link_to_page_caption'].'" href="'.$instance[ 'url_to_page'].'">'.$instance['link_to_page_caption'].'</a></div>';

by this:

echo '<div style="clear:both"><a class="button" title="'.$instance['link_to_page_caption'].'" href="'.$instance[ 'url_to_page'].'">'.$instance['link_to_page_caption'].'</a></div>';

and last, put this in your stylesheet, better put in your regular style.css, so it won’t be affected by updates of this great plugin:

/* custommod event header styles */
.header-widget .event-list .start-date, .event-list .end-date { width:100% !important;} /* overrule other styles */
.header-widget .event-date {
	float: left;
	margin: 0 0.4em 1.5em 0;
	float: left;
	width: 52px;
	text-align: center;
	margin: 0 12px 5px 0;
	border: solid 1px #bebebe;
	background-color: #fff;
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4xIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
	background-image: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(0,0,0,0.1) 100%);
	background-image: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(0,0,0,0.1) 100%);
	background-image: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(0,0,0,0.1) 100%);

	border-radius: 5px;
	box-shadow: 0 1px 1px rgba(0,0,0,.15);

}

.header-widget .event-list .start-date, .event-list .end-date {
	text-align: center;
	width: 3.2em;
	border-radius: 5px;
	background-color: rgb(230,230,230);
}

.header-widget .event-list .start-date {
	float: left;
}
.header-widget div.start-date div {
float: none;
}
.header-widget .event-list .end-date {
	margin-left: 3.8em;
}

.header-widget .event-weekday {
	font-size: 0.8em;
	text-transform: uppercase;
}

.header-widget .event-day {
	color: #666;
	padding: 2px 0 1px;
	font: bold 18px/100% Arial, Helvetica, sans-serif;
	display: block;

}

.header-widget .event-month {
	color: #fff;
	font: 11px/100% Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	letter-spacing: 1px;
	display: block;
	padding: 2px 0;
	width: 100%;
	position: relative;
	left: -1px;
	top: -1px;
	border: solid 1px #a11216;
	background-color: #e0161d;
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjUiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
	background-image: -moz-linear-gradient(top,  rgba(255,255,255,.2) 0%, rgba(0,0,0,.2) 100%);
	background-image: -webkit-linear-gradient(top,  rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%);
	background-image: linear-gradient(to bottom,  rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%);

	box-shadow: 0 1px 0 rgba(0,0,0,.2);
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}

.header-widget .event-year {
		color: #999;
	padding: 0 0 4px;
	font: 10px/100% Arial, Helvetica, sans-serif;
	display: block;
}

.header-widget  .event-title h3 {
color: #fff;
}

.header-widget .button {
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
	background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
	background-color:#ededed;
	-webkit-border-top-left-radius:4px;
	-moz-border-radius-topleft:4px;
	border-top-left-radius:4px;
	-webkit-border-top-right-radius:4px;
	-moz-border-radius-topright:4px;
	border-top-right-radius:4px;
	-webkit-border-bottom-right-radius:4px;
	-moz-border-radius-bottomright:4px;
	border-bottom-right-radius:4px;
	-webkit-border-bottom-left-radius:4px;
	-moz-border-radius-bottomleft:4px;
	border-bottom-left-radius:4px;
	text-indent:0px;
	border:1px solid #dcdcdc;
	display:inline-block;
	color:#777777;
	font-family:arial;
	font-size:14px;
	font-weight:bold;
	font-style:normal;
	height:22px;
	line-height:22px;
	width:142px;
	text-decoration:none;
	text-align:center;
	text-shadow:1px 1px 0px #ffffff;
}
.header-widget .button:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
	background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
	background-color:#dfdfdf;
}

.header-widget .button:active {
	position:relative;
	top:1px;
}

/* custommod event header styles */

Thread Starter

todAnthony

(@todanthony)

12 years, 2 months ago

Alot to ingest here so I will work on it this weekend. I thank you for the help.

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

The topic ‘Widget use’ is closed to new replies.

Tags