WordPress.org

Ready to get started?Download WordPress

Forums

The Events Calendar
[resolved] Changing event text colour (21 posts)

  1. acrobson
    Member
    Posted 1 year ago #

    The theme which I use for my site is of a black background with white text. However the standard text colour of 'The Events Calendar' plugin is also black and as a result cannot be read black on black.

    Can anyone advise how I can change this for the calendar plugin and where in the CSS file in order for this to be read? As appose to me having to change the back ground style and colour of the whole sites CSS.

    Example links below -

    Text displays fine in the calendar itself -
    http://www.forhacsec.com/events/

    Text displays in the colour black when viewing an individual event -

    http://www.forhacsec.com/event/27th-ifip-international-information-security-and-privacy-conference/

    Any help would be much appreciated.

    Regards,

    http://wordpress.org/extend/plugins/the-events-calendar/

  2. aunief
    Member
    Posted 1 year ago #

    I am experiencing the same issue. I am using the "Easel" Theme for which all headings and text -show up as #000 black. By inspecting the properties with Firebug, the exact locations /lines where the css needs to be customized was provided. However, I have yet to find the file "events.css" -the document at hand that needs updating. If anyone can provide info as to where this stylesheet is located that would be great!

    http://wordpress.org/extend/plugins/the-events-calendar/

  3. www.n1bar.com
    Member
    Posted 1 year ago #

    Add the following;

    .entry-title {color: white;}
    #tribe-events-event-meta {color: white;}
    .entry {color:white}

    to your theme's style.css found in:
    http://www.forhacsec.com/wp-content/themes/black-n-white/style.css

  4. roblagatta
    Modern Tribe Support
    Plugin Author

    Posted 1 year ago #

    Thanks for the tip here, n1bar! We appreciate the assist.

    acrobson / aunief: that do the trick for your situation? Let us know if not and we'll try to troubleshoot accordingly.

  5. acrobson
    Member
    Posted 1 year ago #

    Hi all,

    Apologies for the delay. I have finally had a chance to test this and it has worked a treat!

    Thanks for all your input.

    You can now view the event calendar and appointments at - http://www.forhacsec.com/events/

    Thanks again, greatly appreciated!

  6. acrobson
    Member
    Posted 1 year ago #

    Just realised that that has changed all the text colour for every page. So with my theme having a white background on posts it is now white on white. Although the events calendar now looks great.

    May need the colour changing for just the events calendar or change it to grey perhaps?

  7. aunief
    Member
    Posted 1 year ago #

    Hey Rob, Yes worked for me!

  8. Andy Fragen
    Member
    Posted 1 year ago #

    You might want to look at my new plugin.

    The Events Calendar Category Colors plugin.

  9. www.n1bar.com
    Member
    Posted 1 year ago #

    THanks andy thats awesome

  10. Andy Fragen
    Member
    Posted 1 year ago #

    No problem.

  11. acrobson
    Member
    Posted 1 year ago #

    Hi,

    I have added the below code from above to my CSS -

    ".entry-title {color: white;}
    #tribe-events-event-meta {color: white;}
    .entry {color:white}"

    To the themes CSS at - http://www.forhacsec.com/wp-content/themes/black-n-white/style.css

    As suggested, however although it did get the desired result for The Events Calendar in that it changed the text to white on the black background, it also changed the text on the rest of the site to white, of which the rest of the site actually has a white black ground.

    I did change the text colour to grey which meant it could be read however it is difficult on the eyes when reading grey on white.

    Is there anyway of changing the text colour to white on the The Events Calendar only and leaving the text black elsewhere on the site?

    Site homepage - http://www.forhacsec.com/ (Requires black text on white background.

    Events Calendar - http://www.forhacsec.com/events/ (Required white text on black background)

    Individual event - http://www.forhacsec.com/event/symposium-on-usable-privacy-and-security-soups-2012/ (Text unreadable, requires white text on black background)

    Thanks,

  12. Andy Fragen
    Member
    Posted 1 year ago #

    @acrobson - revert your CSS changes and install and use the plugin I referenced above. It will do exactly as you want.

  13. acrobson
    Member
    Posted 1 year ago #

    Hi Andy,

    I did try that but forgot to revert the CSS from before. However I have now removed the CSS code above but nothing appears to be happening when I am amending the category color settings under the 'Category colors' tab and applying the changes.

    The 'Current display' within the plug-in tab does update however when refreshing the event's calendar on the live site it is still black on black.

    Is there something else I need to do?

    Thanks,

  14. Andy Fragen
    Member
    Posted 1 year ago #

    I'm really not sure I understand your theme CSS. It seems that in your theme's CSS file, listed above, within the body tag is background:#111111 and color:#000

    That's exactly what you're getting. A background that's nearly total black and text that is black.

    I would suggest changing the color to #fff in this location and see if that doesn't set things right. This must have been a change you made somewhere along the way to finding a solution.

    Let us know.

  15. Andy Fragen
    Member
    Posted 1 year ago #

    Alternatively you might want to start with a few install of your theme to make sure it's all back to baseline.

  16. Andy Fragen
    Member
    Posted 1 year ago #

    Don't make the change above or I think you won't see text on main page.

    Try adding the following to your CSS

    #content.tribe-events-event, h2.tribe-events-cal-title, #tribe-events-content { color: #fff !important; }

    Welcome to the world of inverse coloring.

  17. acrobson
    Member
    Posted 1 year ago #

    Andy that seems to have done the trick nicely!

    Example - http://www.forhacsec.com/event/7th-ares-conference-ares-2012/

    Thanks for you input! Greatly appreciated!!!

    Small question, not such a major issue as I have it set to the calendar view by default as appose to list view.

    The event list view is now black on black, is this due to the inverting of the colours?

    Event list example - http://www.forhacsec.com/events/upcoming/

  18. Andy Fragen
    Member
    Posted 1 year ago #

    Please check the post again I altered the CSS ever so as the h2 header was still black. It's defined this way in the events.css so you need the !important to override.

    #content.tribe-events-event, h2.tribe-events-cal-title, #tribe-events-content { color: #fff !important; }

  19. Andy Fragen
    Member
    Posted 1 year ago #

    The following should take care of everything I see on your site.

    #content.tribe-events-event, h2.tribe-events-cal-title, #tribe-events-content { color: #fff !important; }
    td.tribe-events-event-meta-value { color: #000; }
  20. acrobson
    Member
    Posted 1 year ago #

    Awesome, cheers Andy!

    That's done it!

  21. roblagatta
    Modern Tribe Support
    Plugin Author

    Posted 1 year ago #

    Thank you Andy! You're the man and we really appreciate your help here and on the PRO forums. Looks like we're all set here, but acrobson, feel free to post again should you need help down the road.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic