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"
Related
I am using vue2-editor and i want to toggle the content view of the editor like ckeditor or mailchimp editor does
It is possible using vue2-editor or quill?
You can have a computed property that either returns the actual text or uses a library like hypertext to generate html, the return value of the html would be contingent on another computed property and returns the html you want.
I also have a simpler solution, which I used once but need to take a look at my code in a few hours which is not in front of me.
I have come to a road block in my search to the answer to using custom fields in templates.
I have tried adding
%%SNIPPET_ProductCustomFields%%
in the ProductDescription.html but nothing shows.
Is there ANY documentation about this?
Can this snippet be used in certain places only? if so which ones?
What needs to be in place for this to display in the products description?
Any help, tips or pointers would be great.
The CustomFields Snippet, %%SNIPPET_ProductCustomFields%%, can only be used if being referenced through its own Panel.
By default, the Panel that calls this snippet is named %%Panel.ProductOtherDetails%%
You can also create your own custom Panels by uploading them to the Panels folder via WebDav.
For example, if you created a template file called CustomFieldsPanel.html, you would upload it to the /dav/template/Panels folder, and reference it in your theme by %%Panel.CustomFieldsPanel%%
To answer your question though, you can do one of the following to display Custom Fields in the Product Description:
Insert it into ProductDescription.html via its default Panel - %%Panel.ProductOtherDetails%% - modifying it by editing the template file ProductOtherDetails.html
Create your own custom panel, include the Snippet within that same custom panel, and insert it into ProductDescription.html by the custom panel's name. An example of that file might look like so:
<!--
* /dav/template/Panels/MyCustomFieldsPanel.html
* %%Panel.MyCustomFieldsPanel%%
-->
<div id="MyCustomFieldsPanel">
<h1> Custom Fields Below </h1>
%%SNIPPET_ProductCustomFields%%
</div>
Hope this helps :-)
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.
I have this requirement where I have to change the default styles on my Ext JS application. I am not talking about changing stuff in CSS files yet. I am not that ambitious yet. Here is what I am looking for:
Suppose I need a Submit and Cancel buttons, I use xtype:button and text:Save ( or Cancel ). This will render buttons with the text on them. What should I do if I want to change the look and feel of the button? Or replace the button with a cool Save or Cancel image?
Right now I have all the texts on the application with the default font that ExtJS shows. What am I supposed to do if I want all the text on the application changed to a different font? Everything right from the data in forms/grids and the titles of each component should be changed to some other font my customer prefers. What am I supposed to do?
I understand these are very basic and a generic questions, but I am looking for a good headsup before I proceed with my task.
Thank you all in advance. Waiting for answers :)
Update: So, I found out how we deal with CSS and change the fonts. Can anyone help about the Chaning the look and feel for Submit/Cancel buttons.
I recommend you to use SASS and compass to build your own themes, or better said to change one the existing themes. In the Ext JS documentation you can find the css variables which you can set according to your needs.
If you are not ready for theming with SASS just yet take a look at this example of button configs from the sencha docs:
Stanadalone Example page: http://docs.sencha.com/extjs/4.1.3/extjs-build/examples/button/button.html
CSS that adds customized images to the buttons: http://docs.sencha.com/extjs/4.1.3/extjs-build/examples/button/button.css
JS that shows button configs: http://docs.sencha.com/extjs/4.1.3/extjs-build/examples/button/button.js
Essentially this shows how to use iconCls property on the button config along with a simple CSS class to add desired image to your button.
I have to download CSS file and apply style sheet to my app. I downloaded this file at the local folder and referenced it as
style.href = "ms-appdata:///local/css//custom.css";
and appended to head as
document.getElementsByTagName('head')[0].appendChild(style);
after document onready event.
Seems it has no effect (but I can see this element in the dom browser).
So is there any restriction for css source: app package, local folder? May be this impossible to reference downloaded CSS due to MS limitations? Or may be I'm doing something wrong? Any suggestions?
Do keep in mind, however, that you can access the document.styleSheets collection and list, add, or remove CSS rules dynamically from JavaScript. You can access the individual rules themselves through the DOM using statements like document.styleSheets[0].cssRules[0].style.color = "red" or you if you've fetched yourself some custom CSS text (dynamically from your other CSS file online) you can add its styles to one of your active style sheets using something like document.styleSheets[0].cssText = "{my CSS code}". Do be sure that you're manipulating the right style sheet by checking the document.styleSheets[0].href.
I think you're out of luck trying to head down that path.
Note that, for security reasons, you cannot navigate to
HTML you have downloaded to this location and you cannot
run any executable or potentially executable code, such
as script or CSS.
Source: http://msdn.microsoft.com/en-us/library/windows/apps/hh781215
Also, this blog post seems possibly helpful: http://palermo4.com/post/How-to-Use-IFrames-in-WinRT-Apps.aspx