I am using bootstrap to build my design, but it is too rigid.
I want to clear the defaults and override the styling for a specific element.
In other words, I want to style my active class from scratch making use of defaults of JavaScript, without overriding every single style on that element.
How can I do that?
You can either directly edit your stylesheet, or better, create a new stylesheet and call it something like custom.css, and link to it from your header.
Then you can proceed to add classes to that stylesheet, and as long as it is loaded after bootstrap, the styles should override.
you can also use the built-in bootstrap customizing tool before downloading a package here: http://getbootstrap.com/customize/
or you can use this tool: http://bootstrap-live-customizer.com/
of course these two tools would work if you're looking for something better looking but not necessary specific like a design comp, otherwise, a custom stylesheet as mentioned above is the best way to go.
Related
I'm using CKEditor to allow users to edit HTML documents. I need to allow the users to be able to place any kind of CSS or HTML into their documents. When the user's document CSS has !important rules they change the styling of the CKEditor toolbar.
This can be seen here: https://jsfiddle.net/hqpfjzyr/1/
Click on the "Link Preview" and you'll see the buttons of the toolbar are also red.
This behavior is described by the CKEditor docs here (https://docs.ckeditor.com/ckeditor4/latest/guide/skin_sdk_reset.html) but I can't seem to figure out how to apply it. My skin stylesheet includes a reset.css but it doesn't seem to affect the styling.
The only thing that I can think of is to add more CSS targeting the toolbar and explicitly setting every attribute to the correct value with !important rules but that seems like a daunting task.
What am I missing here?
This behavior is described by the CKEditor docs here (https://docs.ckeditor.com/ckeditor4/latest/guide/skin_sdk_reset.html) but I can't seem to figure out how to apply it. My skin stylesheet includes a reset.css but it doesn't seem to affect the styling.
What is described on CKEditor docs doesn't include case with !important flag, because it can't work like you want to. This flag overwrites other css rules including ones in reset file. If you still want to use !important inside editor you might consider to use classic editor instead of inline. Change CKEDITOR.inline( to CKEDITOR.replace. How does that help? Classic editor is rendered inside iframe, which has separate styles that can't affect anything outside it.
I chose jQuery Mobile over other frameworks for its animation capabilities and dynamic pages support.
However, I'm running into troubles with styling. I'd like to keep the basic page style in order to perform page transitions. But I also need to fully customize the look'n feel of headers, listviews, buttons, searchboxes... Dealing with colors only is not enough. I need to handle dimensions, positions, margins, paddings, and so on.
Therefore I struggle with extra divs and classes added by jQuery Mobile in order to override them with CSS. But it is so time-consuming, and it would be way faster to rewrite css from scratch...
Is there a way to load a minimal jQuery Mobile css file ?
Or should I look towards an other mobile framework ? I need to handle page transitions, ajax calls, Cordova compatibility, and of course a fully customizable html/css...
Methods of markup enhancement prevention:
This can be done in few ways, sometimes you will need to combine them to achieve a desired result.
Method 1:
It can do it by adding this attribute:
data-enhance="false"
to the header, content, footer container.
This also needs to be turned in the app loading phase:
$(document).on("mobileinit", function () {
$.mobile.ignoreContentEnabled=true;
});
Initialize it before jquery-mobile.js is initialized (look at the example below).
More about this can be found here:
http://jquerymobile.com/test/docs/pages/page-scripting.html
Example: http://jsfiddle.net/Gajotres/UZwpj/
To recreate a page again use this:
$('#index').live('pagebeforeshow', function (event) {
$.mobile.ignoreContentEnabled = false;
$(this).attr('data-enhance','true');
$(this).trigger("pagecreate")
});
Method 2:
Second option is to do it manually with this line:
data-role="none"
Example: http://jsfiddle.net/Gajotres/LqDke/
Method 3:
Certain HTML elements can be prevented from markup enhancement:
$(document).bind('mobileinit',function(){
$.mobile.keepNative = "select,input"; /* jQuery Mobile 1.4 and higher */
//$.mobile.page.prototype.options.keepNative = "select, input"; /* jQuery Mobile 1.4 and lower */
});
Example: http://jsfiddle.net/Gajotres/gAGtS/
Again initialize it before jquery-mobile.js is initialized (look at the example below).
Read more about it in my other tutorial: jQuery Mobile: Markup Enhancement of dynamically added content
...or just use the official, theme-less version of the CSS built specifically to allow the design of a custom theme while maintaining all of jQuery Mobile functionality.
You don't have to fight with hacks and overrides all the time and you get a lighter CSS.
Win-win.
edit: Also answered here
To be honest i'm fairly disappointed that jQuery mobile didn't provide us with a relatively style-free starting kit, to work merely with what you have said: Ajax, transitions, cordova...
Overriding the generated css classes is absolute madness, but I have done some skunk work and I managed to reduce the uncompressed css file size from a whooping 233kb to merely 27kb, while keeping the important aspects of the css such as transitions, one-page viewing, etc. This way you start almost as you would start with an empty css file.
Perhaps I will upload the file on Github, if there's any demand for it. I wish to do some more testing to see that I didn't leave anything significant behind.
as of jQuery Mobile 1.4.0, the data-enhanced data attribute was added to most of components. Setting this as true attribute will cause jQuery mobile to ignore style enhancement for the component, so you'll have to style the element by your own.
additional information about this in the jQuery Mobile 1.4.0 release notes here
http://jquerymobile.com/upgrade-guide/1.4/
i m nô expert but i would love to share à weird method with you . Actually, it s very hectic task : what you need is to edit the jqm css line by line by deleting the property values just leave them blanks before ; you have just to look after the desired sections of the CSS file to adjust or delete value
Do not forget to attach your link rel of your own CSS at the head of your HTML page
I hope it will work for you
I was wondering if it's possible to edit Liferay Portal's HTML code, add a couple of <br> to have more space between portlets. Or even add some Javascript to it?
Is this possible? If so, how?
Thanks
You can create your own theme, extending another theme (e.g. classic, _styled, etc.) and adding the 'diff' files, aka the ones you want to extend. In that case, you could extend a default css files, adding a rule like:
#content .portlet-layout .portlet-column-content {margin: 10px;}
Another quicker but less flexible approach is to use the
'Insert custom CSS that will be loaded after the theme.'
feature. This can be found at: Manage Pages > Look & Feel > CSS
The Theme answer has already been given - if you just want to change the appearance (e.g. linebreaks) this is the way to go instead of your original question to change HTML output.
If you literally need to change the HTML code - e.g. add something to or remove something from the page, you should read about Hooks, particularly those that can override jsps. This is exactly what they've been built for.
Is their any jQuery plug-in for auto complete that allows our own styling?
Every library i see comes with a built in cascading style sheet.
Yes and no.
At http://jqueryui.com/download you can select "no theme", but you will still get an .css that you need to use. That css is used in the javascript code to open, close and interact with the autocomplete menu and text.
It is pretty easy to alter the .css to make it look like you want it to. Try some small changes and reload the page to see what happens!
I don't have a perfect script for you, but you can download the Jquery-ui library with the "No Theme" option.
In fact, there is a minimalist default theme, but you can easily override it in order to build your own theme.
jQuery UI Does indeed allows user-based styling. You can simply change the css file as if you'd do from scratch. Heck, just write down the class names and create your own...
I want to include a css file to a jquery plugin.
I can choose one css file from several css files I have.
The plugin shouldn't work without a css file because it will be unordered - the user of this plugin must specify which css file she wants.
I want include the css file in such way I can change tomorrow easily.
What is the best way to do it?
If your plug-in needs to load in, or have the url of, a css file then I'd suggest any of the following:
have the plug-in show an text input element requesting the url of the preferred CSS stylesheet, or
pass a stylesheet as one of the plug-in's arguments, for example: $('#element').plugIn({'stylesheet':'example.com/css/stylesheet1.css'})
I'd probably also specify a set of default styles in the plug-in itself, so that the plug-in has some defaults to work from.
Further to all of the above, though, if your plug-in assigns class, or id, names to elements in your mark-up it's probably worth including a comment in your plug-in outlining the various names that are assigned, and under what circumstances, and simply suggest to the users that they add css for those names in their usual css, or in the head of their document.