|
LVLP
|
January 25, 2017 at 2:30 pm
Hi there,
Is it possible to make the upcoming event list so that it displays
the featured image on the left side and the event title and date on the right side in such a manner that the thumbnail is about the same height as the tekst next to it?
Hope i am making myself clear.
I would like to have a list of events that are neatly stacked each with a thumbnail and title/date.
thanks!
|
|
Josh
|
January 25, 2017 at 2:40 pm
Hi there,
In most cases, yes, and you’d add some Custom CSS code to the site to make this happen. If you can post a reply here and include a link to your web site page that has the upcoming event list, we can take a look and offer some CSS code suggestions.
|
|
LVLP
|
January 26, 2017 at 2:28 am
Thank you.
Our site is : http://www.lonnekevanleth.nl
The upcoming eventlist is on the homepage
|
|
Josh
|
January 26, 2017 at 10:00 am
Here’s one suggestion you can build on:
.ee-upcoming-events-widget-ul li {
position: relative;
height: 200px;
}
.ee-upcoming-events-widget-img-dv{
width: 50%
position: absolute;
top: 0;
margin-top: 1em;
}
h5.ee-upcoming-events-widget-title-h5{
width: 50%;
position: absolute;
top: 0;
right: 0;
}
@media (max-width: 979px) {
h5.ee-upcoming-events-widget-title-h5{
font-size: 2em;
margin-right: 1em;
width: auto
}
.ee-upcoming-events-widget-img-dv{
margin-top: 2em;
margin-left: 1em;
}
}
If you add dates to the markup, you’ll need to add some CSS to position those too.
|
|
LVLP
|
January 28, 2017 at 2:45 pm
HiJosh, Thank you it works,
Can you please go to this link: http://www.lonnekevanleth.nl There you will see the upcoming event list on the right. It is almost the way i would like it to be accept for the date that is still on the wrong side behind the thumbnail and a bit on the title .
Thanks!
|
|
Josh
|
January 30, 2017 at 2:14 pm
You’ll need to position the dates too. e.g.
.ee-event-datetimes-ul{
width: 50%;
position: absolute;
top: 30px;
right: 0;
}
|
|
LVLP
|
January 30, 2017 at 2:46 pm
Thanks Josh, but the code didn’t change anything in the upcoming events widget concerning the location of the date/time. Should i put :important! behind the code?
|
|
LVLP
|
January 31, 2017 at 12:31 am
Hi Josh now it works i forgot the }}
|
|
LVLP
|
January 31, 2017 at 12:52 am
Sorry its still a bit wrong, i have no clue how to fix this.
I have been trying to alter code but there is code missing i guess.
The date/time text is very small.
I should be : picture left, title and date and time right.
maybe if you have time…www.lonnekevanleth.nl
thanks!
|
|
Josh
|
January 31, 2017 at 10:40 am
Hi there,
I’m looking at what you have in your stylesheet, and what I posted here in the topic, and the two are not the same.
For example, you have this:
h5.ee-upcoming-events-widget-title-h5{
width: %;
position: absolute;
top: 0;
right: 0;
}
In the above reply, width was set to 50%.
Alternatively, you can drop all the above suggestions and try using floats or even change the markup in the widget.
|
|
LVLP
|
February 1, 2017 at 12:03 pm
HI Josh,
I changed the code back to what you suggested but its still messy. If you look carefully the black div’s don’t fit well in the container. And the date/time text stays strangely narrow. Maybe there is some example code of what i am looking for. I guess that there should be more people wanting the widget to look like this. picture left /event title and date time right.
|
|
LVLP
|
February 1, 2017 at 12:06 pm
I changed your example code because of the position and size of the tumbnail. This is stil not right if you look at it. Maybe i interpretate the usage of a upcoming eventlist wrong. But i cant imagine another way of using it in my situation.
thanks
|
|
Josh
|
February 1, 2017 at 12:10 pm
It’s fine if you change some of the values, but if you change them, they need to be valid changes. So for example:
width: 30%;
is valid.
width: %'
is not valid.
|
|
LVLP
|
February 1, 2017 at 12:41 pm
Thanks josh!
|
|
LVLP
|
February 1, 2017 at 2:19 pm
Hi josh,
One last question,
I got everything a bit in the right direction see http://www.lonnekevanleth.nl upcomming event list to the right.
But i cant seem to change the fontsize of the title and the location of the picture.
|
|
Josh
|
February 1, 2017 at 6:45 pm
The reason the location of the picture isn’t changing is because you left out a ; in your CSS, and if you use relative positioning, you’ll need to add some positioning rules. So right now you have this:
.ee-upcoming-events-widget-img-dv{
width: 40%
position: relative;
top: 0;
margin-top: 1em;
}
width: 40% needs a ‘;’ at the end of the line like this:
width: 40%;
Then you can experiment with positioning by adding some value to top:
e.g. top: 40px;
as well as right or left positioning,
e.g ‘left: 40px;`
The font site of the title can be changed with something like this:
h5.ee-upcoming-events-widget-title-h5
{
font-size: 1em;
}
|
