#myThemeBackground = #ddd;
div#box1 { background: #myThemeBackground; }
I'm using LESS in order to use variables for my css. It works fine, but I'm wondering if there's a way for me to change the "myThemeBackground" dynamically at runtime via javascript or something.
So say if the user chooses a custom color for the background I'd like the entire skin to change.
Note: this is for dynamically theming/skinning an application where the user chooses the color for the background for example and then the whole app changes (without a page refresh)
You can modify Less variables on the fly using the modifyVars method:
less.modifyVars({ myThemeBackground : '#000' });
I usually grab the CSS generated by LESS and include that in a file to optimize the web page loading speed. In fact, I use LESS.app for Mac to generate my CSS.
To my knowledge, part of the solution would involve including less.js file to your page. This in turn means that generating the style of the page would be slow and the caching might cause you some trouble too...
I would humbly suggest generating multiple CSS stylesheets with LESS and include these files when needed with JavaScript.
The only solution I can think of is to change the text you render with less.js, with:
less.refreshStyles()
Change the text in the file or in the less snippet of styling.
Read more about it here:
Load less.js rules dynamically
Related
Given that Slate documents by default do not appear when calling window.print() (or using the print/save as pdf option in chrome), and also that the optimal styling may differ when printed than when displayed in a web page, what are some good ways to create a "print version" of a Slate dashboard?
I'm also thinking of things like hiding sliders and search fields, adding classification watermarks, adjusting logo placement etc.
Slate is optimized for rapid application development. The underlying framework imposes few limitations on the configurability of layout our styling. As a result, Slate is unable to generically render all applications in a manner suitable for print media or export. Application developers will need to invest time on an app-by-app basis to support printing.
The first, best option is to consider why there is a requirement or request to print your app. Do your users simply need a way to preserve the view they've created and reference it later or use it during a presentation? In this case, consider using (or highlighting to your users to use) the built-in Get Shareable Link functionality. In View mode it's under the Action menu - in edit mode, you can use the Slate.saveView action and the Slate.viewSaved event to create these programmatically, then the Slate.loadView action to load a previously saved view.
This will create a unique url with an id that will, whenever the link is loaded, return all the page widgets to the state they were in when the link was generated. This means, for example, a set of input widgets will default to the inputs configured by the user and feed into the queries, etc.
In combination with the per-user storage cache, this makes it possible to build workflows to save a list of preview "views" for a given user and reload them in the future.
If you really must print or export, then you'll need to define additional media CSS styles to help your application render appropriately.
To start, you'll need to add at least this to the Global Styles:
#media print {
#page {
size: A4;
}
html, body {
height: 600mm !important;
}
}
You can read more about media CSS for printing in various articles like this or this.
Printing “responsive” applications or any application with complex styling or layout will be very difficult. In these cases, consider creating a “Print View” as a separate application that receives necessary inputs via URL parameters and generates a simplified view optimized for printing. This will increase the development cost and maintenance burden, but will result in satisfactory behavior.
If after applying the above Global Styles, the printout is still getting cut off, try using the "Print using system dialog" option in Chrome, which (at least on a Mac) will give the option to specify a Scale (screenshot). By scaling down from 100% you should be able to get the full Slate view to fit on the page.
i created a site, And added pages to my site, since page size exceeds i need to create pagination in html i have created this method
123
in this way i created
Problem is when i add new page i need to replace all code again like this
1234
ever time when i add new page i need to replace all code is ther a way to do this without PHP
Can sombody help me any idea to do this in html
Do not re-invent the wheel. Use datatables, they provide sorting, pagination (client side and server side), export and a number of additional features.
http://datatables.net/
Include the files and just add this.
$(document).ready(function() {
$('#example').dataTable();
} );
This is a very basic and good example, you should go for it.
http://datatables.net/examples/data_sources/dom.html
This cannot be done purely in HTML. You must use something like PHP, or you could use Javascript.
You can make just one HTML file called "Pagination.html" include all your links there and then include that Pagination on every page using one of the following methods.
You can use Javascript: javascript
Or you can use html5: html5
Or there are also, others solutions to solve your problem like this: other
You better use some Javascript oriented solution, html5 support for including files still very poor.
unfortunately, this won't be possible without using some other technology that is not HTML. You can dynamically generate pages using javascript (JS), PHP or other technology, but not just raw HTML.
You can name your pages something like:
page_1.html
page_2.html
and then whichever editor you are using probably has a search & replace function, so you could use that to speed up things. I hope this helps.
To offer a mobile version of an existing mediawiki installation I was looking for a practicable way to remove all images from output. The most preferred solution would be one where the generated html would no longer contain the image-tags.
As I was not able to figure out a clean solution I moved the images to a different server and disabled $wgForeignFileRepos and $wgAllowExternalImages in this version.
Unfortunately - while the images are not shown - there appears a placeholder box containing the image's name and a (now not functioning) link to it.
Do you know about a way to get rid of the images without using css/js or a way to bring my approach to completion?
You could use this javascript mobile browswer detection and then on detection it runs the following javascript code.
var imagesremove = document.getElementsByTag('img')
imagesremove.parentNode.removeChild(imagesremove);
There are probably better solutions, but you can override the ImageBeforeProduceHTML hook to make images generate empty output:
$wgHooks['ImageBeforeProduceHTML'][] = function( &$skin, &$title, &$file, &$frameParams, &$handlerParams, &$time, &$res ) {
$res = '';
return false;
}
...or something more fancy, such as returning a link to the image instead of an actual <img> tag.
Depending on your wiki's caching settings, you might have to purge the page cache afterwards, e.g. by setting $wgCacheEpoch.
I am creating a mobile simulator that mocks the appearance and functionality of an iPhone (and other devices later) in a web browser, using 100% javascript, HTML5, and CSS, with the simulator fully functional with only client side code.
While trying to accomplish this task with as little modification as necessary to the original app projects themselves to be hosted in the simulator, I am injecting the <script> and <link> tags into the head of the page, then loading the html into a <div> screen.
The problem is that when I load in a new css file, it (obviously) overrides the one I'm using to style the page, and therefor some elements are affected (ex the background changes color).
My question is: Is there any way to limit the "scope" of an external .css file to apply only to objects within the <div> screen? Would it make any difference if instead of me injecting it into the <head> of the page, I inject it into a <style> element in the <div> screen?
UPDATE Support for this feature has been dropped. Please seek other options
Original Post:
You may want to look at scoped styles; see http://css-tricks.com/saving-the-day-with-scoped-css/.
The basic idea is
<div>
<style scoped>
#import "scoped.css";
</style>
</div>
However, you are on the bleeding edge here in terms of browser support. See http://caniuse.com/style-scoped.
One alternative would be to use an iframe.
Simply wrap all you css code inside the selector for parent element, say it's a div with id of foo you'd do the following:
div#foo{
//All your css
}
And convert it as less to css, it will prepend the right selectors. Note that you'll need to take care manually of things like #media queries and so on.
While writing this, the <style scoped> is deprecated by the Chrome team.
As a result I experimented with some approaches and released https://github.com/thgreasi/jquery.scopeLinkTags .
Note: you should only have to use this approach in case that you can't control the imported CSS file. If you can use SASS/LESS/anything to pre-process your CSS, you should prefer that.
A simple way is adding pre-class before all selector in css file.
I find a grunt script can do this:
https://github.com/ericf/grunt-css-selectors
This is how i do it if not using preprocessor in my project. Search for a online preprocessor then load copy paste the css under the parent class/id
.parent{
// copy paste here
}
Example
Find a preprocessor for example https://beautifytools.com/scss-compiler.php works very well for me (I have no affiliation with the given link)
if you are using from a URL add the URL using the load URL button.
Wrap the css code under parent and hit compile then minify.
I had a similar issue and found that Shadow DOM can solve it easily.
let output = d.querySelector('#output')
let shadow = output.attachShadow({
mode: 'closed'
});
shadow.innerHTML = HTMLcontent // HTML content and style injected
Source
I am trying to create a file upload field that has a little bit of style to it, but I seem to be having problems finding examples of this. I know part of the reason is that the field itself varies from browser to browser.
Any ideas how to do this? Or is there a way to do this without using a file element of a form that can be styled?
If what you mean is the text field for the file names, you can use the input[type=file] selector in the css files. For example :
input[type=file] { background-color: red; }
If what you mean is the file selection dialog box, I think it's browser/OS dependent and there's little (if any) you can do about it.
I have come up on this problem before. Unfortunately, file uploads are nearly impossible to style consistently across browsers. As of CSS 2, I think, the W3C standard specifically leaves behavior undefined--think of how many ways it would need to be implemented on different platforms. Firefox, for example, generates anonymous button and input elements inside the file upload element which only inherit some of the properties that you set on the upload element itself.
You can get some to work using, for example, Furuno's method, but know that the behavior will be spotty and differ widely across platforms/browsers.
Here's some links I found:
QuirksMode Article
One Extra Pixel Article (look for the file input styling section)
This would fit for your requirement.
If you are using jQuery, have a look at this plugin - https://github.com/ajaxray/bootstrap-file-field
This tiny plugin will display the file input field as a bootstrap button (with configurable classes) and will show selected file names (or selection errors) beautifully.
Additionally you can set various restrictions using simple data-attributes or JS settings.
e,g, data-file-types="image/jpeg,image/png" will restrict selecting file types except jpg and png images.