When I'm creating a page, I notice that the font size when I'm typing in a field (i.e. description) is super small. However, when I published the page, the output font size for reading the content is good.

How do I change the size of the default font for typing data into a page, story, etc field (i.e. description field).

I would like the input font I type into a field be the same size as the output font when the content is published, like it is here at this site.

Thanks

Comments

steveeyes’s picture

no one knows?

jaypan’s picture

you have to change the font-size of the input field using CSS.

Before you say 'how do you do that', spend a while googling the answer. It's not hard to find data.

Contact me to contract me for D7 -> D10/11 migrations.

steveeyes’s picture

Why do you assume I didn't spend time search google, but didn't have the experience to find the solution. I did google..maybe didn't know what keywords to use to find the solution. Please show me in google where you would find a solution....I knew it was a CSS issue and spent two hours looking at the css file but could not find the solution...sorry to bother you.

WorldFallz’s picture

Why do you assume I didn't spend time search google....

Because it's a very basic css knowledge question and the information is out there and easily located. Staring at the css file won't magically impart css knowledge (i wish it did, lol). You need to learn at least the basics of css. And sorry, but this is not the place for css 101.

I understand your frustrations, but you should try and see it from the other side as well. CSS and firefox questions/issues really have nothing to do with drupal. There's tons of places to get good info and training on those issues. I know it's convenient to ask to those questions here, where you are already participating and where you know there are people who can answer them, but that doesn't make it right-- it's truly off-topic. As I said, there's a LOT of places to get css and firefox info and assistance-- there's only ONE place to get drupal help. And to the extent that the forums are overloaded with non-drupal posts, less people will get assistance with their legitimate drupal questions that can't be answered somewhere else. Yes, we should probably be more polite about explaining that, but after hundreds, if not thousands, of non-drupal css how-to posts it gets really tiring.

That said, as Hakulicious recommends, get the firebug extension for firefox and read up on some basic css tutorials (anything from w3schools, htmldog, csstutorial.net, sitepoint, or html.net are usually great). Since it's the input font size you want to change, you'll need to inspect the page during input.

steveeyes’s picture

I didn't just stare at the css code, but after hours of researching I would be back and forth between my research and looking at the code. Also it isn't a matter of convenience. Why assume what my work ethics are unless you know for sure. I could go on about how I have been spending night and day trying to learn drupal (which is true) and have solved the vast majority of my problems, but when you run into a blind spot (kinda like a mental block when writing) you hope you have a community you can turn to. If I'm not welcomed let me know.

By the way, I disagree about it being very basic or I would of found a solution....If you understand my first post, I'm not talking about the font size for the output but the size of the font when typing in the actual form itself. Why both the input font and output font are not the same size (like on this form I'm typing in now) is beyond me....every font change I made in CSS changed the output font size but not the input. So after hours of research, test and trial I came here hoping to find the errors of my way.

If you have a solution why I can't find the input font size when typing into a form than I thank you, but if you rather spend words on criticizing my effort without knowing the effort I made to learn drupal and the fact I have solved many of my other problems with research, reading the site, etc without turning to the forum, so be it.

Thanks anyways.

WorldFallz’s picture

No one said you're not welcomed so lets leave the sophistry behind. But every community has their 'guidelines' or whatever you want to call them. I was trying to explain why you were being frustrated and how this community perceives your post.... in a calm and non-accusatory manner. So much for that.

Drupal.org is not the place for css 101. period. Whether or not you agree is irrelevant. Forums users not wishing to help with offtopic posts is not indicative of a problem with the community. If people have some time and wish to answer you they will. Whining about not getting what you want is going to have to opposite effect of what you desire.

If you understand my first post...

As I said:

"Since it's the input font size you want to change, you'll need to inspect the page during input."

Your attitude and indigence at not getting assistance for off topic posts is not going to be a winning formula, but good luck to you.

steveeyes’s picture

You just don’t want to give people the benefit of the doubt, do you? I spent several hours before posting trying to resolve the issue with CSS without resolution, hence I posted for help not knowing if it was a CSS issue or not.

