Changing background color of event links

User 2483053 Photo


Registered User
9 posts

I have made a search on the Web Calendar forum but cannot seem to find an answer to my questions: I would like to have each event day in my calendar to have a colored background instead of just being underlined. Should I be doing this in my css file? Perhaps a change to the following code:

//** calendar days **/
#cc_calendar tbody td { width:14.28571%; vertical-align:text-top; }
#cc_calendar .day { border:1px solid #918f8f; height:35.7142857142857px;
background:#f4f4f4 url('../images/shadow_under_day_48.png') repeat-x;}
#cc_calendar .notinrange { background-color:#deddde;}
#cc_calendar .date-number { display:block; color:#5a4a42; font-size:15px; padding:2px 4px; text-align:center; }
#cc_calendar .datenumberstrong { display:block; font-weight:bold; color:#5a4a42; font-size:15px; padding:2px 4px; text-align:center;
cursor:pointer; text-decoration:underline;}
#cc_calendar .notinrange .date-number { color:#aaa;}

Please see the website I am working on: http://www.artdelordinaire.com
As you can see from the index page, I am using french and have made a few changes to each of the html pages in my calendrier1 folder. My other question: is there a way to change the event box text on the bottom; event to événement?

I have added the photo and have underlined the word: event

Thank you for any help you can give me.

Attachments:
User 38401 Photo


Senior Advisor
10,951 posts

Hiya Carole,

You can alter this in your CSS file by changing the following:

#cc_calendar .datenumberstrong { display:block; font-weight:bold; color:#5a4a42; font-size:15px; padding:2px 4px; text-align:center;
cursor:pointer; text-decoration:underline;}

to

#cc_calendar .datenumberstrong { display:block; font-weight:bold; color:#5a4a42; font-size:15px; padding:2px 4px; text-align:center;
cursor:pointer; text-decoration:none; background-color: skyblue;}

I've bolded the areas that I changed above. Basically I took out the underline in the text-decoration area and told it not to display any. Then I added a background color to the date that has the event on it.

Hope that helps :)

P.S. Don't forget to save your CSS file changes so you don't accidentally overwrite them with a calendar program update and they will be easy to copy back in then :)
User 2483053 Photo


Registered User
9 posts

It is doing what it's supposed to but I would like to change the underlined event day, as an example: January 1st has an event and the day 1 is underlined. I would like to add a different background color to highlight the number in the calendar. Can this be done?
User 2483053 Photo


Registered User
9 posts

That is exactly what I needed! Thank you so much Jo Ann for your help and such a quick response. So I was basically on the right track after all. Now for my other question of the event listing on the bottom of the yellow event box. Is there any way to change the text from event to another word? I am really stumped on this one.
Many thanks again for your help, it makes using the software so much easier when you have great help.
User 38401 Photo


Senior Advisor
10,951 posts

I'm going to guess yes you probably can, it's going to be in the color box scripts though. I'm installing it at the moment to see if it's something too hard to find or not :)
User 38401 Photo


Senior Advisor
10,951 posts

Ok I found it right on your site pages so it wasn't too bad. You'll need to change one of the .js pages in order to fix this. I would suggest you backup the pages before you edit them so you always have the orginals to fall back on.

Go to the folder location for you calendar:

/calendrier1/javascript/behavior.js

Find that behavior.js page there and open that in a "plain" text editor such as Notepad or other text editor.

In the very first section you'll see the lines:

function loadpage(page)
{
$("#cc_webcalendar").load(page+" #cc_calendar_container", function() {
$("a[rel='events']").colorbox({
inline:true,
href:function(){
return $(this).attr('href').replace(/[^#]*/,'');
},
iframe:false,
innerWidth:400,
innerHeight:250,
opacity:0.4,
current: "Event {current} of {total}"
});

Change the word Event as you see bolded above to whatever you want it to be.

Once again REMEMBER that any subsequent updates in the program may overwrite these files so keep a log of your changes so you can go back and refix them again :)

User 2483053 Photo


Registered User
9 posts

Again many, many thanks for responding so quickly. You really are very knowledgeable. It worked exactly as I hoped it would. And by going through the files, I found other objects I could probably change, and yes, I certainly do keep text logs of the original documents.
You have made this program a joy to work with. Thank you!
User 38401 Photo


Senior Advisor
10,951 posts

Glad it helped Carole, have fun with your new tool and good luck with your site :)
User 2445218 Photo


Registered User
5 posts

I'm new to using the web calendar, so far I'm still confused but it's getting better. (using 5.1 build 20)
I have a few questions on changing colors in the style sheets. One color that I can't fine is the one that controls the text color for the events that reside in the small rectangles that are listed. Text is currently black with a white or gray shadow.

Next, is their a way to export a calendar with out over writing the images and stylesheet folders, or is it possible to save my current changes as a new style. If not is it possible to create a style so it can be added in to the calendar for later use?

Thanks
Dale - www.wyattearp.biz/test <-- this is the site I'm working on with the calendar.
User 2445218 Photo


Registered User
5 posts

I'm wondering what the manifest.xml file in the themes folder is for and how the colors in each one is determined? I'm saving my current stylesheet files along with some new images files into a new theme. Just wanted to make sure of why the xml files was needed....


Thanks
Dale

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.