MEC Plugin and X theme (Cornerstone)

Support
#1

Hi everyone,

I’m just trying to set a fresh new calendar page into my website.
The page I’m trying to do is still offline, cause I’m having a little issues with it.
First of all I read into this forum thant I can edit my single event with Cornerstone, but when I click on one of my test event I can’t edit with Cornerstone.
The other big issue I’m trying to facing is to edit the “global layout” of MEC. I try to explain you better: Here you have a screen of my “calendar” test page

.

What I just wanna do is:

  • edit the search bar, removing all buttons, trying to have a new button used to serach by event type (and then he recognize the various tag, so if I search a specific tag he would find every event with this tag… if possible)

  • Use the same font of my headings in general (font name is Teko) for the months in the middle of the screen (in this example is “Settembre 2019”) and for the little date into the right (“26 SET” and “30 SET”).

  • set the event name a bit bigger, I don’t know how many pixels is right now, but I just wanna have it big like “calendario” text or a bit smaller

I read that I can edit with CSS, but if I try to edit the entire page and I try to edit with Cornerstone, the page is completely blank… I can see the MEC Calendar only if I go to “preview” to see what I’m doing, but I can’t edit CSS in preview, I can just inspect… and, tbh, I’m not so skilled in CSS haaha :smiley:

Any help would be appreciated!

Thanks in advance!

#2

Hi Marco,

Thank you for writing in, to edit an event post on Cornerstone, first you need to navigate to X > Settings > Permissions and turn On the Events

Please navigate to M.E. Calendar > Shortcodes and configure the shortcode that was used to create Calendario page.

Navigate to M.E. Calendar > Settings> Styling Option and set your Calendar headings and paragraph Typography configuration. For the rest, please provide us the page URL (and login credentials if it’s not published yet) so we can take a closer look.

Hope it helps,
Cheers!

#3

Thanks!

In first post you have all the necessary if you wanna take a closer look. I’lll do what you have written once I come back from work lol :smiley:

#4

Hey Marco,

Here’s the answer to your questions:

You only can remove the buttons using the shortcode settings provided in MEC. Beyond those settings, you would need to hire a third-party developer to modify MEC for you.

There is no options available for certain parts of MEC so custom CSS is needed. Below are the custom CSS for the “Settembre 2019” and “26 SET”. Insert the code in M.E. Calendar > Settings > Custom CSS.

Please just note that we do not provide custom CSS as part of our product support. This is only to help you get started with styling the mentioned HTML elements of MEC. We can help you get the correct selectors but if you wish to style them further, you need to learn CSS or hire a developer.

.mec-month-divider span,
.mec-start-date-label {
    font-family: 'Teko', Helvetica, Arial, sans-serif;y
}

There’s also no option to modify the Entry Title in our theme separately so this also needs custom CSS. Here’s the sample code you can add in Theme Options > CSS. Adjust the value according to your design.

.entry-title {
    font-size: 300%;
}

By the way, after you’ve enabled Cornerstone for the Events post type, please note that it’s only the content area you can edit with Cornerstone. It’s the area highlighted in the screenshot below. You can’t edit other parts of the Single Events.

Hope that helps.

#5

Thank you so much @christian_y!!

Almost everything works, the only thing I was not able to do is the font size. I’ve tried to put the lane you wrote into MEC-Settings-Custom CSS (as I do for font family and stuff) but it didn’t work.
Where am I wrong? The event title remain small (“PROVA 1” and “JUNIOR SCHOOL” to be clear)

Thanks!

#6

Hi Marco,

I saw you have that custom CSS below on M.E.C. > Custom CSS

.mec-event-list-standard .mec-event-title {
    font-size: 38px;
}

And it actually working, please clear your browser’s cache.

You can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

Thanks,

#7

Thank you, thank you, thank you!

I’m trying to learn something about CSS, meanwhile, thanks to your patience and kindness, I solved my problem (like verytime I ask something here)

#8

Hello Marco,

You are most welcome. If you would like to learn more about CSS, I suggest you to take a look at following courses:

Thanks.

#9

Thank you so much for this link!

#10

We are happy to help,

Cheers

#11

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