Image below event information

For calendar events, how can I get the image I’ve added to be above the event information? I tried addeding the image as a featured event, but it was much too large and it appeared twice on the page.

Also, why can’t this page load google maps correctly?

Hi @eutaw,

Thanks for writing in!

Look Like you are using All in One event calendar which is a third party plugin.
Unfortunately, we can’t give support to a third party plugin, which is out of our theme support scope.
I would suggest you to please take help from the plugin developer for the layout customization or you can refer to their documentation.
Also, you can Modern Event Calendar which is coming with the theme for free to use if the feature matches your requirement.

Thanks for understanding.

I switched to Modern Events Calendar. It’s a neat calendar. I do have a question about a warning message I’m getting. (Please check the secure note for the page url.) Why am I getting this warning?

Hi There,

Please try with this solution:

https://webnus.ticksy.com/ticket/1760777/#commentBlock-9135404

Let us know how it goes!

Thanks. I unchecked the Next Event Module and the error/warning goes away. However, it would be great to have that feature.

There is another issue that’s occurring. On the page that’s in my secure note, you will see that my featured has a green background and cancelled has a red background. However, I have “featured” set to a purple/lavender color and “cancelled” set to yellow. Why do they have different colors?

Hi,

I checked and don’t see any green. This is how it looks in my end.

Try to clear your browser cache and check again.

Thanks

Actually, the information was on Day 13. I have attached a screen shot of the page where you will see the Featured and Cancelled event. I expected the background of the Featured event to be a purple/lavender color and the cancelled event to be yellow. Instead Featured has a green background and Cancelled has a red background.

Hi There,

To change the background colors, please add this custom CSS under Theme Options > CSS:

.mec-wrap article:not([class^=mec-event-countdown]):not([class^=mec-event-cover-]).mec-label-canceled:before {
    background-color: gold;
}
.mec-wrap article:not([class^=mec-event-countdown]):not([class^=mec-event-cover-]).mec-label-featured:before {
    background-color: #9f5cb0;
}

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.

Thank you and thanks for the information on finding the right selector.

You are most welcome. :slight_smile:

For the page in my secure note, I added the following CSS to change the background color of the submit button on the wpform. When I previewed it, the color was changed, but not when I view it from pages. Can you point me in the right direction?

div.wpforms-container-full .wpforms-form input[type=submit],
div.wpforms-container-full .wpforms-form button[type=submit] {
background-color: #94a8cd; font-size:20px;
font-weight:bold;}

Also, how do I get the Prayer Request field on the form to be the same length as the other fields so that I can center the form?

Hello @eutaw,

I have logged in to your site and have updated the css code into this:

.site .x-section div.wpforms-container-full .wpforms-form textarea.wpforms-field-medium {
    max-width: 60%;
}

.site .x-section div.wpforms-container-full .wpforms-form input[type=submit], 
.site .x-section div.wpforms-container-full .wpforms-form button[type=submit] {
    background-color: #94a8cd; 
    font-size:20px;
    font-weight:bold;
}

Please check your form now.

Thank you. That works. However, I tried to center the entire form by adding the CSS below, but form is not centered. Can you point me in the right direction?

.wpforms-container {
margin: auto;
}

Hi @eutaw,

I recommend contacting the plugin author, I’m not sure if there is an available option in their settings. But you can try adding this CSS to center it. I tried it with CSS and it’s complex, the wrapper/container is full-width but form elements has its different dimensions.

The margin-auto will only work on a container with a static width. Please contact the plugin author.

Thanks!

What CSS were you referring to that try?

Hello @eutaw,

To center the form, please remove this custom css first:

.site .x-section div.wpforms-container-full .wpforms-form textarea.wpforms-field-medium {
    max-width: 60%;
}

and replace it using this code instead:

#wpforms-975 {
    max-width: 750px;
    margin: 0 auto;
}

div.wpforms-container-full .wpforms-form input.wpforms-field-medium, 
div.wpforms-container-full .wpforms-form select.wpforms-field-medium, 
div.wpforms-container-full .wpforms-form .wpforms-field-row.wpforms-field-medium,
.site .x-section div.wpforms-container-full .wpforms-form textarea.wpforms-field-medium {
    max-width: 100%;
}

We would loved to know if this has work for you. Thank you.

Thank you. It works.

You’re welcome!
Thanks for letting us know that it has worked for you.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.