I'm trying to learn how to create and update a basic website using R-Markdown following this guide: https://www.andreashandel.com/posts/2021-01-11-simple-github-website/index.html#starter-files
By now I've been able to create the HTML documents that I'd need and I've added the connexions between HTML in the navbar (.yml) of my website. In the case of some links, like GitHub or LinkedIn I've been able to add their icons this way:
- icon: fa-github fa-lg
ref: https://github.com/username
The problem is that for some webs there's no fa-lg icon available, so I've downloaded the icon as .png and .svg to add them to the navbar, but it creates an error.
This is the code line I've tried, but I can't get to do it:
- icon: 
href: https://orcid.org/
##OR
- image: 
href: https://orcid.org/
AND whatching other examples from How to add svg icon to a button with a text
- icon: "https://upload.wikimedia.org/wikipedia/commons/0/06/ORCID_iD.svg"
href: https://orcid.org/
I've recently started to learn R, so this may be a simple thing, but if someone can help me I'd be so grateful.
UPDATE
Following this question's recommendations: How to add a browser tab icon (favicon) for a website?
I've converted my .svg archive to a 32x32 pixels .ico archive, but I still can't insert it into my navbar.
Related
Using K12SP and its MVC model, I would like adding embedded YouTube videos in my views. I saw that in the CKEditor, there is a widget for doing so and it adds corresponding customized HTMl tags such as :
{^widget|(name)YouTubeVideo|(VideoURL)https%3a%2f%2fwww.youtube.com%2fwatch%3fv%3diwqgcxc0r5gfTzgw%26list%3dPLKeH-azh54PWS4kozV421JGVhCd5yw9Ia|(Width)425|(Height)355|(AutoPlay)False|(widget_displayname)YouTube+video^}
However, in my view, I now need to process theis syntax to actually embed the video as for the time being, it is just showing the raw code. How can I do this? I searched for some tutorial but didn't find any.
Is there a place where front-end code for these default widgets of the rich editor is made available?
Thank you for your help
Sylvain
Why don't you use regular embed markup? E.g.
<iframe width="560" height="315" src="https://www.youtube.com/embed/GkagBXZQvOI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
HTML is the same for all the videos, you'll need to inject video URL into it.
The inline widgets are not supported in the MVC approach. You still have the toolbar buttons in the CKEditor on the Content tab - but this is because you can also have a portal engine site in the same instance. So, this means, if you want to use the inline widgets, you will need to parse the text value when getting it from Kentico, extract the Youtube URL and basically replace the widget code with the HTML markup mentioned by Roman. It may be just easier to hide the toolbar buttons for widgets for your editors and let them just to insert the URL directly.
I have an SVG file containing a number of xlinks that navigate to a different page. For example:
<a xlink:href="us/ak">...</a>
The SVG is a US map, and I'd be happy to provide it, but it's too big to include here.
When I try to use this SVG in an AMP page, the xlinks don't work. I see in the AMP spec that xlinks in an SVG are required to have a target URI starting with "#", so I think that's why my xlink isn't working. It behaves the same whether I use an amp-img or img tag.
It works fine if I put it in an img tag on a non-AMP page.
Is there a way to get my links to go to a new page, and not just to a #-link on the same page?
The color change on hover also stops working when I put the SVG on an AMP page, but I'm tackling one problem at a time.
If you just want to link to another page, <a href="..."> should work...
I have a page with:
title
image gallery
with code for title:
<h2 class="wsite-content-title" style="text-align:left;"><font color="#515151" size="5"> External / Internal</font></h2>
and the code for image gallery.
I want to make a wrapper div for these both elements (title and image gallery, which are h2 and a div) with HTML. Is there a way to do that?
I found the code using Inspect in Chrome... but to change the code, I need to know where it is in the Weebly editor. I can't find it.
Note: the page is a "Standard Page" (as opposed to "Blog Page")
I defined CSS transition rules in my svg. It's something like:
#mark #bg {
transition: fill 200ms;
fill: #245575;
}
#mark:hover #bg {
fill: #ff5c26;
}
When I drag it into browser's blank page and test it, the transition works fine. But if I embed the svg into my website using <img src="images/mark.svg" alt="">, the transition doesn't work.
Did I miss something?
Images either via <img> tags of via the CSS background-image image property cannot be interactive and have other restrictions in order to maintain user's privacy and security.
If you ask yourself "could I do this if the image was a .png or a .gif?" then you'll be on the right lines. Browsers have deliberately chosen to keep to the same mental model for SVG files so that the capability of images is easy to understand.
If you want transitions to work you'll need to use an <object> or <iframe> tag or embed the SVG inline in the html document.
All,
Simple question: I want to include an image "logo.png" as the background for my-app. Where should I put the file and how should I refer to it in the CSS file which is in the resources folder along with the main_page.js?
Here is the rest of the story:
I have a CSS class called doc-background. I know this class works because when I set the color of the background in a CSS file like so:
.doc-background { background-color: red} it has the desired effect and Firebug shows me that the class doc-background is being used.
However, when I add a line like
.doc-background { background-image: url('logo.png'); }, there is no effect. Firebug shows that the class doc-background is not applied. And when I modify the style in Firebug to add the line about the background-image it says "Failed to load URL" in the tooltip.
Can someone please point me to a guide on how to work with resources and images and where to put them if I want to use CSS? I have successfully used them using the image-view and coding them into the HTML.
Here is what I have already tried:
Using static-url instead
Moving the image file to images folder under resources
Referred to the image by using all variations on the path - including resources/images only including images, not including either...
Lot of Googling for the answer, Reading create your own app tutorials etc.
If you have an example app that uses colors and images from a CSS that will be the ultimate! But a location and some help with the background-image CSS property will get me started!
Thanks much,
Vis
Place your image somewhere relative to your css:
resources/style.css
resources/images/logo.png
Then use static_url to refer to the image:
background-image: static_url('images/logo.png');