I have an old Mediawiki site (1.6.x) and I need to upgrade it to 1.31.x.
I need to add multiple Google fonts
#import url(https://fonts.googleapis.com/css?family=Oswald)
#import url(https://fonts.googleapis.com/css?family=Questrial)
#import url(https://fonts.googleapis.com/css?family=Dancing+Script)
The skin of my upgraded site is based on
https://www.mediawiki.org/wiki/Skin:Example
I tried a few ways, but none of them is working. For example, in skin.json:
"ResourceModules": {
"skins.navajo": {
"class": "ResourceLoaderSkinModule",
"styles": {
"resources/libraries/normalise.css": {
"media": "screen"
},
"resources/screen-common.less": {
"media": "screen"
},
"https://fonts.googleapis.com/css?family=Oswald": {
"media": "screen"
},
I also included the above three fonts in screen-common.less. Not working either.
Got it working by using OutputPage::addStyle in skins code.
$out->addStyle("https://fonts.googleapis.com/css?family=Oswald", "screen");
$out->addStyle("https://fonts.googleapis.com/css?family=Questrial", "screen");
$out->addStyle("https://fonts.googleapis.com/css?family=Dancing+Script", "screen");
Related
I've recently moved from Atom to VSCode, while I managed to customise most of the editor according to my likings, I am still missing a few features that Atom had that I enjoyed.
One of those things is that the "id" attribute in Atom used to be a specific colour, something similar to #99FFFF. I've looked through themes but I couldn't manage to find one that makes the id attribute colour different then the rest of them.
Another feature that I enjoyed was the fact that when a new HTML element was created, eg. a div, it came with the most used, basic attributes by default. I got the hang of using the emmet snippets but it still doesn't work the same, probably because I don't know exactly how to use it properly yet. If there is a cheat sheet for this it would be greatly appreciated, or at least a few examples. Let's say I want to create an input element with a type, name, id and placeholder attribute, how would I go about to do that with emmet snippets?
Here is my settings.json
"editor.fontFamily": "'JetBrains Mono', Consolas, monospace",
"editor.fontLigatures": true,
"editor.letterSpacing": 0.4,
"editor.smoothScrolling": true,
"workbench.iconTheme": "material-icon-theme",
"workbench.colorCustomizations": {
"editor.background": "#232323",
"sideBar.background": "#272727",
"sideBar.foreground": "#C9C9C9",
"editor.foreground": "#C9C9C9",
"statusBar.background": "#272727",
"activityBar.background": "#232323",
"titleBar.activeBackground": "#232323",
},
"window.zoomLevel": 1,
"emmet.triggerExpansionOnTab": true,
"emmet.showSuggestionsAsSnippets": true,
"editor.snippetSuggestions": "top"
You can change the color of the word id or its attribute value using the tokenColorCustomizations object in your settings.com:
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": [
"meta.attribute.id.html entity.other.attribute-name" // the word id
],
"settings": {
"foreground": "#ff0000",
// "fontStyle": "bold"
}
},
{
"scope": [
"meta.attribute.id.html string.quoted.double.html" // the id's vaue
],
"settings": {
"foreground": "#ff0000",
// "fontStyle": "bold"
}
}
]
}
See Editor Syntax Highlighting.
I'm trying to understand how the web-scraping is done in Huginn but I cannot find proper documentation on the options available.
I'd like to extract the price of the Gold oz. from this website for example:
https://www.xe.com/currencyconverter/convert/?Amount=1&From=XAU&To=USD
For which I use a Huginn Website Agent with this code:
{
"expected_update_period_in_days": "2",
"url": "https://www.xe.com/currencyconverter/convert/?Amount=1&From=XAU&To=USD",
"type": "html",
"mode": "on_change",
"extract": {
"price": {
"css": ".converterresult-toAmount",
"value": "."
}
}
}
I got the css selector using SelectorGadget and I've tried multiple values like: ./node(), string(.), normalize-space(.), . , //text() and others, but I cannot find the way to extract the content of the span html tag that contains that value. Here the code of that section of the web:
<span class="converterresult-toAmount">1,730.35</span>
And what I want to extract is: 1,730.35
i got it working on another site.
i used "xpath" for it.
I used a different site because it wouldn't work on the one you posted.
But i hope this still helps someone.
{
"expected_update_period_in_days": "2",
"url": "https://walletinvestor.com/converter/xau/usd/1",
"type": "html",
"mode": "on_change",
"extract": {
"gold_in_dollar_price": {
"xpath": "/html/body/div[4]/div/div[3]/div[1]/h2/strong/span",
"value": "string(.)"
}
}
}
Here is how you get the XPath of any Element/Object on a website:
(i used Yandex Browser based on chrome for this)
Open the Developer Tools in the Browser (or right click and select "Inspect element code")
Select / Click with the Inspector on your Element/Object
You should now see something like:
<span class="converterresult-toAmount">1,730.35</span>
Right click on this and click: "copy" > "Copy XPath"
Im using Huginn since 2 Days so anyone feel free to tell me any faster way if there is any :)
Is there a way how to force Visual Studio Web Essentials to insert single quotes instead of double quotes?
For instance so that div.col-xs-1 TAB produces <div class='col-xs-1'></div> instead of default <div class="col-xs-1"></div>?
I am using Visual Studio 2013 Update 4 with Web Essentials 2013 v. 2.5.3.
Not to be a johnny come lately, but I was having trouble getting this to work in VS code, and so I thought I would post a solution for anyone still having this problem. My solution was to go into settings (ctrl-,) > user settings > extensions > emmet and under preferences click "Edit in settings.json". There, I added this to the user settings:
"emmet.syntaxProfiles": {
"xml": {
"attr_quotes": "single"
},
"html": {
"attr_quotes": "single"
},
"js": {
"attr_quotes": "single",
"self_closing_tag": true
},
"jsx": {
"attr_quotes": "single",
"self_closing_tag": true
}
}
Where each language you can define settings for. This worked for me.
To get single quotes working with JSX you will need to update or create the syntaxProfiles.json in ~/emmet with the syntax profile. If ~/emmet does not exist create it.
The key is the file extension and the value is the name of the profile that extension will use.
So in ~/emmet/syntaxProfiles.json
/* 'js' will map files with .js extension to use the js profile*/
/* 'jsx' will map files with .jsx extension to also use the js profile*/
{
"js": "js",
"jsx": "js"
}
And in ~/emmet/profiles.json
/* create or add the 'js' profile */
{
"html": {
"attr_quotes": "double"
},
"js": {
"attr_quotes": "single",
"self_closing_tag": true
}
}
This should work for most editors but I have only tried in atom.
https://github.com/emmetio/emmet-atom/issues/68
I want to make a Cordova (Phonegap) app that can be used on all devices. Including PC screens. I want the layout to adjust the number and layout of panels (views) acording to some simple instructions. I chose the Dojox.app because of the way the config.json file controls the MVC structure of the app.
A Dojox.app uses controllers to handle size and orientation events. The config.json file contains "controllers", "views" and other elements to define the MVC structure of the app
//Mandatory,listen App.emit events,implement dojox/app/Controller
"controllers": [
//listens to "app-init, app-load"
"dojox/app/controllers/Load",
//listens to "app-transition, app-domNode"
"dojox/app/controllers/Transition",
//listens to "app-initLayout,app-layoutVIew,app-resize"
"dojox/app/controllers/Layout"
],
//Mandatory, one or a set of views view1+view2+view3
"defaultView": "home+rightPane",
//Mandatory, Specify Application child views
"views": {
"home":{
//Mandatory set template for defaultViews
"template": "app/views/home/home.html",
"controller" : "app/views/home/home.js",
"defaultView": "rightPane",
/* when transitioning between tabs, use a flip animation by default */
"defaultTransition": "slide",
/* the views available to this scene */
"views": {
"rightPane":{
//Mandatory set template for defaultViews
"template": "app/views/rightPane/right.html",
"controller" : "app/views/rightPane/right.js",
"defaultView": "general",
/* when transitioning between tabs, use a flip animation by default */
"defaultTransition": "slide",
/* the views available to this scene */
"views": {
"about":{
"template": "app/views/about/about.html",
"controller" : "app/views/about/view.js"
},
"wifi":{
"template": "app/views/wifi/wifi.html",
"controller" : "app/views/wifi/wifi.js"
},
"general":{
"template": "app/views/general/general.html",
"controller" : "app/views/general/general.js"
},
"picture":{
"template": "app/views/picture/picture.html",
"controller" : "app/views/picture/picture.js"
},
"bright":{
"template": "app/views/bright/bright.html",
"controller" : "app/views/bright/bright.js"
}
}
}
}
}
},
...
I want to create a custom controller by changeing the "dojox/app/controllers/Layout" to allow for the addition and subtraction of views depending on the screen sizs.
Dojo already has the experimental 'dojox/mobile/ScreenSizeAware' module but it is limited to two panels and does not work (well I haven't been able to) in a MVC environment.
How to go about defining the views in the config.json file and how to create the controller.
I'll give it some serious thought over the next few days. If you have any suggestions please jot them down here.
You should take a look at the dojox/app/tests/mediaQuery3ColumnApp, it will show 1, 2 or 3 columns depending upon the screen size. It includes a custom layout controller which uses css to handle the layout, and a custom navigation controller to try to handle which views to show when transitioning. It is not perfect, there are some issues with the navigation between views when the displayed columns has changed, but it should get you started.
You can run it here:
http://archive.dojotoolkit.org/nightly/checkout/dojox/app/tests/mediaQuery3ColumnApp/
And you can see the code here:
https://github.com/dmachi/dojox_application/tree/master/tests/mediaQuery3ColumnApp
Regards,
Ed
I'm trying to build a Chrome Extension that appears as an icon in the address bar which, when clicked, sets contenteditable=true on all elements on the page, and then when clicked again sets them back to contenteditable=false.
However, I'm falling at the first hurdle... The icon isn't even showing up in the address bar.
Here's my manifest file:
{
"name": "Caret",
"version": "1.0",
"description": "Allows you to edit the content on any webpage",
"page_action": {
"default_icon": "icon.png"
},
"content_scripts": [
{
"matches": ["http://*/*"],
"js": ["jquery.js", "caret.js"]
}
],
"permissions" : [
"tabs"
]
}
and here's the caret.js script:
chrome.browserAction.onClicked.addListener(function(Tab) {
$("*").attr("contenteditable",true);
});
This is my first attempt at an extension, so it's quite probably a newbie mistake, but I'd really appreciate any help or advice!
Ok, turns out I needed to use chrome.pageAction.show(tab.id);, which meant I needed to get the ID of the current tab, which is achieved with:
chrome.tabs.getSelected(null, function(tab) {
chrome.pageAction.show(tab.id);
});
BUT it turns out you can't use chrome.tabs within a content script, so I had to switch to using a background page instead.
This is no longer possible as of last release.
Chrome extension page action appearing outside of address bar
https://groups.google.com/a/chromium.org/forum/#!searchin/chromium-extensions/upcoming/chromium-extensions/7As9MKhav5E/dNiZDoSCCQAJ
My answer to this other question gives the solution. FYI, the second code issue noted in that answer is also relevant to your code: You want the icon to appear for all pages, so you should use browser_action, not page_action. Either will work, but using a page action on every page goes against convention and makes for a less consistent end-user experience.
I had a similar problem, here are the steps I followed to solve it:
I altered my manifest.json to include the following:
{
"background": {
"scripts": ["background.js"],
"persistent":false
},
"page_action": {
"default_icon": "logo.png",
"default_title": "onhover title",
"default_popup": "popup.html"
}
}
Then I inserted the following code into my background script:
// When the extension is installed or upgraded ...
chrome.runtime.onInstalled.addListener(function() {
// Replace all rules ...
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
// With a new rule ...
chrome.declarativeContent.onPageChanged.addRules([
{
// That fires when on website and has class
conditions: [
new chrome.declarativeContent.PageStateMatcher({
pageUrl: { hostContains: 'myurl', schemes: ['https', 'http'] },
css: [".cssClass"]
})
],
// And shows the extension's page action.
actions: [ new chrome.declarativeContent.ShowPageAction() ]
}
]);
});
});
The documentation for this can be found here... https://developer.chrome.com/extensions/declarativeContent
I did this:
chrome.tabs.onUpdated.addListener(function(id, info, tab){
if (tab.url.toLowerCase().indexOf("contratado.me") > -1){
chrome.pageAction.show(tab.id);
}
});