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

 

Attachments:

You must be logged in to view attached files.

[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

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Groubee2]

This reply has been set as private.

[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

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[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

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Author]

Posts