Forums

Events Manager
Styling based on category (37 posts)

  1. benclowney
    Member
    Posted 10 months ago #

    This is a brilliant plugin.

    As my PHP knowledge is a little limited I was wondering if anyone had done something like this before:

    I'd like to apply background shading to the boxes on the full size calendar, dependent on the category the event is listed in

    Realise it is based on conditions but the tutorial went a little over my head. Does anyone have any advice?

    Cheers

  2. Marcus
    Member
    Posted 10 months ago #

    yes, but you need to know some PHP/CSS :)

  3. barkerbaggies
    Member
    Posted 9 months ago #

    In your events list format you can call the event category as a class for the table row (if that's how you're listing events)

    <tr class="eventscat-#_CATEGORYID"><td>col 1</td><td>col 2</td></tr>

    This will call give a class of eventscat-1 etc based on the category ids you can find listed in the Events > Categories menu

  4. Bristol CI
    Member
    Posted 9 months ago #

    Hi, I would love some help on doing something similar to this.

    Is it possible to colour code by category for each event in the event list so that the text of the event or it's background shading is specific to the category it's in?
    Also, Is it possible to get the table to group the events into months so that there would be a series of header months e.g. August 2011 then the relevant events listed by date beneath?
    Both of these would help enable people to see at a glance what month each event is in and what type of event it is.

    The page on my website I want to change the look of is http://contactdance.co.uk/events/

    My code writing is limited, so any help would be much appreciated.
    Many thanks,
    Saskia

  5. Marcus
    Member
    Posted 9 months ago #

    keep an eye on the blog, might have more on that tomorrow, if not next week

  6. barkerbaggies
    Member
    Posted 9 months ago #

    Hi Saskia - if you format your events listing as I posted above:

    <tr class="eventscat-#_CATEGORYID"><td>col 1</td><td>col 2</td></tr>

    You can then style each event category accordingly in your CSS.

    For example: tr.eventscat-1{background:blue;}
    would give every event in category 1 a blue background.

    Hope that helps

  7. Bristol CI
    Member
    Posted 9 months ago #

    Hi barkerbaggies,

    Thanks for your help. I'm not sure if i'm doing it right though as the results aren't happening as i'd like. Where would i insert the first bit of code? I have tried different places but it simply adds 3 extra cells below each line with the first two having the words 'col 1' and col 2' in it.
    The existing code in the 'Default event list format' box is:

    <tr>
    
    			<td>
                   <strong> #_{D d M Y} #@_{- D d M Y}</strong><br/>
                   <i>#_12HSTARTTIME - #_12HENDTIME</i>
                </td>
                <td>
                   <strong> #_EVENTLINK</strong><br/>
                    <i>#_LOCATIONLINK</i>
                </td>
    <td>
                   <i>#_ATT{Teacher}</i><br/>
               </td>
    <td>
                   <i>#_ATT{Price}</i><br/>
               </td>
    <td>
                   <i>#_CATEGORYLINK</i><br/>
                </td>
            </tr>

    I have added the second bit of code into the Custom Code section of PlatformPro. Is that correct?

    Sorry, you can probably tell that my code writing abilities are limited!

    Many thanks.

  8. barkerbaggies
    Member
    Posted 9 months ago #

    No problem - the first set of '<tr>' tags in your event format create the table row, so you need to define the class of the row in there. So now your event format will be:

    <tr class="eventscat-#_CATEGORYID">
    
    			<td>
                   <strong> #_{D d M Y} #@_{- D d M Y}</strong><br/>
                   <i>#_12HSTARTTIME - #_12HENDTIME</i>
                </td>
                <td>
                   <strong> #_EVENTLINK</strong><br/>
                    <i>#_LOCATIONLINK</i>
                </td>
    <td>
                   <i>#_ATT{Teacher}</i><br/>
               </td>
    <td>
                   <i>#_ATT{Price}</i><br/>
               </td>
    <td>
                   <i>#_CATEGORYLINK</i><br/>
                </td>
            </tr>

    Now in your custom CSS settings (I'm guessing that's what you mean in PlatformPro, but I've never used that theme) you need to add a different css class for each category id, so:

    tr.eventcat-1{
            background:red;
    }
    tr.eventcat-2{
            background:blue;
    }
    tr.eventcat-3{
            background:green;
    }

    etc

    This will style the whole row of an event in a certain category. You'll find the category id numbers in your events menu under categories.

    good luck.

  9. Bristol CI
    Member
    Posted 9 months ago #

    Thanks for your time with this.

    I have replaced the first bit of code with your suggestion. All fine, though looks the same as before.

    I have tried adding the second bit of code in the PlatformPro Custom Code section and in the style.css stylesheet for PlatformPro, with no effect whatsoever. I have checked that I am testing existing category ID's and have also tried different formats of the colour e.g. #bdbdbd instead of the word for a colour, again with no effect. Am I puttin it in the wrong place?

    best wishes.

  10. barkerbaggies
    Member
    Posted 9 months ago #

    Hey - so sorry. There's a typo in my instructions. The class we've specified is eventscat-X with an s and the css styles are for eventcat with no s.

    Change either and problem solved.

    Duuuh.

  11. Bristol CI
    Member
    Posted 9 months ago #

    Hey - that's great, works now. Thank you!! I will have a play with colors etc....

    Another cheeky ask, I don't suppose you know how to get the listing to group under month/ year headings do you?

  12. barkerbaggies
    Member
    Posted 9 months ago #

    No problem - sorry for the silly mistake.

    RE grouping by date, I wish I did. I'm working on a site for a listings magazine who have multiple events per day and so would love to group by Month and Day.

  13. Bristol CI
    Member
    Posted 8 months ago #

    Is there a way to change the linked text color too?

    I have my events colour coded by category (background and text) but the text for those elements in the table that are linked to other pages is the same as for the rest of my website. In the interest of making it nicer to view, is there a way of changing this colour specific to each category?

    I can't figure out the code - please help!

    What I have so far is:

    }
    tr.eventcat-2{
            background:#ebebeb;
            border:1px solid #000000;
            border-right:2px solid #000000;
            border-left:2px solid #000000;
            color: #801103
    			}
  14. barkerbaggies
    Member
    Posted 8 months ago #

    Hi - all you would need to do is add a new style to the links for just those table rows. Something like:

    tr.eventcat-2 a{
            color:red;
    }

    So this code reads:

    "Links in table rows with the class "eventcat-2" should be red."

    You'd need to specify a style for each category.

  15. Bristol CI
    Member
    Posted 8 months ago #

    Many thanks for that barkerbaggies, it worked and my events table is slowly getting there! Still not managed to find a solution to group events by month though - have you had any luck with that yet?

  16. agelonwl
    Member
    Posted 8 months ago #

    @Bristol CI

    What do you mean by Group Events by months? is it thru widget or events page? and could you answer this on a new post?

  17. Bristol CI
    Member
    Posted 8 months ago #

    @agelonwl

    I did already do a separate post on this:
    http://wordpress.org/support/topic/plugin-events-manager-how-to-group-events-by-month?replies=4

    Not had any helpful replies yet. Basically i want to get my events table, http://contactdance.co.uk/events/, to have subheadings of the months so that people can easily view what's happening each month. @barkerbaggies was looking for something similar I think.

    Do you know any tips to do this?

  18. Marcus
    Member
    Posted 8 months ago #

    we're working on a shortcode for this. sorry if I missed that one

  19. barkerbaggies
    Member
    Posted 8 months ago #

    @Marcus great news. Keep up the good work!

  20. Bristol CI
    Member
    Posted 8 months ago #

    @Marcus - yes that really is great news. Many thanks!

  21. Bristol CI
    Member
    Posted 6 months ago #

    @Marcus - sorry to bother you, I am sure you are very busy! I was just wondering in what version you were planning to include this shortcode?

  22. Marcus
    Member
    Posted 6 months ago #

    actually, this is already available - events_list_grouped

    need to update the docs :)

  23. Bristol CI
    Member
    Posted 6 months ago #

    @Marcus, that's great news!
    So, if i want events grouped by month, where do I enter that code? Somewhere within 'Default event list format'?

  24. Marcus
    Member
    Posted 6 months ago #

    a little different, you'd use mode=monthly/daily/weekly/yearly within the shortcode. t should automatically display months with h2 tags (on months with events)

  25. Bristol CI
    Member
    Posted 6 months ago #

    I tried writing mode=monthly under within 'Default event list format' but it just lists mode=monthly before the table! Is that what you meant?
    Sorry, I am a novice when it comes to code writing (i just do it by trial and error guessing what might do what as i go along!)

  26. Marcus
    Member
    Posted 6 months ago #

    nono, what you want is [events_list_grouped mode="monthly"], which you add on an actual wordpress page.

    currently, you can't get it to overwrite the default events page page, unless you know a little php

  27. Bristol CI
    Member
    Posted 6 months ago #

    Hi @Marcus,
    Thanks for this, I have now created a page that looks more like how I want it to look which is great!
    http://contactdance.co.uk/events/

    However, the links within the listing do not work unless the default events page is activated. I have tried selecting [no events page] which meant all the links within the events listing went to a 404 page. Then I tried recreating a default links page
    http://contactdance.co.uk/events/events-2/
    and 'Excluding' it from the navigation, but again the links stopped working. Currently I have two events pages which is obviously not ideal.

    Do you have any suggestions?

    Saskia (@Bristol CI)

  28. Marcus
    Member
    Posted 6 months ago #

    atm you need the default events page. What people usually do is remove it from the menus so that it is only used by page you generate links on.

    in v5 this won't be needed because events will be posts, so won't need an 'event page'

    it does work for me though... clicking the link on your intended page redirects to the correct event.

  29. Bristol CI
    Member
    Posted 6 months ago #

    Thanks Marcus,
    All sorted now - I more or less have it looking like i want it too!

  30. Bristol CI
    Member
    Posted 4 months ago #

    Hi Marcus,
    With the new upgrade to v5 i have lost all the formatting based on category in my events table - i'm guessing this is because "categories are now custom taxomonies" (i have no idea what that means!)

    Where before i had the code e.g.

    }
    tr.eventcat-2{
            background:#ebebeb;
            border:1px solid #000000;
            border-right:2px solid #000000;
            border-left:2px solid #000000;
            color: #801103
    			}

    to specify what category "2" looks like in the table, i cannot work out what to change the tr.eventcat-2 section of the code to, to work with the changes.
    Any help would be really appreciated :)
    Saskia

Reply »

You must log in to post.

About this Plugin

About this Topic