I want to know, Is there any way to change the Style sheets of the extension library DOJO Tab container control?
Thanks & regards,
Yogesh Kashid
The best way to change the Style sheets of the extension library DOJO Tab container control is to create and use an own css resource. This way you can change every single table part's look and it would be valid for all DOJO Tab container controls in your application.
Create under Resources\Style Sheet a my.css file
Add the Style changes for DOJO Tab classes in my.css file. The style classes start with "dijitTab..." and you can find them analyzing the rendered page in browser.
For changing the tab labels to red you would write e.g.
.dijitTabContainerTopNone {
color: red;
}
3 . Add the my.css class to your theme
<theme extends="oneuiv2.1">
<resource>
<content-type>text/css</content-type>
<href>my.css</href>
</resource>
</theme>
Related
We're evaluating an upgrade from ckeditor 4 to the new ckeditor 5, but I need to be able to extend the Image plugin/package with some custom elements, e.g. a text input for licensing information about the image, a button/checkbox for toggling the image to be a thumbnail or not etc.
How can I add these custom elements in the image package and write my own javascript code to handle the values from these elements?
The image toolbar is being controlled by the config.image.toolbar property. It accepts names of UI components registered in the editor.ui.components factory. In other words, it works like the main editor toolbar which is configurable via editor.toolbar and you can learn more how to create buttons here: Creating a simple plugin.
I have Domino 9.0.1 and dojo 1.9.4
Can i use HorizontalRangeSlider?
When i trying require this control, load empty javasript file.
Example:
<xp:this.resources>
<xp:dojoModule name="dojox/form/HorizontalRangeSlider"></xp:dojoModule>
</xp:this.resources>
<div id="hrSlider" dojoType="dojox.form.HorizontalRangeSlider"></div>
Yes, but just declaring a div with the dojoType isn't sufficient.
See the Dojo documentation if you want to do it manually. You'll either need declarative code to set the properties according to what you want, or programmatic code.
Alternatively, use the Dojo Horizontal Slider control, as documented in XPages Extension Library book. The book also highlights why the control was added - to allow a single component on the page which comprised all the properties required by the slider's various HTML elements.
Is there a way to change the width from the grid container in bootstrap theme using IP or should i hack the CSS style sheet?
Can't understand why would you need this. Do you want to have GRID management narrower? Then add your own css file.
CSS can be added using ipAddCss function in ipBeforeController event.
You can add CSS only for particular admin pages. Use ipRoute()->... to get information about current page.
I am using the popup menu in Extension Library like this
<xe:popupMenu id="pop">
<xe:this.treeNodes>
<xe:basicContainerNode image="/vwicn148.gif" label="Container">
<xe:this.children>
<xe:basicLeafNode label="Child" image="/vwicn148.gif"></xe:basicLeafNode>
</xe:this.children>
</xe:basicContainerNode>
</xe:this.treeNodes></xe:popupMenu>
And it look like this with an image added before the label
As my site is using only "font icons" from FontAwesome I want to display these instead of normal images. how can I do that?
You have 4 options (and they are not pretty):
use a custom renderer as Tim suggested
subclass the control so label is rendered passthrou
lobby the ExtLib team to add new properties
use an XSP.OnLoad script to add the font awesom tags
I have generated a cool css using CSS3 generator and took its CSS style file which looks something like this. pasted a short version though the css is long...
ul#css3menu,ul#css3menu ul{
margin:0;list-style:none;background-color:#C0C0C0;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABsCAYAAACrf9gNAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oFEgYCO8oxcpkAAABlSURBVCjPjZA7CoBADETfTnIB739GGysLIRaCsiGRbYYJ+fAyAJsACRgCrHN6XSU+j3jR8N8N68okwyLiEHC9cn6OiHAmcOvQVJC2zNULLX3KTwL2uWwjVnfZFz9aiDiFk1geyBuO2g6m9q0GQQAAAABJRU5ErkJggg==");background-repeat:repeat;border-width:0px;border-style:solid;border-color:#999999;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;}
now i want to know how to incorporate this with ASP:Menu control which uses "s4-tn" class and have entirely different set of CSS...and I am using sitemap also as datasource. Can I just drop this css and reference it somewhere in asp:menu control of sharepoint and convert the menu style like css3?
thanks
To use a different CSS classname for the menu, you'll need to edit your masterpage and modify the menu control properties. Here's the control you're looking for:
<SharePoint:AspMenu ID="TopNavigationMenuV4" CssClass="css3menu"...
More info on MSDN: http://msdn.microsoft.com/en-us/library/ms476607.aspx
in the control do not forget to register after the master page to override the rules
<SharePoint:CssRegistration name="custom.css" After="corev4.css"