Favicons for URLs and external Links!?
Favicons for URLs and external Links!?
Alexander@5e3cf8af Thursday 31st May 2018, 20:37:08Hi Fred and Community,
I have looked at many forums and wish me favicons for external links in Flatboard Forum. Would such a plugin be conceivable for the upcoming flatboard version?
So it would be something for the eye again and you can thereby better perceive external links. Favicons are likely to have almost all websites today.
Thank you in advance.
I have looked at many forums and wish me favicons for external links in Flatboard Forum. Would such a plugin be conceivable for the upcoming flatboard version?
So it would be something for the eye again and you can thereby better perceive external links. Favicons are likely to have almost all websites today.
Thank you in advance.
Last modified by Alexander@5e3cf8af on Saturday 2nd June 2018, 20:03:00
Replies 8
Not a plugin, modify CSS.
Flatboard already uses font awesome, so add the following to CSS:
Flatboard already uses font awesome, so add the following to CSS:
a[href^="http"]:before {
content: "\F08E"; /* this is your text. */
font-family: FontAwesome;
left:-5px;
position:absolute;
top:0;
}
Last modified by 53235657 on Friday 1st June 2018, 09:03:00
I have now added CSS in the main.css and spectre.css to your code. Unfortunately I will not see the actual favicons of the web pages in the forum and only a favicon.
How can I make it better? Of course, browser cache and flatboard cache are deleted several times.
Last modified by AlexanderLiebrecht@5e3cf8af on Friday 1st June 2018, 09:02:00
My mistake, I misread. Remove the CSS I instructed earlier.
Try the following:
Add the following to the header:
This should should the favicons in links, like below:
Google
Note: If you want it on the left side of the link use this:
Try the following:
Add the following to the header:
<script>
$("a[href^='http']").each(function () {
if (this.parentNode.parentNode.className == "media-body" ||
this.parentNode.parentNode.parentNode.parentNode.className == "media-body")
{
$(this).css({
background: "url(http://www.google.com/s2/favicons?domain=" + this.hostname + ") right center no-repeat","padding-right": "20px"
});
}
});
</script>
This should should the favicons in links, like below:
Note: If you want it on the left side of the link use this:
$(this).css({
background: "url(http://www.google.com/s2/favicons?domain=" + this.hostname + ") left center no-repeat","padding-left": "20px"
});
}
Last modified by hmmy on Friday 1st June 2018, 12:05:00
Unfortunately, it does not seem to work for me and even with this solution found in google it is not. Hm .. what am I doing wrong?
Did you already test it successfully or can you show me examples in the Flatboard Forum? Thank you!
$("a[href^='http']").each(function() {
$(this).css({
background: "url(http://g.etfv.co/" + this.href + ") left center no-repeat",
"padding-left": "40px"
});
});
Hi,
Code by hmmy work well, but change de class name for spectre ;)
Open your footer.tpl.php, search:
And add before:
Demo here...
Code by hmmy work well, but change de class name for spectre ;)
Open your footer.tpl.php, search:
<?php echo Plugin::hook('footerJS', $out['self'])?>
And add before:
<script>
$(".flatb-content a[href^='http']").each(function () {
$(this).css({
background: "url(http://www.google.com/s2/favicons?domain=" + this.hostname + ") left center no-repeat", "padding-left": "18px"
});
});
</script>
Demo here...
Last modified by Fred on Saturday 2nd June 2018, 10:20:00
- Before ask a question, read the documentation.
- 🎉 Featured as #1 product of the day on Product Hunt
- Please like in alternativeto.net 👍🏻
- ╰☆╮Flatboard╰☆╮ is a open source and community contributions are essential to project success!
- <TextField>, my new CMS project designed by a passionate developer, for developers!
- My last project Fast⚡︎CMS, a Flat-File cms.
- I am currently busy 😫.
Great ! 👍🏻
- Before ask a question, read the documentation.
- 🎉 Featured as #1 product of the day on Product Hunt
- Please like in alternativeto.net 👍🏻
- ╰☆╮Flatboard╰☆╮ is a open source and community contributions are essential to project success!
- <TextField>, my new CMS project designed by a passionate developer, for developers!
- My last project Fast⚡︎CMS, a Flat-File cms.
- I am currently busy 😫.
Suggested Topics
BarryK
started Disappointed by lack of security
General Questions
RED-LINE@42796168
started 🐞 fixed Case NO sensitivity Captcha
Bug reports
Abdulhalim
started Loading CSS in Localhost
General Questions
759a352d
started plugin Admin Image Upload
Feature Requests