Image Header for Events Pages

[John]

Hi there

How do I insert an image header on the event calendar and events pages please ?

This site uses a theme from Elegant Themes called DIVI and we are using the ‘drag and drop’ editor within that so the usual site header logo isn’t there (if that was expected behaviour…)

Thanks in advance 🙂

John

[John]

Actually, I think I managed it with HTML before section. 🙂

…but I’m not quite there yet….

I’ve added two images and a width and height tag for the one on the left.

1. Will this be OK on a mobile ? or is there another way of doing it
2. How do I add a margin to move the images down ?
3. How would I go about spacing/positioning the right hand image better (but still responsive)

Thanks

John

[Geoff]

Hi there, John, and nice work! You found the Before HTML settings, which is an awesome way to get exactly what you were looking for.

1. Will this be OK on a mobile ? or is there another way of doing it

Yeah, you should be ok on mobile and desktop. The max-width for your images is set to 100%, so the images will never overflow the container. Nice job.

2. How do I add a margin to move the images down ?

You can do this with a little CSS in your theme’s style.css file. For example, something like this might work:

.tribe-events-before-html {
margin-top: 50px; /* or whatever spacing you want */
}

3. How would I go about spacing/positioning the right hand image better (but still responsive)

I think your best bet is to make it all one image. In other words, combine those two images to make one horizontal image all the way across.

We are fairly limited in how much support we can provide for custom development questions like these, but I hope this at least helps get you started–you’re already off to a really nice start. 🙂

Cheers!
Geoff

[John]

Thanks Geoff

Good to know I was half way there 🙂

I think if I did one big image, that would be a problem on the mobile as it would be smaller than everything else.

It’s ok as is for now, but the image on the mobile is still left-aligned on mobile. Here’s my code 🙂

<div width=”300px” align=”center”></div>

If you think of any cool and easy way to

a) make the image centre on a mobile…
b) have a second image to the right that would go under the logo on the mobile…

…let me know 🙂

Thanks for your help!

Regards

John

[Geoff]

Hi there, John! Thanks for following up and I’m glad we were able to nail down most of your additional questions.

I think if I did one big image, that would be a problem on the mobile as it would be smaller than everything else.

Perhaps you can have two versions of the image: one horizontal and another that is more vertical. Show the horizontal one large screens and the vertical one on small screens using CSS.

Ultimately, though, I think it is something you will need to fiddle with a bit to get exactly what you’re looking for. Sorry I don’t have a concrete answer for you here, but I hope this at least gives you a solid direction to get started. 🙂

Cheers!
Geoff

 

[Geoff]

Hello there, John! Just checking in to see if you had any other follow-up questions related to the plugin–let me know. 🙂

Cheers!
Geoff

[John]

Hi Geoff

Just one…:-)

I can’t work out how to make some text appear next to the image – all I want to do is this…

http://bit.ly/1yLLh9q

If you can give me a fix, that would be great – thanks!

http://circloid.com/events/

Cheers

John

[Geoff]

Hey John! Thanks for following up.

You can go ahead and add something like the following into the “Add HTML before  event content” box in the Advanced Settings options (make sure you are in Text mode):

<img src="http://circloid.com/wp-content/uploads/2015/01/Circle-of-Peers-Logo.gif" alt="" align="left" width="auto" style="margin-right: 50px;">

<p>Your paragraph here.</p>

From there, you may need to play around with your CSS to get things to line up just right, but this will certainly give you a place to start. 🙂

Cheers!
Geoff

[Geoff]

Hey there, John! It’s been a while since I’ve heard back from you and I think we’ve covered all our bases here, so I’m going to go ahead and close this thread. Please feel free to start a new thread if anything else pops up and we’d be happy to help. 🙂

Cheers!
Geoff

[Author]

Posts