The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Changing the colors of text the event highlight in the Calendar Widget

View previous topic View next topic Go down

Solved Changing the colors of text the event highlight in the Calendar Widget

Post by HWKII on January 2nd 2012, 12:33 am

What bits of CSS code are necessary to change the Calendar widget so that instead of simply bolding the text for an event, the date shows up in a different color? I am refering to only the widget, not the full blown calendar. My forum is www.driversports.org, you will see that our Calendar widget applies a bold font when there's an event on that date, and that is far too subtle an indicator. We would like those dates with events on them to show up Orange.

Thank you.

HWKII
New Member

Posts : 10
Reputation : 1
Language : English

Back to top Go down

Solved Re: Changing the colors of text the event highlight in the Calendar Widget

Post by Mati on January 2nd 2012, 12:34 am


Mati
Active Poster

Posts : 1873
Reputation : 281
Language : || HTML || CSS || jQuery ||
Location : At the Gym

http://elite-gaming.forumotion.net/

Back to top Go down

Solved Re: Changing the colors of text the event highlight in the Calendar Widget

Post by HWKII on January 2nd 2012, 12:40 am

I'm sorry that's not what I meant at all. I am familiar enough with CSS to know how to input color codes etc, what I don't know is where in the CSS code is it defined how a date in the mini-calendar should change when there's an event on that date.

The Mini-Calendar widget displays a month of dates. If we have events posted on those dates, that date on the mini-calendar changes appearance, from a standard font to a bold font.

If you go to www.driversports.org, on the left you will see the Mini-Calendar widget. You will notice that Friday, Jan 6 is slightly bolder than the rest of the dates because of a Birthday on that date. Instead of the font being slightly bolder, I would that date to change colors. It is simply too difficult to tell which dates have events and which dates do not, and so the Mini-Calendar is not living up to it's potential.

HWKII
New Member

Posts : 10
Reputation : 1
Language : English

Back to top Go down

Solved Re: Changing the colors of text the event highlight in the Calendar Widget

Post by Nera. on January 2nd 2012, 1:00 am

Hi,

Something like this:

Code:
#calendar a {
    background: red;
}

Or it has to be the whole table/box?


Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

Solved Re: Changing the colors of text the event highlight in the Calendar Widget

Post by HWKII on January 2nd 2012, 1:04 am

@Nera. wrote:Hi,

Something like this:

Code:
#calendar a {
    background: red;
}

Or it has to be the whole table/box?


That is much more like what I was going for yes, thank you very much Nera. If I could highlight the entire "box" that that date is in that would be better, I think, from an artistic point of view. Your help is very much appreciated. Smile

HWKII
New Member

Posts : 10
Reputation : 1
Language : English

Back to top Go down

Solved Re: Changing the colors of text the event highlight in the Calendar Widget

Post by Nera. on January 2nd 2012, 1:06 am

Try this. Add this to your AP > Modules > JS managment

Code:
$(document).ready(function() {
$('#calendar td:has("a")').css('background-color', 'red');
});

Be sure to enable JS too.

It should do the trick for the whole box.


Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

Solved Re: Changing the colors of text the event highlight in the Calendar Widget

Post by HWKII on January 2nd 2012, 1:12 am

@Nera. wrote:Try this. Add this to your AP > Modules > JS managment

Code:
$(document).ready(function() {
$('#calendar td:has("a")').css('background-color', 'red');
});

Be sure to enable JS too.

It should do the trick for the whole box.


Thank you so much. :wouhou:

HWKII
New Member

Posts : 10
Reputation : 1
Language : English

Back to top Go down

Solved Re: Changing the colors of text the event highlight in the Calendar Widget

Post by Nera. on January 2nd 2012, 1:12 am

Welcome.

Topic Solved & Locked

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum