I want to show windows 8 style tiles (square buttons) for facebook like and twitter follow buttons with follower counts on my website. Which looks like below. Any suggestion?
I Have Done it With HTML And CSS But You Have To Update The Followers Count Manually.I Am Giving You The Code Here And Visit My Blog For A Live Demo And I Encoded The Images With base64 I Will try to Get Followers Count Automatically Using ApI's.
<div style="width:100px;height:100px;background:#00a0d1;color:#ffffff;">
<img src="data:image/png;base64,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" width="50px" height:50px"/>
<div style="text-align:right;padding-right:10px;padding-bottom:10px;">
296<br/>Followers
</div>
</div>
<div style="margin-top:-100px;margin-right:116px;width:100px;height:100px;background:#3B5998 ;color:#ffffff;float:right">
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/4QCYRXhpZgAATU0AKgAAAAgABAEaAAUAAAABAAAAPgEbAAUAAAABAAAARgEoAAMAAAABAAIAAIdpAAQAAAABAAAATgAAAAAAAABIAAAAAQAAAEgAAAABAAWQAAAHAAAABDAyMTCgAAAHAAAABDAxMDCgAQADAAAAAQABAACgAgAEAAAAAQAAADKgAwAEAAAAAQAAADMAAAAA/+ECzmh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8APD94cGFja2V0IGJlZ2luPSfvu78nIGlkPSdXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQnPz4KPHg6eG1wbWV0YSB4bWxuczp4PSdhZG9iZTpuczptZXRhLyc+CjxyZGY6UkRGIHhtbG5zOnJkZj0naHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyc+CgogPHJkZjpEZXNjcmlwdGlvbiB4bWxuczpleGlmPSdodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyc+CiAgPGV4aWY6WFJlc29sdXRpb24+NzI8L2V4aWY6WFJlc29sdXRpb24+CiAgPGV4aWY6WVJlc29sdXRpb24+NzI8L2V4aWY6WVJlc29sdXRpb24+CiAgPGV4aWY6UmVzb2x1dGlvblVuaXQ+SW5jaDwvZXhpZjpSZXNvbHV0aW9uVW5pdD4KICA8ZXhpZjpFeGlmVmVyc2lvbj5FeGlmIFZlcnNpb24gMi4xPC9leGlmOkV4aWZWZXJzaW9uPgogIDxleGlmOkZsYXNoUGl4VmVyc2lvbj5GbGFzaFBpeCBWZXJzaW9uIDEuMDwvZXhpZjpGbGFzaFBpeFZlcnNpb24+CiAgPGV4aWY6Q29sb3JTcGFjZT5zUkdCPC9leGlmOkNvbG9yU3BhY2U+CiAgPGV4aWY6UGl4ZWxYRGltZW5zaW9uPjY0MDwvZXhpZjpQaXhlbFhEaW1lbnNpb24+CiAgPGV4aWY6UGl4ZWxZRGltZW5zaW9uPjM2MDwvZXhpZjpQaXhlbFlEaW1lbnNpb24+CiA8L3JkZjpEZXNjcmlwdGlvbj4KCjwvcmRmOlJERj4KPC94OnhtcG1ldGE+Cjw/eHBhY2tldCBlbmQ9J3InPz4K/+IMWElD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" width="50px" height:50px"/>
<div style="text-align:right;padding-right:10px;padding-bottom:10px;">
296<br/>Likes
</div>
</div>
<div style="margin-top:-100px;margin-right:11px;width:100px;height:100px;background:#dd4b39 ;color:#ffffff;float:right">
<img src="data:image/png;base64,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" width="50px" height:50px"/>
<div style="text-align:right;padding-right:10px;padding-bottom:10px;">
296<br/>Circles
</div>
</div>
Related
So i was making a project tribute page and as i started to write the css i was first checking it with firefox device toolbar, but when i opened the same code on chrome the image that i had given a img-fluid class was taking up its original full width (1065px)
The div #content is inside a div with .container-fluid
this is how it looks on chrome
this is how it looks on firefox
<div id="content" class="container">
<div id="Home" class="container mx-auto">
<div id="title">
<p>a tribute to</p>
<h1>Joan Didion</h1>
<p id="date">1934 - 2021</p>
</div>
<div id="head-img">
<figure>
<img src="images/didion-edit.webp" alt="image of joan didion" class="img-fluid">
<figcaption>Joan Didion by Mary Lloyd Estrin.</figcaption>
</figure>
</div>
<div id="description">
<figure>
<blockquote><p>I write entirely to find out what I’m thinking, what I’m looking at, what I see and what it means. What I want and what I fear.</p></blockquote>
<figcaption>Why I Write</figcaption>
</figure>
</div>
</div>
edit: okay so i started to add elements to a new file to see when the error would start to occur and it happened when I pasted the section that follows #Home which is #Bio.
I will edit the code so you can see the following section because i still dont know why it's causing the issue
/*I'll take away the css because none of it proved to be an issue*/
<div class="container-fluid">
<!-- there's a nav div here but it doesnt cause issues-->
<div class="container-fluid" id="content">
<div id="Home" class="container mx-auto">
<div id="title">
<p>a tribute to</p>
<h1>Joan Didion</h1>
<p id="date">1934 - 2021</p>
</div>
<div id="head-img">
<figure>
<img src="images/didion-edit.png" alt="image of joan didion" class="img-fluid">
<figcaption>Joan Didion by Mary Lloyd Estrin.</figcaption>
</figure>
</div>
<div id="description">
<figure>
<blockquote><p>I write entirely to find out what I’m thinking, what I’m looking at, what I see and what it means. What I want and what I fear.</p></blockquote>
<figcaption>Why I Write</figcaption>
</figure>
</div>
</div>
<!--the #Bio has three .achivement elements but even if its just one and the figure element the issue occurs-->
<div id="Bio" class="container">
<div id="summary">
<h1>Her life</h1>
<div class="achivement">
<ul>
<li>The iconic writer got her start when she won Vogue's "Prix de Paris" contest and got a job opportunity in the magazine's
New York office as price for one month. Once there, she got a permanent position after writing a seminal article on self-respect on the fly after the reporter that was supposed to make the assignment failed to deliver a complete article. She worked at the famed magazine for years after that.</li>
</ul>
<blockquote cite="https://www.nytimes.com/1976/12/05/archives/why-i-write-why-i-write.html">
<p>
" Had I been blessed with even limited access to my own mind there would have been no reason to write. I write entirely to find out what I'm thinking, what I'm looking at, whot I see and what it means."
</p><cite>-- Joan Didion on her "Why I Write" article for the New York Times</cite>
</blockquote>
</div>
<figure>
<img src="images/tradlands-flickr.jpg" alt="joan didion in later years">
<figcaption>Didion by Irving Penn.</figcaption>
</figure>
</div>
</div>
</div>
</div>
Try adding the rule in your css file:
<style>
figure .img-fluid {
width: 100%;
}
</style>
I'm pretty sure it will work for you.
So after taking off and adding elements one-by-one I realized that an image on the section that followed the #Home div didn't have .img-fluid
I don't know why that wasn't an issue on firefox but I've tested the code on both browsers and it's working properly.
I am trying to code my tumblr html, and it's going well but i can't seem to get audio posts to show up correctly. Youtube videos are fine, but soundcloud specifically seems to be problematic. I'll try to list the audio coding that i have that i think you need (it's not in the order i block it as)
{block:Audio}
<div class="postaudio">
{block:AlbumArt}
<div class="albumart">
<div class="album-shine"></div>
<img src="{AlbumArtURL}" alt="Album Art" />
</div>
{/block:AlbumArt}
{AudioPlayerGrey}
{block:Caption}
{Caption}
{/block:Caption}
<div class="space"></div>
</div>
{/block:Audio}
{block:Audio}
{block:AudioPlayer}
<div class="hold">
<div class="player">{AudioPlayergrey}</div>
</div>
{/block:AudioPlayer}
<div class="audio_info cal">
{block:TrackName}<span><b>Track:</b> {TrackName}</span>{/block:TrackName}
{block:Artist}<span><b>Artist:</b> {Artist}</span>{/block:Artist}
<span><b>Plays:</b> {playcount}</span>
</div>
{/block:Audio}
You need to include the theme operators to support embedded audio players, such as Soundcloud:
{block:AudioEmbed}
{AudioEmbed}
{/block:AudioEmbed}
Reference: https://www.tumblr.com/docs/en/custom_themes#theme-options
I am using the jssor templete for my slider and I have modified the setting so that I can have a slider image change when the mouse hover on the thumbnail. But I do not know how to add an external link to the thumbnail image so that I can go to the another page associated with that picture
I have try the following method from http://quabr.com/28478806/jssor-external-links-on-thumbnails but it is not worked
<div>
<img u="image" src="../img/photography/002.jpg" />
<div u="thumb">
<img class="i" src="../img/photography/thumb-002.jpg"/>
</div>
<div u="caption" t="L">My Title</div>
</div>
</div>
Thank you for your help!
I guess it worked already.
But there is an extra enclosing '<div>' in following code,
<div>
<img u="image" src="../img/photography/002.jpg" />
<div u="thumb">
<img class="i" src="../img/photography/thumb-002.jpg"/>
</div>
<div u="caption" t="L">My Title</div>
</div>
</div>
Please remove it by replacing
<div u="caption" t="L">My Title</div>
</div>
with
<div u="caption" t="L">My Title</div>
Also, please set 'height: 100%' for 'a' element to make the clickable area bigger.
<a href="http://mylink.com" target="_blank" style="height: 100%;">
And finally, please check out the thumbnail navigator skin html code, because it is fully customizable, and it can be very complicated. Please make sure your link element is not covered by any other element.
Having some issues trying to get my photoset width to 340px without messing up the way the smaller photos in the photoset display. http://d.pr/icuf
{block:Photoset}
{block:IndexPage}
<div class="photo_set">
<div class="header">
<h1>photoset</h1>
{block:NoteCount}<a href="{Permalink}">
<div class="note">{NoteCountWithLabel}</div></a>
{/block:NoteCount}
<div class="clear"></div>
</div>
<div class="view">
<a href="{Permalink}">
<div class="link">View Photoset ↦</div></a>
</div>
{Photoset-250}
</div>{/block:IndexPage}
{block:PermalinkPage}
<div class="perma_width">{Photoset-500}</div>
{/block:PermalinkPage}
{/block:Photoset}
You won't be able to get a 340px width using Tumblr's default code. You have two options:
1) Don't use Tumblr's {Photoset} tags and display each photo individually with {block:Photos}...{/block:Photos} and style them as you want.
2) Use a plugin like this: https://github.com/PixelUnion/Extended-Tumblr-Photoset (full disclosure, it's something that I wrote)
I've got the following nav on my site
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar pull-right" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="/"><span class="icon-chevron-up icon-medium"></span> Rocky Mountain Arts</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="dropdown">
Gallery <b class="caret"></b>
<ul class="dropdown-menu">
<li>For Sale</li>
<li>Sold</li>
<li>Private Collection</li>
</ul>
</li>
<li>About The Artist</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
When I view the site on my desktop, I see everything as expected, and I can navigate all of the links.
HOWEVER: When I load the site up on my iPhone, press the toggle collapse button and then expand the dropdown, I cannot click any of the sub links within the dropdown menu, rather the menu closes and either the "about" or the "contact" link activate instead.
How can I fix this?
Thanks #MiikaL for the comment. Looks like it's a bug filed over at Github that no-one is really addressing in the official source code.
https://github.com/twitter/bootstrap/issues/4550
This can be reproduced on the github components demo page
http://twitter.github.com/bootstrap/components.html#buttonDropdowns
There are people with helpful info in the tread, and the 'hack' solution seems to be
// Fixes sub-nav not working as expected on IOS
$('body').on('touchstart.dropdown', '.dropdown-menu', function (e) { e.stopPropagation(); });
This issue is finally fixed in the latest Twitter Bootstrap as of version 2.2.2:
You can read a short summary about the changelog in 2.2.2 here:
http://forwebonly.com/things-you-should-know-about-twitter-bootstrap-2-2-2/