modernizr - i do not see ANY classes - modernizr

i have a test website here with SVG images and want to create fallbacks with "modernizr". it loads the script but adds no classes to "html" like here:
in my case there is no class. here is my test website:
http://herrfischerhamburg.de/_jsfiddle/mnizr/
as you can see there's only "".
am i missing something?

got it - under the "extra" tab on the modernizr build site i had to tick "add css classes" ...

Related

TYPO3 FluidTYPO3: Missed Flux Icons for Content Elements at TYPO3 Backend

Hi I'm using TYPO3 CMS 6.2.14 with FluidTYPO3 (flux 7.2.2, fluidcontent 4.3.2and vhs 2.3.3). Since the last few TYPO3 installations my Icons for Fluidcontent-Elements are missing in Backend?! I've didn't change the path or sth. else.
Here are my tries, nothing works:
<flux:form id="fce6" icon="../typo3conf/ext/mytemplates/Resources/Public/Icons/Content/Icon.gif" wizardTab="FCE" options="{Fluidcontent: {sorting: 106}}">
...
<flux:form id="fce6" options="{Fluidcontent: {sorting: 105}, group: 'FCE', icon: '{f:uri.resource(path: \'Icons/Content/Icon.gif\')}'}">
...
<flux:form id="fce6" options="{icon: '{f:uri.resource(path: \'Icons/Content/Icon.gif\')}'}">
...
<flux:form wizardTab="Bootstrap" id="tabs" icon="{v:extension.path.resources(path: 'Icons/icon-tabs.gif')}">
If I inspect the missing Icons in Backend with a developer tool (browser), the Icon is found, so I don't understand it.
../typo3conf/ext/mytemplates/Resources/Public/Icons/content/Icon.gif
Some sceenshots
-
The funny thing is, that the Icon is still there, if you're inside the Fluidcontent Element (FCE), see last screenshot (red bar icon):
EDIT :: I was looking in one of my older TYPO3-Projects and the Icons are still there: flux 7.2.1, fluidcontent 4.2.4 and TYPO3 6.2.15
Code:
<flux:form id="tabsvertical" options="{Fluidcontent: {sorting: 305}, group: 'FCE', icon: '{f:uri.resource(path: \'Icons/Content/Example.gif\')}'}">
See screenshot:
Flux supports convention based icons since v.7.2.0.
It means, that for each your template you can have corresponding icon in Icons folder, which will be shown automatically.
Example:
Template file typo3conf\ext\my_ext\Resources\Private\Templates\Content\Grid-1.html should have an icon typo3conf\ext\my_ext\Resources\Public\Icons\Content\Grid-1.png.
See more in changelog.
I spent some hours with TYPO3 6.2.15 and 7.5 to get icons running. The convention based icons did the job for 6.2.15. Rather than using a f:uri.resource(), which will not work. The flux form configuration is somehow rendered in a special container. E.g. for the "new content elements page". Try to put a var_dump() into the view helper. Best combined with an exit(). The container does not seem to be aware of the extension. That is for 6.2.15 and the current versions of fluid/flux. For 7.5 the 7.2.3 does not produce any reasonable results. I only get /typo3/ as icon path. But the 7.2.4 is expected to fix it.
I use this Options Fields for Backend Icons and Grouping.
<flux:form.option.group value="Content" />
<flux:form.option.icon value="EXT:ext_name/Resources/Public/Icons/Content/HeroImage.svg" />
I also added the <flux:form.option name="settings.options"> as wrapper around the group and icon Definitions
I'm not using FluidContent but Flux Version 8.2 and TYPO3 8.7.15

How to view css stylesheet injected by a Google Chrome extension using dev tools?

