2

I'm using Expresso by Put Your Lights On. The issue we are having is demonstrated in the image below. When a pop-up window is generated to add links, images, etc. The entered text is partially cut off, because either the field box is too small or the text is too big.

Can't Read Text Entered Into Field

I'm more than willing to edit this myself, but I can't seem to find where and what is controlling the input field size. I'm using:

I'm just not certain which item, would control the input field size for this. Is it the basic EE CSS, Espresso, Responsive CP or somewhere else. The expresso.css file does not seem to contain the info, I need to modify.

Improve this question
1
  • 1
    Just use the web inspector and see where the CSS lies. It's possible the HTML is old and the size is hardcoded into attribut itself. I will leave this as a comment vs. an answer since I didn't really answer it. – Justin Kimbrell Dec 12 '12 at 15:25
3

Chrome's Inspector should be your best-friend. Inspect the element (right-click on it and click "Inspect Element"), go to "Computed Style", find the height and toggle it down to see the source-file.

Improve this answer
1
  • This has gotten me on the right track, anyway. I was viewing source, instead of 'inspecting element'. Since the item was a pop-up window, it wasn't displaying in the source code. From what I can gather from inspect element, it seems to be an issue with CK Editor. So now I need to wade through their various CSS files and find 'cke_dialog_ui_input_text' to see which one is setting size and modify. – nonprofit_tech Dec 12 '12 at 15:48
2

First step would be to make sure your browser isn't zoomed in on the text by resetting the zoom level. Here are FireFox instructions:
http://support.mozilla.org/en-US/kb/font-size-and-zoom-increase-size-of-web-pages

If you want to inject custom CSS into the CP, you can use this CP CSS & JS extension to do so.

Using your browser's inspect tool will help you track down the exact CSS and CSS file causing the issue if it's a CSS problem.

Improve this answer
4
  • I don't use FireFox, just not a fan. I keep it around purely for testing purposes, but its not a zoom issue. I think Justin probably hit the nail on the head, that the size is probably hardcoded somewhere. There are just a number of potential CSS files in play and adding CK Editor just grew the number. So its hunting time. – nonprofit_tech Dec 12 '12 at 16:10
  • Got it. Inspect will be your best friend and will show you quickly. Is that a WYGWAM field? Is that how you are using CK Editor? I see in the default EE CSS file that input[type="text"] is set to font-size: 110%. Could be that. – Anna_MediaGirl♦ Dec 12 '12 at 16:12
  • It's a WYSIWYG field, WYGWAM is Pixel & Tonic's version of CK Editor, but Espresso is similar, more lightweight, than WYGWAM for when we don't want to provide a lot of features for people. The EE settings of 110% would be awesome. The element inspector let me find the class, 'cke_dialog_ui_input_text', now I just need to find what stylesheet it's in. – nonprofit_tech Dec 12 '12 at 17:23
  • Look for a CSS file named dialog.css in the CK Editor files. From my Google search, that seems to be where that class is styled. Most likely in this location: mydomain.com/themes/third_party/expresso/skins/expresso2/… – Anna_MediaGirl♦ Dec 12 '12 at 17:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.