Adobe Community: Font and Font size in my YUI calendar overriding main text styles?

Currently Being Moderated

1. Ken Binney,

Apr 27, 2012 1:03 PM in reply to fourwhitesocks

Report

Without a link to your online page - all we can do is guess.

If your main text styles are in a remote styles sheet, write and assign some CSS rules

EMBEDDED IN THE HEAD SECTION of your page

Those rules will overide.the remote rules.

|

Mark as:

Currently Being Moderated

2. John Waller,

Apr 27, 2012 1:03 PM in reply to fourwhitesocks

Report

It'll be a case of conflicting CSS styles. You just need to isolate the YUI calendar styles in your CSS.

Can you upload your page to the web and tell us what you're struggling with?

Then we can see your code and offer suggestions.

|

Mark as:

Currently Being Moderated

3. fourwhitesocks,

Apr 27, 2012 1:49 PM in reply to John Waller

Report

I know I'm bad for asking w/out it being online. It's not quite ready, hopefully it will be online early next week.

I can tell you that when I added the calendar to my site there were 2 seperate CSS style sheets that came with it. One called fonts-min.css and the main calendar one is the calendar.css file. The css font styles that govern the calendar seem to be in the fonts-min.css and look like:

body{

*font-size:small;*font:x-small;

font-family: Arial, Helvetica, sans-serif;

font-size: 13px;

line-height: 1.231;

}select,input,button,textarea{font:99% arial,helvetica,clean,sans-serif;}table{font-size:inherit;font:100%;} pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height :100%;}

I have the fonts and sizes I would like in my main body tag and also I tried again by styling a <p> tag; which I know is redundant...

** my css styles are in an external style sheet; fyi

I like the way the default calendar is styled but when it overrides my main text it makes the main text way too small....

|

Mark as:

Currently Being Moderated

4. John Waller,

Apr 27, 2012 2:58 PM in reply to fourwhitesocks

Report

We really need to see the page online to give you a useful answer.

The site doesn't have to be ready. A draft will do fine so we can see what you're seeing. Upload it temporarily. When it's fixed, you can take it off the server.

The problem seems to be conflicting CSS styles but without seeing the entire code, it's a guessing game to establish what's conflicting with what.

It's just a matter of writing more specific CSS rules to target specific parts of the page so that the unwanted rules don't overrule the wanted ones.

|

Mark as:

Currently Being Moderated

5. fourwhitesocks,

May 7, 2012 10:34 AM in reply to fourwhitesocks

Report

Here is my site:

www.detailpropertycare.com

Now that I have it uploaded my question has kinda changed a little. So my question is how can I change the text size and font (in the YUI calendar..) WITHOUT it affecting the text on my whole page? When I change the calandar size and fonts by styling the body tag of the calendar itself it overl-rides the text styles on the whole page.... (kinda the same question, just slightly modified ...)

|

Mark as:

Currently Being Moderated

6. Ken Binney,

May 7, 2012 10:41 AM in reply to fourwhitesocks

Report

Assuming you have no duplicate rules in your stylesheets,

Calendar style rules only affect the calendar

|

Mark as:

Currently Being Moderated

7. fourwhitesocks,

May 7, 2012 10:45 AM in reply to Ken Binney

Report

Well that's exactly what I thought. As far as I know the only place I have text styling is in the body tag of my external style sheet....

|

Mark as:

Currently Being Moderated

8. Ken Binney,

May 7, 2012 11:05 AM in reply to fourwhitesocks

Report

You do realize that your container width pushes half your page off the screen?

I reduced your calendar font from 2em to 1em and it looks like this

|

Mark as:

Currently Being Moderated

9. fourwhitesocks,

May 7, 2012 11:13 AM in reply to Ken Binney

Report

Yep I will have to adjust the container. I was trying to get the effect of the 'photos' being more like a background...

Where did you do the adjusting on the font size in the calendar?

|

Mark as:

Currently Being Moderated

10. John Waller,

May 7, 2012 1:49 PM in reply to fourwhitesocks

Report

fourwhitesocks wrote:

Where did you do the adjusting on the font size in the calendar?

Get to know the Developer Tools in the various browsers

- F12 in IE

- Firebug add-on for Firefox

- Developer Tools in Chrome

Using those tools, you can point and click at any element in the browser window and see exactly which CSS rule is being applied to that element and where that rule is located in which stylesheet (if you have multiple stylesheets)

Those free tools are essential for quickly finding, troubleshooting and tweaking CSS rules.

You can also use those tools to experiment with changes in the CSS e.g. tweak a font-size, and see the immediate effect on screen in the browwser before putting those changes into the CSS in Dreamweaver.

|

Mark as:

Currently Being Moderated

11. fourwhitesocks,

May 7, 2012 7:58 PM in reply to John Waller

Report

You guys are always amazingly (is that a word) helpful...yep I will for sure 'get to know' those tools....

|

Mark as:

Currently Being Moderated

12. fourwhitesocks,

May 7, 2012 8:25 PM in reply to fourwhitesocks

Report

Ok so I added the Firebug, & it looks totally helpful, but where does it tell me (by using the add-on) the overall font size of the calendar? I must just be missing it...

|

Mark as:

Currently Being Moderated

13. John Waller,

May 7, 2012 8:46 PM in reply to fourwhitesocks

Report

It's % based

|

Mark as:

Currently Being Moderated

14. fourwhitesocks,

May 8, 2012 6:06 AM in reply to John Waller

Report

Ok Ok gotcha, I was looking for the font size being in em's so I just did miss it! Good thing I got your eyes ;-) Thank you!

|

Mark as:

Currently Being Moderated

15. Ken Binney,

May 8, 2012 7:56 AM in reply to fourwhitesocks

Report

One issue is that the CSS stylesheet that is intended to control the calendar fonts is still missing from your server.

http://www.detailpropertycare.com/YUI/2.6.0/build/fonts/fonts-min.css

That's probably where I adjusted the 2em to 1 em as pictured in my earlier post.

Without it, you might run into functional issues on some browsers.

I believe you are working with an older version of the calendar which has some security issues (vulnerability to javascript injection) There are patches or better yet, you can link to those scripts on Yahoo or Google servers rather than your server, and eliminate the risk.

http://yuilibrary.com/support/2.8.2/

Cheers

|

Mark as:

Currently Being Moderated

16. fourwhitesocks,

May 8, 2012 8:11 AM in reply to Ken Binney

Report

Well not sure about that but I was able to do the adjusting I wanted based on John Waller's helping my find where to adjust the syles. I did notice that the fonts css was not there but then I found the controling css was in the Calendar css style sheet. I made the adjustments and already uploaded it again, but I will check it out. Thank you!

|

Mark as:

Currently Being Moderated

17. fourwhitesocks,

May 8, 2012 8:50 AM in reply to Ken Binney

Report

Ok how would I go about linking those scripts to the Yahoo server? That part is very new to me :-)

|

Mark as:

Currently Being Moderated

18. Ken Binney,

Dreamweaver

Font and Font size in my YUI calendar overriding main text styles?

Apr 27, 2012 12:35 PM

More Like This

Bookmarked By (0)

Answers + Points = Status