WordPress.org

Forums

The Events Calendar Category Colors
[resolved] Colours not loading correctly (53 posts)

  1. Andy Fragen
    Member
    Plugin Author

    Posted 1 year ago #

    Unfortunately, these 2 elements are not in the same div so aligning them together is difficult. You will find that as you make your browser window smaller they will align closer. The positioning for both is based upon percentage so it will never be exact for all screen sizes.

    If/when I have more time I'll see if I can make them closer. Unfortunately using something other than a percentage will make the photo view look off.

  2. mending
    Member
    Posted 1 year ago #

    Changing the "width 93%;" to "width: auto;" makes the coloring here align perfekt to the right page margin.

    The placement of "Cost" with absolute postion causes problems on iPhone.

  3. mending
    Member
    Posted 1 year ago #

    How about this?

    https://www.dropbox.com/s/v2obqhrgghcdf8g/Screenshot%202014-03-16%2021.06.34.png

    Changing:
    "margin-top: 36px" to "margin-top: 0px;"
    "right: 4.5%" to "right: 0%"

    Will probably need a "@media only screen and (max-width: 767px) { ... }
    } tweak for iPhone.

  4. Andy Fragen
    Member
    Plugin Author

    Posted 1 year ago #

    I think I found a better solution. It works here in all default themes.

    In the upcoming views the button is above the coloring and in the Map view it is below the coloring. Both have right edge aligned.

    I think that's about the best I can get.

  5. mending
    Member
    Posted 1 year ago #

    Can I see this as an example?

  6. Andy Fragen
    Member
    Plugin Author

    Posted 1 year ago #

    Sure, just update :)

  7. mending
    Member
    Posted 1 year ago #

    Looks a bit odd here. List View shows Cost on top of the coloring:
    https://www.dropbox.com/s/8gcfw1buosyamt2/Screenshot%202014-03-16%2023.22.11.png

    https://www.dropbox.com/s/7pce1nz300it25p/Screenshot%202014-03-16%2023.24.27.png

    and Map View shows it way below the coloring. Couldn't it be the samme padding top/bottom of the coloring? Also how can this be improved: https://www.dropbox.com/s/xywg0u65x42aay4/foto%201.PNG

  8. Andy Fragen
    Member
    Plugin Author

    Posted 1 year ago #

    Have you tried switching to a default theme?

  9. mending
    Member
    Posted 1 year ago #

    What do you mean by "default theme" ?

  10. Andy Fragen
    Member
    Plugin Author

    Posted 1 year ago #

    TwentyTen, TwentyEleven, TwentyTwelve, TwentyThirteen

  11. mending
    Member
    Posted 1 year ago #

    No, I'm not using any such themes... But should it matter?

  12. Andy Fragen
    Member
    Plugin Author

    Posted 1 year ago #

    Yes, it may mean that you will have to add some additional CSS to account for the differences in your theme compared to a default theme.

  13. Andy Fragen
    Member
    Plugin Author

    Posted 1 year ago #

    Here's what it looks like in TwentyThirteen

    http://pbrd.co/1fOHunf

    http://pbrd.co/1fOHBiM

    At the moment not much to do about how it looks on mobile.

  14. Andy Fragen
    Member
    Plugin Author

    Posted 1 year ago #

    OK, I think I figured out the mobile

  15. mending
    Member
    Posted 1 year ago #

    Hi, looks better yes. To avoid the Cost label floating differently above and below the coloring (on web) depending on which theme used (as is my situation) I would still suggest this solution as it doesn't operate with percentage and therefore will place the Cost label in same position everywhere:

    https://www.dropbox.com/s/v2obqhrgghcdf8g/Screenshot%202014-03-16%2021.06.34.png

  16. Andy Fragen
    Member
    Plugin Author

    Posted 1 year ago #

    Even using your solution the button won't stick in different themes. Try using your code with 2010, 2011, 2012, and 2013 themes.

  17. mending
    Member
    Posted 1 year ago #

    Right, I just have to fix it for my solution/theme then, thanks.

  18. mending
    Member
    Posted 1 year ago #

    Hi Andy, how do you control the padding/margin for "Cost" on Venue and Orgaziner views? I need to adjust it to fit my theme and don't find where you control this. Please advice. Thanks

  19. Andy Fragen
    Member
    Plugin Author

    Posted 1 year ago #

    In the plugin, it in views/category.css.php.

    If you have problems overriding this CSS using !important let me know and I'll see about adding a filter hook to allow it to be changed.

  20. mending
    Member
    Posted 1 year ago #

    I need to place the Cost on the colored line but don't find the hook. No problem on the Map view using this:

    #tribe-geo-results .tribe-events-event-cost span { margin-top: 0% !important; }

    What would it be for Venue and Organizer view?

  21. Andy Fragen
    Member
    Plugin Author

    Posted 1 year ago #

    It should be the line starting .tribe-events-list

  22. mending
    Member
    Posted 1 year ago #

    Hi Andy, thanks!

    Do you reckon it would be possible to reflect the Event Category colors on the Category names when "Event Category" in the Filters Bar is clicked (outfolded) ? This would be a brilliant improvement/adition to your "Category Legend" option as each Category name then would show in its right color. Each category does have a unique ID number - so it should be possible?

  23. Andy Fragen
    Member
    Plugin Author

    Posted 1 year ago #

    As the button isn't created by this plugin I've decided that I won't include CSS to style it in the plugin. Below is what I had that sorta works with all the default themes.

    /* shift cost button down and under title coloring */
    
    .tribe-events-list .tribe-events-event-cost span, #tribe-geo-results .tribe-events-event-cost span
    {
    	position: absolute;
    	right: 0;
    }
    
    #tribe-geo-results .tribe-events-event-cost span
    {
    	margin-top: 5%;
    }
    
    /* iPhone [portrait + landscape] */
    @media only screen and (max-device-width: 480px) {
    	#tribe-geo-results .tribe-events-event-cost span
    		{
    			margin-top: 10%;
    		}
    }

    I don't have a copy of the Filters Bar plugin -- yet. If you submit a feature request to Modern Tribe to include a category class tag in the addition to the class unique ID then the colorizing would happen.

    I'm going to close this thread. If there are other issues please create a new thread for each issue. Thanks.

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • The Events Calendar Category Colors
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic

Tags

No tags yet.