Grow your CSS skills. Land your dream job.

Calendar CSS style editing.

  • # October 21, 2013 at 7:11 am

    Hi,

    could anyone tell me what would be one of the best ways to edit a joomla j events calendar to look like K2 calender? I have the css file for the K2 calender and the css file for j events calender but I can’t figure out a good way to change the looks. I can not just use the K2 calender for various reasons.

    Best regards, Lyhis

    PS. I will share the css files once im back home if needed.

    # October 21, 2013 at 9:18 am

    It’s a matter of matching the HTML-tags up with the (new) CSS rules, which has to be done one at the time I assume.
    Can you maybe write which tools you use, … do you use firebug/chrome devtools to inspect element?

    # October 21, 2013 at 11:47 am

    Hey

    thanks for answering. I do have both firebug and web developer tools installed.

    This here is the jevent calendar with the css file: http://www.joomlaos.de/images/stories/images5/jevnetsmcalf.png

    http://codeviewer.org/view/code:37f1

    And this here is the K2 calendar with the css file: http://docs.joomshaper.com/images/templates/travel/2_4_0.jpg

    http://codeviewer.org/view/code:37f2

    Just overwriting the jevent css does not work of course and I’m quite new to the whole web developing business so any tip or suggestions would help out a lot.

    # October 21, 2013 at 1:31 pm

    Copied some code from the calendar widget in the sidebar of this demopage

    • When you fork this pen, then you can tweak the css, but I can’t be sure if it’s the same HTML-markup for you’re calendar:

    http://codepen.io/atelierbram/pen/Bvtjr

    Is it the same calendar?

    Ed
    # October 21, 2013 at 1:48 pm

    You need to establish the selector strings that give style to all the HTML elements within the calendar, using the plugin you want to transition away from. Work out what the selector strings should be changed to to give the elements of the calendar plugin you want to move to that style.

    It essentially requires you use a Web Inspector (like Chrome’s “Inspect Element” tool), and spend lot of time spent looking at elements, and saying things like (this is just an example) “ul.this_is_the_container styles the container. What is the selector for the container element in this new plugin? That’s what I need to change that selector to.” Rinse, repeat.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".