JEvents Calendar size

[furio]

Hey everyone,

I've installed JEvents into my Joomla site which I've built with a custom template using . When I am at the component section with the large calendar, for some reason the calendar does not expand to fit the size of the I created for the body. You can check it out at:

http://www.africycle1.org/index.php?opt ... =03&day=21
(Please keep in mind I have a lot of work to do on it still  )

Anyone have any ideas?

[FrankZoid]

Jevents has its own css file, which you will need to edit to fit to your template. Nice look for your site, BTW.

[furio]

Thanks for the nice comment 

I actually played around a bit with the CSS earlier but couldn't figure out how to change the width of the calendar. I'm relatively new to this stuff so any help would be much appreciated.

[FrankZoid]

Here's a tip:

1) Download FireFox if you don't already have it. Get it at http://www.getfirefox.com.
2) Search for the Web Developer extension at the FireFox site, and install this extension.
3) View you site in FireFox with the Web Developer extension installed. Use CSS -> Edit CSS to make changes that you can see on screen. The JEvents css classes are well named, and will be in the tab style.css.
4) Once you have your css how you like, copy and paste the code to the matching file (style.css). This files is in the /components/eventcal/ directory (may exist twice from my memory; you will need to replace the right one for changes to take effect.)


Hope this helps.

[furio]

You said to use "this extension" but didn't actually give me a name. Which one were you referring to?

[FrankZoid]

The "Web Developer" extension.

[furio]

Sorry about that. I guess I read through it too quickly. Thanks for your help!

[furio]

Ok, so I managed to install the Web Developer extension for Firefox and its been awesome! I fixed my problem with the size of the calendar but am having one problem still. I removed the beige-colored background for where the name of the months are to black. However, I can't seem to change the colors for the text for the days of the week. I have only been able to change the weekends for some reason. Here is my CSS:

Code: Select all

/*********************
* Calendar style
**********************/
.cal_table {
   border: 1px solid #000000;
   width: 600px;
}
.cal_td_daysnames {
    border-bottom: 1px solid #000000;
    height:25px ! important;
    line-height:25px;
    color:black;
    background-color:#000000;
    font-weight:bold;
    font-color: #FFFFFF;
    text-align:center !important;
}
.cal_td_daysnames .sunday{
	color:grey;
}
.cal_td_daysnames .saturday{
        color:grey;
}
.cal_daysnames {
    font-family: Arial;
    font-size: 12px;
    font-style: normal;
    font-weight: bold;
    color: #FFFFFF;
}

For some reason the text for the days of the week are still black. You can see it at http://www.africycle1.org/index.php?opt ... &Itemid=26. Can anyone help me out?

[FrankZoid]

Use the DOM  Inspector tool to inspect the page. Then use the Find a Node icon (left of the binoculars) and click on a day of the week. That will show you what class is being applied to the days, then you know what to change.