Plugin Author
Guido
(@guido07111975)
Hi Andrew,
Thanks.
1) you can try adding this Custom CSS (both date fields get 50% width):
#vsel .vsel-meta-date {width:50%; float:left;}
2) My plugin already hooks into template file single.php (to display a single event)but until now I don’t know how to hook into other template files. And I have no reason to do so. The problem with other template files is that the code-structure can be very different. And file single.php is a common file and used by almost every theme. But what do you want?
Guido
Hi Guido
Thanks for the reply.
1) The css route is a good one – only thing is what I would love to do is to find a way to insert a hyphen ‘-‘ in betwen the dates.
So if an event starts on July 1st and ends on July 6th – it could be shown as
‘July 1st – July 6th’. I tried in the template but couldn’t figure out how to combine the different blocks of code and insert ‘-‘ in the middle! Hope that makes sense.
2) So I made a change to the vsel-upcoming file of yours so the Date shows before the Event Title.
However of course if the plugin gets updated then this could be lost.
I use Rocket Theme ‘themes’ using the Gantry framework.
Sometimes it is possible to override individual plug in files (like the Vsel-Upcoming.php) by adding it into a custom section within the RT theme.
Best
Andrew
What a good idea!
I changed .vsel-meta-date to width:auto so that two dates appeared next to each other. However this had a knock-on effect on time, location and link as they all got added on at the end of the date. To resolve this I coded them as width:100% so that each appeared on its own line.
This resulted with the following CSS code.
#vsel .vsel-meta-date {width:auto; float:left;}
#vsel .vsel-meta-time {width:100%; float:left;}
#vsel .vsel-meta-location {width:100%; float:left;}
#vsel .vsel-meta-link {width:100%; float:left;}
#vsel .vsel-meta {width:46%; float:left;}
#vsel .vsel-image-info {width:50%; float:right;}
The remaining two lines are provided to change the width of the LH and RH columns to the sizes I wanted.
To get a hyphen between the two dates I used the shortcode to remove the date_label and start_label and to set the end label to space hyphen space.
[vsel date_label="%s" start_label="%s" end_label=" - %s"]
If you want a look at the final result, you’ll find it at http://christiancanoe.co.uk/calendar/
Amazing hendosdad
Look great on your site
Thanks for this
Greatly appreciated
Andrew
Plugin Author
Guido
(@guido07111975)
Great to “hear” you’ve figured it out together 🙂
Guido
Just to add to @hendosdad’s awesome input!
I changed the placement of the “-” hyphen
[vsel date_label="%s" start_label="%s - " end_label="%s"]
To appear on the start label and not the end label
Also just for cosmetic neatness added a small bit of padding to add space between the hyphen and the dates
#vsel .vsel-meta-date {width:auto; float:left;padding-right:2px;}
Andrew
Hey Guido
Love the spirit of working together like this!
Andrew
Inspired by https://wordpress.org/support/users/sammoda82/, I decided to replace the normal hyphen with an em dash in the shortcode by using the special character icon in the toolbar.
[vsel date_label="%s" start_label="%s" end_label= "—%s"]
