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.
Related
I'm trying to do the layout of a course on masterstudy in wordpress, but I'd like to make a template for certain parts of the course, lets say for example when I hover over the title, show an image, when I click on a paragraph, make another one appear next to it etc... I think it is possible to have shortcuts for these and not have to copy paste the code each time I want to have these effects. I think this icon(see image) might do the trick (not sure) but I can't seem to save a template in my dashboard. So if it is indeed this button, can you please explain me how to save templates, and if it is not the solution can you explain me where to look ? The screenshot shows the Tiny MCE editor
Thanks screenshot
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.
I have to build a site like France24.com, There is a navigation on the left and two arrows on sides for scrolling to the sides. when you click on the arrows or one of navigation items , the related page (preloads) and appears without refreshing the page. How to do that? Is there any usable framework or sample for this?
Regards
After looking at the website, I see what you are trying to do. I see a way to do this, which is through a simple JQuery method load() ( http://api.jquery.com/load/ ). This behaves like get(), so on clicking the arrow, an event could be triggered where you can load another piece of HTML code in place of the one the user is currently looking at.
If you need dynamic content to load instead of a simple static HTML code, it's possible to achieve that by filling in the dynamic part into the HTML code that you want to load before actually loading it. A library that you can use to achieve something like this is React js, developed by FB. Good luck!
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
I'm trying to display all node_edit form neatly within a lightbox without any of the excess content I don't want. No sidebars, footer, header, nothing. Just the content. So I created a page-node-edit.tpl.php file.
I have two problems daunting me, but for now I'll only mention the first since its more important.
1) From any drupal page, clicking on the "edit" link for the node doesn't activate the lightbox like it should. Instead it clicks-thru the link as normal.
With jQuery in the header I added a rel attribute for the lightbox to the links, but the box still doesn't activate. I tested the lightbox on a link I hardcoded into the page, and it activated just fine. For elements generated by Drupal, like the node edit link/button the problem seems to be timing.
I think the rel attribute needs to be built with the page, with the link, rather than appended onto it. The catch is, the link lacks an id and class, so I don't see how the hook_alter_link() function can help me.
I'm willing to try anything. Perhaps someone has done this before? Opened a node/edit form within a lightbox.
Any suggestions would be greatly appreciated.
I've seen the Modal Frame API used in a few modules (Node Relationships uses it to do something very similar to what you're doing); might be helpful...
http://drupal.org/project/modalframe