CKEditor: input elements not displaying in proper order - dialog

Whenever I click on the CKEditor dialog (eg: add image, hyperlink etc) form elements are not displaying in proper format. Guide me that how Can I resolve this issue ?

Your styles are interfering with CKEditor styling. You need to open developer tools and check which of your selectors are applied to CKEditor elements and fix those selectors to be more precise.

Related

How to access the Text-Layer over the canvas in Pdftron

I am working on an application where I am using a third-party PDF viewer PDFtron. I can select the text over the canvas, but once I inspect it, I can't see the text overlay. Only the annotations are there. You can check the demo here.
If I can select the text on this, but it's not actually 'HTML' then how it's rendered on the canvas.
Simply, I am looking for the HTML overlay, which I can access through DOM APIs.
I am wondering if I can somehow enable it?
Texts are rendered on the canvas, so that's why when you inspect you can not see them.
If you want the texts added to the DOM, you can try turn on the Accessibility mode - https://www.pdftron.com/documentation/web/samples/advanced/#accessibility.
And you can also try extract the text - https://www.pdftron.com/documentation/web/guides/extraction/text-extract/. Or get the information on the selected text using events - https://www.pdftron.com/documentation/web/guides/extraction/selected-text/.

Google Chrome Extension Development

I am developing a chrome extension that would like to add a tab at the bottom of the page to manipulate DOM elements. Chrome 'manifest.json' file doesn't provide such feature. So how to do it or rather how does Firebug add a tab at the bottom of the Chrome?
I would suggest inserting a panel in every page through a content script. You can style it in order to appear at the bottom of the page and be always visible.
In order for it to retain its state between navigation from one page to another, you need to persist it some how (example use chrome.storage or a similar mechanism through the background page to persist the content (or whatever you need).
See this answer on how to insert (and style) a toolbar-like div or iframe in a page through a content script. (It is fixed to the top of the page, but you can easily modify the code to fix its position at the bottom.)

How to align an image in a xe:inputRichText (or HTML pass-through)?

I'm using the Domino 8.5.3 <xe:inputRichText> control for end-users to add web content. The control has the basic feature to add an image, but no "align" settings to float text around the image (ex. <img align="right"> ), which is so common with basic HTML.
One work-around tried is to use a 2-column table, which works, but not as well (especially, when re-sizing the window).
Any ideas for a work-around? Is there anything similar to 'Pass-thru HTML' in a inputRichText control?
Try to set toolbar style to large and then simply switch to HTML source (the last but one button) and change it whatever You like:
http://www-10.lotus.com/ldd/ddwiki.nsf/dx/CKEditor_in_XPages_in_NotesDomino_8.5.2

Page-level css to go with a themeroller theme?

Having selected a theme from themeroller, I'd now like to put together some compatible CSS for the rest of the page that includes the jquery components that respect the theme. Is there any shortcut for this?
I would use the hex values and fonts that you used in your Theme to build your own custom css file. You can gather all of these values using the Edit feature on the ThemeRoller page for the theme that you've selected.

Sharepoint search button customization

I am working on SharePoint Branding project, where i need to change the whole sharepoint look and feel according to Clients design guidelines/Visual Designs.
happy part, most of the branding is done but still i am facing problem with SEARCH BUTTON of sharepoint. Ia m not able to replace this default button with my designed button.
any direction ll be great help
What we did was replace the delegate control of the search button with our own, using a feature. In that feature we specified our custom image for the button.
This might help - http://labs.steveottenad.com/reskin-restyle-a-sharepoint-2010-search-box/
When we customised the search box we hide the default img for the search button using css and replaced it with a new background image.
You can't replace the default button with you own search button. You can however customize it to your needs using CSS styles. I have done the same thing. You can create your custom style to override the styles from the corev15.css file.
Create you custom styles css file, reference it in your page layout and just use it.
Hope that helps.

Resources