I'm injecting a css file from my chrome extension using the manifest.json (full source):
"content_scripts": [
{
"matches": [
"http://*/*"
],
"css":["src/inject/gfi_extension.css"],
"js": [/*...*/]
}
]
In Chrome Dev Tools, if I inspect an element which is affected by the injected css, the rules are visible, but in the upper right where the source filename would normally be, it just says "injected stylesheet." I'd like to view ALL of the rules being injected, even those that affect elements which do not currently exist in the DOM.
I would have expected the .css to appear in "sources" under "content scripts" with the .js files, but they aren't there.
Is there a way to view the .css file through dev tools? If not, please explain why there isn't.
Edit: I've just found that this question also appears as a "sub-question" of this one, however no one over there has attempted to answer it, even though there is an accepted answer.
Looks like there's no way to do this if you inject the CSS via content_scripts. I filed a bug here: https://crbug.com/800070
When the extension is in your control, Paul Irish suggests using this code pattern in order to make your styles inspectable: https://github.com/lateral/chrome-extension-blogpost/compare/master...paulirish:master
For other people's extensions, as far as I can tell there's no way to view the source code of the injected stylesheets in DevTools, if you go the content_scripts route.
Go to Sources and then Content Scripts. You have to go to the extension name and then you'll see the injected files.
Use the Chrome App and Extensions Developer Tool on an extension which injects CSS, such as Bootstrap Grid Overlay:
the injected URL can be used on the console tab on the app to get the runtime URL using the getURL method:
chrome.runtime.getURL("src/grid.css")
and produce the source:
References
Content Scripts - Google Chrome
chrome.runtime - Google Chrome

Joomla TinyMCE Editor removes <link> from html

My code is this:
When i toggle the editor I have:
Where have I got it wrong?
From your title, I am assuming any <link> tag is being stripped.
Link tags are only valid in the head of the page, and TinyMCE is set to use the HTML5 specification by default when it tidies code, so presumably it is removing them due to their invalidity in the body of the page.
You could probably configure the code of TinyMCE to do what you want (see: http://www.tinymce.com/wiki.php/Configuration:valid_children), but as that does not seem to be possible via Joomla's plug-in parameters, it would mean overriding a core file, which may then cause problems should you patch the site.
One alternative would be to turn off Tiny MCE, and add the code via the blank editor.
Ideally, it sounds like you should be creating a bespoke module in which the link element can go in the head of the page as it should be.

joomla autogenerated css classes

i want to make a new joomla template, i dropped into that but i am confused now.
i want to know where is the joomla autogenerated css class list.
for example i insert a module in template and what is the css class for example for menu title or the css class for search input box or what is the default css class for readmore link in main.
i found a little in joomla doc but i want the whole list
I fail to understand how you are prepared to make a Joomla template which is far more complex than a plain CSS template, yet you are unable to find the necessary CSS files. You said you wanted to make a new template therefore shouldn't you know where you have put the CSS file?
You are in dire need of Firebug for starters. Have a look at all it's features. It will help you to find CSS files and the specific line you need to edit.
I assume you are editing someone elses template in which case this is the sort of location you will be looking for.
templates/you_template/css/file.css
It varies with different template so I suggest you download Firebug as I suggested above.

How can I beautify JavaScript and CSS in Firefox / Firebug?

Is there a way to beautify JavaScript and CSS in Firebug?
I'd like to be able to view formatted JavaScript code instead of the compressed version :).
There is now a plugin that intercepts JavaScript downloads and deminifies it at that point.
Unfortunately, the way it hooks into Firefox means that it applies to all JavaScript downloads and just not specific ones and the JavaScript files have to be served with an appropriate MIME type.
https://addons.mozilla.org/en-US/firefox/addon/247565/
CSS is already beautified in Firebug, as clearly seen by comparing the CSS tab or CSS pane with the raw source.
JavaScript, alas, is not. The best you can do, for now, is to paste the code into something like http://jsbeautifier.org/ .
However, if you write a Firebug extension that does this, you will have all of our gratitude. ;-)
Firefox Developer Tools has:
"Prettify Source" button: braces {} icon on bottom left
"Auto Prettify Minified Sources" setting: turns Prettify Source on by default.
To enable it: go to the engine icon on top right of the Debugger tab, not the global settings engine.
Tested on Firefox 42.

Resources