How can I make the event widget look good in the right sidebar?

[Groubee2]

Hi

I hope you can help me with the HTML snippet to the event widget placed in the right sidebar?

I have tried to place some placeholders together with some HTML – but I have some small problems 🙂

See the attached image – the first event in the top is how I would like it to show, and the event downunder is how it is shown now…

This is the code I add to the event widget:

<code>

<li><table style=’line-height:1.2′>

<tr>

<td style=”vertical-align:top;padding-top:0px;width:0px”><a href=”#_EVENTURL”>#_EVENTIMAGE{80,80}</a></td>

<td style=”vertical-align:top”><a href=”#_EVENTURL” style=’font-size:16px;line-height:10px’><b style=”line-height:10px”>#_EVENTNAME</b>{has_location}, #_LOCATIONTOWN{/has_location}</a><br />

<div style=’font-size:12px;line-height:12px;padding-top:2px’><b>#_EVENTDATES</b></div>

<div style=’font-size:10px;line-height:10px;padding-top:15px’></div>

<span style=’font-size:11px;line-height:24px;padding-top:15px’><i>#_BOOKINGBUTTON</i></span></td>

</tr>

</table>

<br /></li>

<code/>

I really hope you can help me with this one! 🙂

Cheers

Tonny

 

[Laura]

Hello, please replace your html code for this:

COPY CODE

<li class="events"><table style=’line-height:1.2′>

<tr>

<td style=”vertical-align:top;padding-top:0px;width:0px”><a href="”#_EVENTURL”">#_EVENTIMAGE{80,80}</a></td>

<td style=”vertical-align:top”><a href="”#_EVENTURL”"><b style=”line-height:10px”>#_EVENTNAME</b>{has_location}, #_LOCATIONTOWN{/has_location}</a><br />

<div style=’font-size:12px;line-height:12px;padding-top:2px’><b>#_EVENTDATES</b></div>

<div style=’font-size:10px;line-height:10px;padding-top:15px’></div>

<span class="button" style=’font-size:11px;line-height:24px;padding-top:15px’><i>#_BOOKINGBUTTON</i></span></td>

</tr>

</table>

<br /></li>

And add this to style.css of child theme

COPY CODE

.button a {
    background: #DD9933 !important;
    float: left !important;
    position: absolute;
    width: 100% !important;
    margin-left: -35%;
    color: white !important;
}
.events img {
    width: 100px !important;
    height: 60px;
    position: relative;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Groubee2]

Hi @Laura

I have now added your code to the events widget and to the BuddyApp Theme Quick CSS.
We dont use a child theme, but only the the BuddyApp Theme Quick CSS box.

It does not look like we had hoped, see attached images, or login.

– we would like the event image to fload left, and be 60px X 60px, the image right margin should be 5px (padding or…)
– can the event headline be ex 14px and the date 12px ?
– If the event heading is to long and uses more than one line, the line height should be 1,2.
– The date in white color text if thats ok?
– And (if) lokation it should be in yellow text with a font size
– Is it possible to make the button smaller

We really look forward to have the events look great!!!

Cheers
Tonny

[Laura]

Hello, we can help you with small modifications but for custom request i suggest to hire a developer to do it for you 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Groubee2]

Ok thanks

We will try to do it our self

[Laura]

Let me know if you have any issue 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Author]

Posts