Lord icon not rendering in browser - html

I am trying to use lordicon in my website, I added it successfully as gif and png. but i need to make it animate on hover only, I used its editor and download it as JSON and added this code in my html page:
<lord-icon src="/627-brezel-outline.json" animation="hover"></lord-icon>
but nothing show in the browser. Can you help me please.

Did you include the project files of the GitHub repository? There are some implementation examples in there. An easier way is just to embed the HTML code with the settings you want from their website! Is the easiest way in fact!
Just select an icon, choose your settings and in the download window, instead of downloading a file, select "EMBED HTML".

Related

Can I embed an A-Frame scene into Squarespace?

I want to embed this a-frame project to my portfolio on Squarespace (most basic plan) like what a-frame shows in their embedded page but I'm not even sure if it's possible? I'm also super new to coding so let me know if I should provide more info. If people can also explain things in baby language that would be awesome thanks
embedding remote a-scene?
if you want to link your existing project to a different page then... I don't think it's possible. Look:
the documentation page uses a real a-scene there, with a-boxes and stuff.
It may be possible via iframes but I don't know if it works. There is something like this in the documentation:
For now, if the I-Frame is not on the same origin as the page, the WebVR polyfill for mobile won’t work and there won’t be any tracked rotation of the device. - source
embedded
embedded is used to create a smaller window of a-scene inside a standard HTML page. As far as I know, it just sets or changes some CSS values. Unfortunately, there is nothing like a magical src attribute that would allow you to fetch a different scene from another page
If you can upload a static HTML file onto Squarespace then by all means you can embed it there. But remember that
Only one <a-scene> can exist on a page - same source
You would need to copy your entire project a-scene and paste it into your Squarespace page. Add A-Frame script in header or link a js file and all standard stuff.
link
this may not be what you are looking for but you could potentially create an embeded a-frame scene that would have a link inisde that would "teleport" you (change location) to your project. link - A-Frame

How can I upload / view HTML5 animations in confluence

Currently we are posting .swf animation (interactive) on our confluence. We just upload them as attachement to a pag and use {multimedia:name=animation.swf } to display them. But we want to make it usable for apple owners and are switching to making these interactive animations in HTML5 in stead of .swf.
But generating the same animation in HTML5 in stead of .swf gives use in stead of 1 swf file a couple of directories with css, javascript, images and html files.
How can I upload these to confluence and display the animation on a page in confluence?
It might matter which version of confluence you're working on.
To use the javascript and css you need, you can go to edit -> Administration -> Edit Layout and edit the space-wide css and js in the appropriate tabs.
As for html, you can use the {html} tags to include html code on your confluence pages like this:
{html}<p>Insert your html here</p>{html}
Do you know which version of confluence you have?
You might also want to look into the gliffy add-on for confluence. I believe it has the capability to accomplish what you want.
http://www.gliffy.com/products/confluence-plugin/

just wanna highlight some texts when use a browser to view local html

A lot of tutorials which can be downloaded have the file type of .chm, .pdf, .html, etc. I downloaded a Java SE tutorial of Java SE in HTML format. When I use chrome to view it and everything is good. But I just wonder how could I just directly highlight some useful information (e.g. text) when I use chrome to view it? The html files are local, I know that I could use some software to edit it, like using HTML tag <font color:> etc.
But I just want to highlight it directly in the browser like editing it in word. Is there any suggestion? Dose chrome support such kind of plugin? If you still don't understand what i mean, please refer to "clip to evernote", which is a plugin of chrome and can cut the pages and upload them to the evernote server. when I use evernote client to read them, I can directly highlight some words which is useful to me.
It's much more a SuperUser question, but ... There is a lot of plugins for highlighting web pages out there. You could try Yawas or Simple Highlighter
edit: ok, I think I understood better your problem ... Yawas, Simple Highlighter, as well as most other highlighters, don't hightlight on local pages.
I'm not sure there is such an highlighter available for Chrome, then. What I would suggest is to try opening you documentations with Amaya instead of Chrome. It's both the Browser and the Editor from the W3C; and since it has both functionalities, you probably will be able to do what you want on your local pages.
You can save it to your computer by clicking "Open a new tab containing a list of highlights and notes on just this page". Then you can save only the html contents to your computer with the name as you like. Don't try to use ALT to save the list of note because you will never see the contents what you want to save.

