Why is span-number not applied in blueprint? - css

I have some textfields with the class span-4 and they are nicely styled and aligned. When I try to apply the same classes to upload fields it seems as they have no effect. I also tried other span number, but still nothing happens.
How do we handle upload field styling with blueprint?

An upload field is not handled in the same way as normal fields, there's a helpful guide on how to custumize upload inputs - This article should take you through what is possible and what's not.

Related

ServiceNow: Manipulate DOM of ootb Widget

Our team is working in ServiceNow and trying to make some aesthetic changes to the ootb Form widget. We've cloned that widget and are trying to give the Form Sections a different background and some larger/bolder font. Since the Form layout is buried in some template code in the system, the only way for us to change the look and feel is to manipulate the DOM in our cloned widget. We've read that the best way to do this is to use the Link Function tab, but we are unsure how to begin. After inspecting our console, it looks like we want to manipulate the parent div of a tag. What is the syntax so that we can target that specific div?
We've tried different variations of this without any success:
angular.element('legend').parent().addClass('newDiv');
Depending on how big changes you want to make are, I would just try and add CSS using the page CSS. I don't know how familiar you are with ServiceNow, but if you ctrl + right-click the widget in the portal, click 'Page in designer', and then the 'Page' button with a gear on it in the top right corner, then you can add page specific CSS there. I've used this a lot, and it also saves you from cloning the widget.

Styling of Buttons is being overwritten

this is my first post.
I searched for the problem but I couldn't find any solution.
I work with JavaFX, Scenebuilder and CSS files, where I have 2 Buttons and Textfields and other stuff, that are given style classes.
However, when displaying the view, the button styles are being overwritten.
Everything else gets displayed properly but not the buttons.
I can't explain that to myself, however, I have added random buttons and they get overwritten aswell. So I know that somewhere is said that all buttons receive this certain style.
This is a group project, so not all of the code is written by me.
Is there a method in JavaFX that sets styles for certain element types i.e. buttons without styling a specific button? I suspect that this is being done somewhere or maybe the view is inheriting said styling from some other view, because in our project we load stages into each other.
Say I can't fix the occasions where style overriding happens. Is there a way to protect these two specific buttons or buttons in general from getting their style classes overwritten?
OT: why is "hello there" in the beginning of the post being cut out.

Use CKEditor CSS styling in normal div

Please see attached screenshots. Is there a way to create a div that shows the HTML snippet exactly as it was inside the CKEditor window? In my app, certain users enter in text using CKEditor, which other users need to see in view-only mode. Some of the simple styling is preserved (e.g. italics, bold) but other important styling elemenets (e.g. highlighting, table borders) are lost.
I think that the easiest option will be to use CKEditor in the read-only mode.
The reason why I recommend using entire CKEditor is that you can take the HTML that's inside it, but you would also need to get the same stylesheets and that won't be easy.
I guess that you may want to display the read-only content as if it isn't placed in an editor. For that you could use the inline mode or an editor without toolbar, elementspath and resize plugins. In the second case remember to disable the ACF.

Using image styles with Scald dnd (Drupal 7)

I have been using the Scald module for few months now, with great experience. But there is one thing I haven't quite figured out yet.
When I have Drag'n'Drop enabled for a textarea (with CKEditor) I can drag images into the textarea and it displays in it's original size. If i Right-click the image I get the image properties for the image, but only at CSS level.
I'm trying to figure out how to add an Image Style to the image, so that my 4000x3000 image that I drag into the editor will be scaled down to a nicer 300x200 image where wanted, and therefor save some valuable bandwidth.
I found the answer after a pile of googling and reading through few articles. First and foremost it was the one about installing and configuring Scald. (Please Google, I can't post that many links :( )
I installed the CKEditor module, disabled the Wysiwyg module, downloaded the library into sites/all/libraries/, and finally read this article about contexts with Scald: https://drupal.org/node/2104651.
Bottom line, this is possible, but not easy (as sometimes Scald is), but when you get the hang of it, it's much better than the Media module.
I just struggled with this so thought I'd document how to set up contexts.
This is how you add new contexts which can use an image style formatter as a transcoder using the UI:
Go to /admin/structure/scald and click add context. Choose any name and details, but do check "Make parseable"
On the top of the original page for scald settings click "Contexts" in the upper right for "Image" under "Scald Unified Atom Types"
In the page that loads (/admin/structure/scald/image/contexts) you'll see your new context named. Open the fieldset and change the "Transcoder" from "Passthrough" to one of your image styles, e.g. "Large (image style)"
Now when you right-click on a image atom in a textarea wysiwyg and choose "Edit Atom Properties" you'll get a dialog with a new context to choose from. You can also go the default contexts provided by Scald and change them from "Passthrough" to one of your image styles.
Also, at the moment you also have to apply this change https://drupal.org/node/2046545 to scald.pages.inc or you'll lose your legend as you switch contexts or use the dev version. When 7.x-1.2 is released this will no longer be necessary.
I just ran across this same issue, using WYSIWYG 2.x-dev with CKEditor library 4.3, Scald 1.2. What fixed it was one of these things (sorry can't remember exactly which one):
Both "Scald DnD Integration" and "Scald SAS conversion" enabled in the relevant WYSIWYG profiles
The display settings for your image (at admin/structure/scald/image/display) have atom field set to enabled but image field set to hidden
You want to use the insert image module
https://drupal.org/project/insert
The easiest way to assign image styles to images going into a wysiwyg area

How do I style the button in a 'file' element with jQueryUI Button?

I'm using the jQuery UI Button widget to style all the buttons on my pages, but the button on a 'file' type input remains elusive. How do I style this button in general, and can I somehow apply the Button widget to it?
Here is a write up about styling the "browse" button (and problems therein) http://www.cs.tut.fi/~jkorpela/forms/file.html#present
File input elements are notoriously difficult to style.
There's a workaround described on quirksmode - check it out. I find it horribly hacky but it seems to work.
If you need more styling possibilities, you may have to look at a Flash-based uploader like SWFUpload. They work in a different way however - Flash uploads the file data directly - so you may have to change the way your forms work.

Resources