Your post made unwarranted accusations and I responded. Your ingeniousness comments in both posts about css 101 was meant to be demeaning, was not helpful nor was it the intention of my original question to seek css help. Before I posted, I spent hours of trying to resolve the issue with CSS to no avail. Since I ran into a brick wall, I posted in the community for guidance thinking maybe the problem was related to an issue I was not aware of.

Your tyrant about CSS 101 misses the point. Before you go on a rant about all fonts are formatted by CSS in drupal, let me say after hours of changing every font code I could find in the style sheets without it fixing the problem, I thought maybe the possibility exists it was a non css issue. Obviously, you never been in position of uncertainty. Consequently, at the time I posted, I didn’t know if the solution was related to css or not (I never mention css or asked for css help in my first post, you only assume I was).

Not all quests for help are as foreseeable and as certain as you are. Maybe in time, I will understand drupal as well as you and be justified in making unwarranted assumptions when responding to posts on the forum. Nah, instead, I will give people the benefit of the doubt before making unwarranted accusations – better yet, I will not put words in their mouth assuming they were seeking help for something they were not, even if it turns out to be an unrelated topic they could not foresee in their uncertainty when seeking guidance. Fortunately I owe a lot of gratitude and thanks because many here have helped, even when the poster is not certain what the problem is related to.

-Anti-’s picture

I understand where you're coming from - I hate css with a vengeance and often rant about it here in the forums. In fact my last post was a couple of weeks ago, in which I suggested that the entire WC3 consortium should be hanged from a tree... lol.

But I just need to come in a defend worldfallz a bit. She is one of about six (five now that michelle is taking a break) people who answer questions in the forums for two to four hours nearly every day. Look at her tracker: she asks no questions of her own. Her tracker comprises of bug reports and jumping into other people's threads to help them.

Compare that to your own. In three years it appears you have never posted in a thread to help someone; all your threads are started by you, asking your questions. Not very community spirited of you! Everyone who uses the forums should at least try to maintain a 50/50 ratio. Personally I try for a 1:3 ratio - one question for every three people I help (although I've been asking a lot of question in the last week or so). There are always easy noob questions to be answered, and if the less experienced get those ones, it allows the more experienced amongst us to concentrate with the harder issues. This *needs* to be a community, or it doesn't work.

Which is why the handful of regulars are sometimes 'stern'. I do feel that the initial curt responses to your post would have been avoided if you had said: 'I've been stuck on this for two hours and can't find anything about it in the docs or google. I've looked at this, this and this, and tried that and that. I'm using this theme with no wysiwyg editor. I've tried firefox, safari and IE7 on two different computers. I'm now out of ideas. Any suggestions?'.

Anyway, I'm glad a reinstall fixed the issue for you. I hope this thread doesn't degenerate further!

tonicboy’s picture

As Hackulicious said, it's just CSS. If you're using Firefox with the Dom Inspector, it's simple to fire up the Dom Inspector, point it at the element in question, then select "CSS Style Rules" on the right pane dropdown. This will tell you what CSS rule is controlling the text size, then modify it to your needs.

steveeyes’s picture

Thank you for a good response and trying to help. You emulate what a community is about (or why have it) and help promote the use of drupal by other users. I did try several firefox extensions hoping to find the css code but did not help. I made several changes to css file, nothing changed.

Maybe I'm not sure how to use the right tool. Not sure how to use a firefox extension to show me where the css code is for the font I'm typing into a field (just like I'm doing now). I tried firefox web developer but it said no css data when I pointed the cursor to the input field, tried CSSviewer with same result.

jaypan’s picture

With firebug, you click 'inspect', then click the text. In the right pane, you can see which file the font size is coming from (if it has been set), and which selector is being used to set that font. Use the same selector in your own CSS file and re-define the font-size.

If it hasn't been set in the first place, then you will have to target that text specifically.

Contact me to contract me for D7 -> D10/11 migrations.

steveeyes’s picture

Thanks for your reply...I think we are not on the same page and the more I try to get help, the more I get criticized. I'm not talking about the text size after the content is published, but the text size when you are actually typing your content in the form (it is super small). After the content is published the text size is normal size, but while actually typing and inputting the text in the form (i.e. comment field) the size of the text is so small it is hard to see what you are typing.

I had no problem finding the css code for the font size after the content is published, but finding the css code for when the text is actually being typed is turning out to be more difficult. I would hope that the input font and the output font would use the same CSS code, but that is not the case since the size for input font is super small v.s. the published font size. It could be it is not a CSS issue for the template I'm using, but something else that is controlling the input font size. I tried things like changing the font sizes to 100% for any code that even looked like it may effect the input form -- style.css, initial.css, etc. I did hours of research, trial and error, etc, before posting here for help.

Thanks for listening -- I'll keep trying to learn.... Because I understand you are busy, I want you to know that I do put a lot of effort (trial and error, reading, etc) and research before posting.

pbarnett’s picture

Hi!

I thought a picture might help - this image shows Firefox with the Firebug add-on being used to inspect an input text field.

Clicking on the field would 'snapshot' it so you can scroll through the HTML, and through the CSS to see the hierarchy of styles applied to that field.

You can see that it's an input HTML type, class .form-text in a .node-form div. You can't see the CSS file names here, because I've set Drupal to aggregate them. Normally, they're shown, as is the relevant line number in the file, which is nice :-)

I'd try

input {
  font-size: 1em;
}

in your theme's style.css for a starter...

I know it's not a Drupal question, but as a Drupal site developer I had to learn to do this to, and you'll wonder how you managed without it :-)