Is it possible to save changes in Firebug locally?

What I'm trying to do is to save the changes I make to CSS and HTML on different sites with Firebug.
Just to be clear, I don't expect Firebug to upload the changes to the server via FTP or anything. I just want to save the changes locally, so only I will be able to see them.
For example I've seen a few Firefox/Chrome extensions that add a download button under every video on Youtube, so I know it's possible to do that somehow.
If you have a different way to achieve what I'm trying to do, I'll be glad to hear about it.
(It doesn't have to be with Firebug.)
Thanks in advance!
If you don't mind using Web Developer Toolbar it's easy to save changes made to the DOM (and CSS).
When you install the toolbar, you'll get a "View Source" menu, click on that and choose "View generated source". Then just copy and paste that into a .html file.
You did not say if you alter your HTML or CSS, if CSS, FireFile is a very good addon for this.
Edit, with some Googling, i found FireDiff, which states that it can export changes made in Firebug, i have not tested it bit it's worth checking out.
You could try using Greasemonkey.
It has support for adding custom scripts that are run whenever you load a page (linked to which pages it should load on) and that can make changes to the page dynamically.
https://addons.mozilla.org/en-US/firefox/addon/greasemonkey/
The http://chrispederick.com/work/web-developer/ web developer toolbar will let you add a user style sheet to a site which should achieve your goals.
This may or may not be exactly what you're asking for, but you can download the extension FireDiff in order to save changes made with FireBug. I made a little tutorial on how to do it here: https://www.youtube.com/watch?v=m4OmZLX2zd4
I have a somewhat simlar use-case that I solved differently. I'm not sure if it is what you are looking for or not. I'll describe the behavior and if that is helpful I'll explain exactly how I implemented it.
I changed the code that execute when you click "Run" (or Ctrl+Enter) to check to see if the first line of the code is a hard-coded string //LoadFromFile:<file path>. If it is, and the file exists then I pull the file off of the local file system and run it instead of executing the code in the console window. This way I can use an external text editor to write code.

Getting plain HTML/CSS versions of Wordpress themes, no PHP?

where can I find elegant looking Wordpress (or not Wordpress, but similar style) themes in plain HTML/CSS format, without all the php?
thanks.
View the page source of the theme preview page in your browser. Save the code.
Easy for one page. Difficult for many pages.
You need to see in browser each page you want to get the HTML/CSS.
Firefox Menu > View > View Source
IE Menu > View > Source
A good way not only to save but to study the design and HTML/CSS structure,
use FireBug, Firefox addon. I am very sure it save lots of time and you will love it.
I'm not sure what you mean in your question.
If you mean, "Are there themes for Wordpress that don't require php?" then the answer is no. However, you don't actually need to know php in order to use these themes. You can just load them and then alter only the CSS.
If you mean "How can I adapt a Wordpress theme for a non-Wordpress site?" then you'll have to do this yourself, manually. First make sure you are using Firefox and install Firebug. Go to a site that has the theme that you want and then open up Firebug.
Under the HTML tab you'll be able to see the static HTML of the page, after it has been processed by the backend PHP. Just click "Edit" and then copy and paste everything in there into a new file. Then click the "CSS" tab and go through each style sheet, again clicking on Edit in order to copy and paste everything into new files, 1 for each sheet. Then stick all of the files into a folder and edit the header of the html file to make sure the external stylesheet links are pointing to the stylesheets you have created. Open it up in a browser and it should look just as you want it to.