Support

Home Forums Event Espresso Premium How to change the font color in the short code

How to change the font color in the short code

Posted: July 28, 2015 at 12:46 pm

Viewing 9 reply threads


carolhayes

July 28, 2015 at 12:46 pm

Hello,
I was wondering if it is possible to change the font color when using the shortcodes on a post or page? I also wanted to change the title of the event list while at the same time limiting the amount of events show up.

I tired this:
[ESPRESSO_EVENTS title=”My Super Event List”, limit=”1″]

but it didn’t work. Thank you for your help!


Lorenzo Orlando Caum

  • Support Staff

July 28, 2015 at 1:42 pm

Hi Sonja,

The shortcode does not have a parameter for font color. That is usually handled through CSS. Is a link available for the page that has this shortcode and what areas are you trying to change?

Also, this should work (no comma):

[ESPRESSO_EVENTS title=”My Super Event List”, limit=”1″]

The heading should change from Upcoming Events to My Super Event List with only a single event showing.


Lorenzo


carolhayes

July 29, 2015 at 11:41 am

Thank you for your help, Lorenzo. I used the shortcode you provided above, and it is showing up the title now, but it is cut off. Is there any way to make the title smaller?

The two areas where I need help are on the homepage:
http://www.hrosm.com.php53-17.dfw1-2.websitetestlink.com
(in the last section, right above the footer – I would like to make the text white to match the rest of the font)

Then on the sidebar here – i would just like to get the font to be smaller on the title and possibly to change it to blue to match the other titles on the sidebar?
http://www.hrosm.com.php53-17.dfw1-2.websitetestlink.com/about-us/

Thank you again for your help!


Lorenzo Orlando Caum

  • Support Staff

July 29, 2015 at 12:58 pm

Thanks for the link.

Try this CSS which can be added to your child theme’s stylesheet or via a plugin that adds an additional stylesheet to your WordPress site such as My Custom CSS or Reaktiv CSS Builder.:

article.espresso_events {color:#FFFFFF;}

Then refresh the page to see the changes.

Which sidebar on the page are you referring to for the additional changes?


Lorenzo


carolhayes

August 7, 2015 at 7:23 am

Hello Lorenzo,

I added the code you provided, and it didn’t really solve our issue.

On the homepage the font color remained the same – so it is still too hard to read the text – this is where we want to change the color to white.

Then on the sidebar the font color DID change to white – but we do not want it to change to white here because the background is white. so it should stay the way it was.

Also, another issue – when you click NEXT on the home page to see the other events, it reloads the entire page and takes you to the top of the page, instead of just sliding over to the next event. Do you know what could be causing this issue?


Lorenzo Orlando Caum

  • Support Staff

August 7, 2015 at 7:55 am

Hello, I’m not sure I understand the specific areas that you are trying to change. The CSS that I shared should change the font to white for the upcoming widgets in the footer: http://cl.ly/image/3v2r442r1x2o

I think the term sidebar is confusing me since the page has multiple areas where widgets can be added.

What other areas are you trying to change? Could you provide a screenshot?

https://eventespresso.com/wiki/troubleshooting-checklist/#screenshots

On your second question, that is currently intended though it may seem out of place here. The [ESPRESSO_EVENTS] shortcode is usually used on a WordPress page in the content area so clicking to move to the next entry via pagination would load the next page. It does not work like a slider.


Lorenzo


carolhayes

August 7, 2015 at 9:21 am

Hi Lorenzo,

Our events are actually not shared in the footer. They are right above the footer on the home page: http://www.hrosm.com/wp-content/uploads/2015/08/Screen-Shot-2015-08-07-at-11.16.01-AM.png

When I used the CSS you provided it did not change the font color in this section of the home page.

The sidebar is located in each of the internal pages – you can see it here:
http://www.hrosm.com/about-us/
Also here is a screenshot: http://www.hrosm.com/wp-content/uploads/2015/08/Screen-Shot-2015-08-07-at-11.19.32-AM.png

When i used your CSS it DID change the font color here, but we do not want to change it here because the background is white.

I hope this clears things up. Thanks again for your help


Tony

  • Support Staff

August 7, 2015 at 9:40 am

Hi Sonja,

The code Lorenzo provided should change the home page text as well as the sidebar.

If you only want the home page to change this use this code:

.home article.espresso_events {
color:#FFF;
}

I’m guessing you also what to style ‘Upcoming Events’ which is a little harder, how are you including that shortcode within the page currently?


carolhayes

August 11, 2015 at 9:32 am

Thank you so much for your help Tony! That code did the trick.

And you are right…we would like to style the Upcoming Events part as well. We are using the Avada theme on this site, and within the theme options there is a section for adding custom CSS – this is where i typed your code that you provided.

Is there another code we could use to change the upcoming events to white as well? Or is there a way to just remove this title, then I can just manually type it in?

Thank you for your help!


Tony

  • Support Staff

August 11, 2015 at 9:49 am

Is there another code we could use to change the upcoming events to white as well? Or is there a way to just remove this title, then I can just manually type it in?

The easiest way is to use the title attribute to remove it and type your own in.

You need to set it to an space rather than nothing so something like:

[ESPRESSO_EVENTS title=” “]

However that will leave a black header tag, so you could, wrap the code in a div tag, give that tag a class… so

<div class="my-super-class">[ESPRESSO_EVENTS]</div>

Then use some CSS to target just that header within that class, as an example:

.my-super-class h1 {
    color: green;
}

OR if you can add a class to the column that you have this code wrapped in so you don’t need to add another div within. All depends how much control you have within the theme.

Viewing 9 reply threads

The support post ‘How to change the font color in the short code’ is closed to new replies.

Have a question about this support post? Create a new support post in our support forums and include a link to this existing support post so we can help you.

Event Espresso