Pete.

steveeyes’s picture

Thanks so much Pete. Believe it or not, I already played with the code you suggested without any results. Style.css was the first style sheet I played with and from there I checked out the others. No desired results. At least with your feedback, I know I'm not going crazy. I'm starting to think there is something else at play here that is causing me not to be able to make a change to the font size. The fact firebug does not show me any results when I select an element may be a clue there is a problem. I have several other sites and have used firebug, web developer , etc so I do know how to use them so when I saw no styles displayed (like your image shows) for the selected elements I started to think maybe it wasn't a css issue as I suspected. In learning Drupal, I have been playing with a lot of the modules and some of them gave me problems after I decided to disable or uninstall them. Before I posted my first post above, I suspected a css issue so I investigated and tried every css change I could find without result. That is when I started to think it may not be a CSS issue, but somehow related to the core I'm not aware of. Without asking, I would never know. I'm learning. Your input is not only appreciated but invaluable. Thanks.

I'll keep playing around and maybe I will figure it out. If not, I will reinstall Drupal again and start fresh.

-Anti-’s picture

Since no-one's mentioned it yet, what are your firefox settings:

Tools -> options -> content -> fonts and colors -> default font size
and
advanced -> allow pages to choose their own fonts

Be certain that your browser isn't limiting/changing the font sizes
by over-riding whatever the web developer has set in the theme.

jaypan’s picture

You may also be caching your CSS files, which means that the changes won't be seen unless you clear your cache. You do this by going to admin->settings->performance, and clicking 'clear cache' at the bottom.

Also, if you are using the colorpicker module, this will cache them in a different way, which could also cause your changes to not be seen.

Contact me to contract me for D7 -> D10/11 migrations.

pbarnett’s picture

If the problem goes away when you change the theme, it must be in the theme's CSS somewhere... if not, it'll be an issue with a module stylesheet.

I expect you've already tried that :-)

Pete.

wildpoppy’s picture

Hi Steveeyes,

Try putting this style at the bottom of the style.css file. (changing the font size to whatever you need - just put a large one here so you should see a change).

.node-form .form-text {
font-size: 2em;
}

Hopefully that does it. Otherwise could you be more specific about the form that you're having trouble styling?

steveeyes’s picture

I want to thank everyone who replied in this thread. I did try another template, but the results were the same.

After hours (now days) of not solving the issue, I decided to reinstalled Drupal.

After installation, there was no font issue. I have no idea what was causing the problem, but at least reinstalling fixed the problem.

Thanks again. Your support, understanding and patience gave me the will to keep trying to learn drupal so to use it for some of my sites. Much appreciated.