How can i change the look of the jqgrid without changeing the stylesheet. Basically im using jqueryui to style my site but i want to use different background images for just the grid. Is this possible?
Is it that you want to apply several jQueryUI themes to the same page, and have jqgrid use one of them while having other elements in your page use the other?
You may want to look at this page which discusses how to add scope (I'm assuming the easy way is to have the rest of your page use the manually scoped theme, and have jqgrid use the "default" scope, unless you want to dig into the jqgrid jquery extension code to see how to use a custom scope)
I haven't done this, but the strategy that I would use would be to define some alternate styles for your grid, keeping the same basic CSS definition layout that jQuery UI uses, but redefining the style content the way you want it. I'd make sure that these styles are included after the jQuery UI style sheet. Then I would use javascript on document load to go and apply the new CSS classes to elements of the jqGrid that have the matching jQuery UI classes to your styles.
I think it will be a major pain as there are many classes and I'm not sure that I would do it since sort of defeats the purpose of having a theme.
.jqgrid-widget { ... override widget styles ... }
.jqgrid-widget input, .jqgrid-widget select ...
.jqgrid-widget-content { ... override widget-content styles ... }
$(function() {
$('#myGrid .ui-widget').addClass('jqgrid-widget');
$('#myGrid .ui-widget-content').addClass('jqgrid-widget-content');
...
});
This function removes all (at least almost all) the jquery ui candy
/* Remove jquery-ui styles from jqgrid */
function removeJqgridUiStyles(){
$(".ui-jqgrid").removeClass("ui-widget ui-widget-content");
$(".ui-jqgrid-view").children().removeClass("ui-widget-header ui-state-default");
$(".ui-jqgrid-labels, .ui-search-toolbar").children().removeClass("ui-state-default ui-th-column ui-th-ltr");
$(".ui-jqgrid-pager").removeClass("ui-state-default");
}
Related
I'm using Full HTML filter, with CKEditor. The following filters are enabled:
Align images
Caption images
Track images uploaded via a Text Editor
Collapsible text blocks
Note that Limit allowed HTML tags and correct faulty HTML is NOT enabled.
when I add a style attribute to a table element in Ckeditor using the Source view, specifically "width=75%", it is stripped when the page is rendered. When I edit the page again and go to Source view, the style tag is there.
What is stripping it on render?
I believe inline styles are removed by default for security reasons. But, there has been a lot of discussion about this issue on Drupal.org over the past few years. If you're looking for a workaround and accept the risk, here are two approaches I have found:
How to fix: CKEditor is removing style attributes. Drupal 8.
Refactor Xss::attributes() to allow filtering of style attribute values
Fair warning: I have not personally implemented either of these.
Inline style is stripped by default with Basic HTML formatter. Unless you have a specific reason why you don't want to turn on Limit allowed HTML tags I highly recommend that you do because it gives you a lot of control over what tags you and others can use in the wysiwyg. In addition, it allows you to add a "Styles" button with pre-configured styles so you don't have to insert inline CSS code repetitively.
I am trying to implement CKEditor v4.3.2. The way our product is set up is there are multiple areas of our pages that can be edited - we open an editor in a modal window and use the iframe method for editing. It works great with one exception:
If the page DOM looked something like "body > div#container > div > div#editcontent"
and there was CSS rules targeting that DOM then the CSS does not apply in the editor because the editor DOM is simply "body"
What I would LIKE to do is supply the editor with the HTML DOM Structure of the page that holds the editor so the ContentCSS rules that normally impact the div would still apply (e.g. white background in the div instead of background color from the body tag)
I am at a loss for how to accomplish this.
Thanks!
If you want the content of editor to inherit styles of your page, so a full integration with all the styles applied with every kind of selector, then you would have to use inline editing. Only inline editing offers that.
When using classic editor (the one using iframe) you still have an option though. It's the config.bodyClass setting which lets you assign a class to the body element into which contents is loaded. Then, if all your contents styles selectors starts with that class and a stylesheet is loaded using the config.contentsCss setting, the content inside editor will look similarly to your final page.
I'm aware of the JoomlArt JA Wall template but it doesn't appear to meet our use case as we have the need to include tiles in the feed that are Adsense banners. I've read up on JQuery Masonry and see that it uses the infinite scroll feature.
Is it possible to create a Joomla template using Masonry that also will take Adsense banners ?
Of course it's possible, just make sure you add the class you choose for masonry to each element; depending on what kind of elements you want to align: modules? blog items? it should be fairly easy; if you want to apply masonry to items across the whole page, just make sure you don't enclose modules and blog items in their own div groups.
I'm wondering how to replicate the functionality of the draggable column/row dividers such as found at http://jsfiddle.net/.
Is this built on top of some library?
Thanks!
The draggable dividers in the jsfiddle site are implemented using the code in jsfiddle.net/js/LayoutCM.js and jsfiddle.net/codemirror/js/codemirror.js.
Note: The new code change in SO makes it really finiciky to directly link to the jsfiddle implementation in order to explain how they implemented something.
Other relevant StackOverflow questions include
Resize elements by dragging divider handler
Draggable div without jquery ui
What is a lightweight script jquery extension that implements a draggable divide ?
The is functionality is provided various projects including jquery plugins and other javascript scripts
jquery-divider
jquery-splitter
splitplane
jqueryui Resizable (used as component to implement)
jqueryui Draggable(used as component to implement)
mootools splitter
yui resize (used as component to implement)
jquery split plane
Also see other resources including
An example jquery splitplane implementation
The example splitplane in Google's closure library
split plane control in yui example
Most people seem to use an existing jquery plugin or make their own implementation using the Draggable and Resizable components, for example code see the other StackOverflow posts mentioned.
How to add a CSS from style sheet in jquery
it doesn't matter where you define the css: you can define them directly in your html document (not nice style), put them into one or several external css-files or create them via JS (not nice style, too). After that, you can use the addClass method
$("p").addClass("myClass yourClass");
All css methods of jQuery can be found here