WordPress.org

Ready to get started?Download WordPress

Forums

WP Calendar
[resolved] Multiple category colors & changing font size in event list (13 posts)

  1. a f
    Member
    Posted 4 years ago #

    Hi! I have two questions about customizing the Calendar:

    1) Can I make multiple event categories, and color them accordingly? I have several categories that I use for events but I want them each to be represented by a different color in the large calendar. I saw the FAQ about this issue, but I am not familiar with coding or design so it didn't make much sense to me. Can anyone provide a simplified suggestion?

    2) I want to change the font size of the month name when I post a list (ex: September 2010). It is too small and I want to know how to make it bigger. Also, is there a way to change its formatting (i.e. the bullets that it uses)? I'm not sure where to find/edit that information. Thanks so much!

    I appreciate the help.

    http://wordpress.org/extend/plugins/wp-calendar/

  2. a f
    Member
    Posted 4 years ago #

    Anyone?

  3. faebu
    Member
    Plugin Author

    Posted 4 years ago #

    hi.

    1) in the graphical calendar you can colorize the events, since a class for every category id is used. The example below is for category id 3.

    div .fc-event.category-3,
    div .fc-event.category-3 a
    {
      background-color: red;
      border-color: red;
    }

    2) this is all css specific. sure you can change the font-size and many other things, but you need at least some html and css knowledge.

  4. a f
    Member
    Posted 3 years ago #

    Hi faebu,

    Thanks so much for the help! But you'll have to excuse my silly questions, since I'm having difficulty making this work...

    1. Let's say a category is titled "Concert Board." How do I find out that category's ID? I'm unsure how to write that into the css. I want to make multiple color categories, and I'm having trouble making that work.

    2. If I want to try changing the font-size and so on, in which css file should I make those changes? Can you point to where specifically I can alter those things?

    Thank you SO much!

  5. faebu
    Member
    Plugin Author

    Posted 3 years ago #

    1. In admin goto Posts > Categories. You'll see all your categories. Move your cursor on the categories name (it's a link) and you'll see the ID as a part of the pointing URL.

    2. Copy the file wp-content\plugins\wp-calendar\css\fullcalendar.css into the directory wp-content\themes\<yourtheme>\fullcalendar.css. Which css references you have to change, I don't know. You have to find out by yourself. May be you finde something on the FullCalendars documentation.

  6. scribe257
    Member
    Posted 3 years ago #

    hi i have the same problem dont understand where to insert the code, which file.
    I have 3 categries
    which i'll call
    Red
    Green
    Blue

    i understand the code you gave above and how to alter it but dont kno where it goes any and all help welcome

    thanks for previous help

  7. scribe257
    Member
    Posted 3 years ago #

    just checked to find out my categories ids does not give it wheni click the category name just gives the same name as category

    sorry for the problems but just a learner

  8. scribe257
    Member
    Posted 3 years ago #

    got the problem fixed the categories now work

    now i have new problem it is CSS based

    how do i get an event which is in two categories the show the colour for the one i wish to have a more important role

    eg category-2
    and category-3
    the post is in each but category-2 is red background
    and category-3 blue background
    when the post is in both categories how do i get it to diplay the colour for category-3 and not 2

    all help welcome
    and thanks

  9. faebu
    Member
    Plugin Author

    Posted 3 years ago #

    you have to make sure, that your css code for category 3 is more "important". You can do this, by placing the css keyword !important behind the single formats. e.g.

    div .fc-event.category-3,
    div .fc-event.category-3 a
    {
      background-color: red !important;
      border-color: red !important;
    }

    You can also handle this by using more specific selectors. there are several rules how these behaves, but to make it simple: the more specific the selector is, the stronger is its format definition. e.g.

    div .fc-event.category-2,
    div .fc-event.category-2 a
    {
      background-color: blue
      border-color: blue;
    }
    
    div.fc-content div.fc-event.category-3,
    div.fc-content div.fc-event.category-3 a
    {
      background-color: red;
      border-color: red;
    }

    Now Categorie 3 is stronger and its format should apply!

  10. scribe257
    Member
    Posted 3 years ago #

    Thanks seams to have done the trick

  11. faebu
    Member
    Plugin Author

    Posted 3 years ago #

    hi a f

    could you please change the state of this topic to resolved.

    thanks and enjoy the plugin-in

  12. scribe257
    Member
    Posted 3 years ago #

    resolved

  13. stefanroi
    Member
    Posted 3 years ago #

    I am on the same quest to use multiple colors based on categories. I understand the code, but I really don't know where it should go.

    Please help, someone.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic