I have an Instagram widget on my Blogger (pic below) - I'd like it to display the same squire sized pictures instead of what it's doing right now. Which part of the code below should I be changing? Would love to learn.
Below is the code in my theme:
/** Instagram widget support **/
.instag ul.thumbnails > li {
width:30% !important;
}
.instag ul.thumbnails > li img:hover {
opacity:.8;
}
.instag ul li {
margin:0;
padding-bottom:0;
border-bottom:none;
}
.pllexislider ul li {
margin:0;
padding-bottom:0;
border-bottom:none;
}
Below is the code for the HTML/Java script Gadget:
<div id='instafeed' />
<script type='text/javascript'>//<![CDATA[
var feed = new Instafeed({
get: 'user',
userId: 16550415,
limit:6,
sortBy:'random',
accessToken: '16550415.8f4c5bf.ce58aa2b5d99494f8a2350b5b7315773',
template: '<li><img src="{{image}}" /><div class="insta-likes"><div style="display: table; vertical-align: middle; height: 100%; width: 100%;"><span style="display: table-cell; vertical-align: middle; height: 100%; width: 100%;">{{likes}} <i class="fa fa-heart"></i><br/>{{comments}} <i class="fa fa-comment"></i></span></div></div></li>',
resolution: 'standard_resolution'
});
feed.run();
//]]>
</script></div>
Instagram Widget - Current State
Thanks!
From instafeedjs you have 3 options for resolution key:
thumbnail - 150x150
low_resolution - 306x306
standard_resolution - 612x612
Related
I have seen several ways to align text or even an image to the right, but when i try to align a simple avatar with some text, i cant get it to work.
It actually used to work until I switched to material-ui-next, now I can't get them to align properly.
So what I have is
but I want to have Text1 on the left (like it is) and Text2 and the Avatar next to each other, and aligned on the right. All in the same line.
Bellow is the render part I have so far, which was actually different many times, and my last trial was using <li>, although I don't think I need it in this case, but I open to suggestion.
this is the render for the top container:
render() {
return (
<div className="main-container">
<div className="links-container">
<div className="logo-container">Text1</div>
<div className="right-links-container">
<ul className="right-list-container">
<li>Text2
</li>
<li><AccountInfo />
</li>
</ul>
</div >
</div>
</div>
);
}
}
this is the render for the avatar:
render() {
return (
<div className="profile-container">
<Avatar
src="https://www.shareicon.net/data/2016/08/05/806962_user_512x512.png"
size={30}
onClick={this.handleAvatarClick}
/>
<Popover
open={this.state.showMenu}
anchorEl={this.state.anchorEl}
anchorOrigin={{horizontal: 'left', vertical: 'bottom'}}
targetOrigin={{horizontal: 'left', vertical: 'top'}}
onRequestClose={this.handleCloseAccountInfoMenu}
>
<MenuList role="menu">
<MenuItem >My account</MenuItem>
<MenuItem >Logout</MenuItem>
</MenuList>
</Popover>
</div>
);
}
and the css:
.main-container {
margin-top: 10px;
margin-bottom: 10px;
width: 100%
}
.links-container {
margin: 15px;
text-align: right;
}
.logo-container {
float: left;
}
.right-list-container a {
text-decoration:none;
}
.right-list-container li:nth-child(1) {
text-decoration:none;
height:30px;
display:block;
background-position:right;
padding-right: 15px;
}
ul {
list-style-type:none;
padding:0px;
margin:0px;
}
.accountinfo-menu {
width: 200px;
}
.profile-container {
clear: both;
vertical-align: middle;
display: inline;
}
I feel like I am doing too much and I should be rather simple, but I can get it to look the way I want. Any suggestions? I can easily refactor this whole thing if I am doing it all wrong. Thank you!
Here is a short snippet using flexbox. I think this is what you need.
render() {
return (
<div className="main-container">
<div className="links-container flexbox">
<div className="logo-container">Text1</div>
<div className="right-links-container">
<ul className="right-list-container flexbox">
<li><Avatar /></li>
<li>Text2</li>
</ul>
</div>
</div>
</div>
);
}
}
CSS:
.flexbox{
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:flex;
}
.links-container{
align-items:center;
width:100%;
}
.logo-container{
width:auto;
}
.right-list-container{
margin-left:auto;
width:auto;
align-items:center;
}
.right-list-container li{
margin-right:10px;
}
checkout the demo here:
Here is my website.
http://www.gtaresources.net/
The css makes anchor elements have certain css properties and i just want it for like a navigation bar. just the login button and when i add a menu. But for now you can see that green behind the image at the top right. It's not supposed to go behind every anchor i just want it for certain ones and i can't or don't know how to do inline css for only the menu with the a:visited and a:hover and stuff. What's the solution? I just need to make some of the css only work for a certain elements or elements.
I made notes of where the css that is interferring begins and ends.
Here my source:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>GTA Resources</title>
<style type="text/css">
html
{
background-color: #003300;
padding-right: 11%;
padding-left: 11%;
}
body
{
background-color: black;
}
#p
{
color: white;
}
#para
{
color: white;
padding-right: 2%;
padding-left: 2%;
}
a
{
color: #003300;
}
.logo
{
padding-top: 4px;
padding-left: 4px;
}
ul { <!-- Css that is interferring begins -->
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a:link, a:visited {
display: block;
width: 120px;
font-weight: bold;
color: #FFFFFF;
background-color: #98bf21;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
a:hover, a:active {
background-color: #7A991A;
} <!-- Css that is interferring ends -->
</style>
<script type = "text/javascript">
function validate() {
var un = document.myform.username.value;
var pw = document.myform.pword.value;
var valid = false;
var unArray = ["admin"];
var pwArray = ["password"];
for (var i=0; i <unArray.length; i++) {
if ((un == unArray[i]) && (pw == pwArray[i])) {
valid = true;
break;
}
}
if (valid) {
alert ("Logged In.");
window.location = "/victoria/logged_in.html";
return false;
}
}
</script>
</head>
<body>
<ul background="/victoria/cutiepie2.jpg" hidden>
<li>Call</li>
<li>Text</li>
<li>Home</li>
<li>News</li>
<li>Media</li>
<li>Downloads</li>
<li>Forum</li>
</ul>
<img src="/victoria/logo.jpg" width="250" height="75" class="logo">
<ul style="list-style-type: none;margin: 0;padding: 0;overflow: hidden;position: absolute;top: 4px;right: 4px;">
<li style="float: left;"><a style="display: block;width: 120px;font-weight: bold;color: #FFFFFF;background-color: black;text-align: center;padding: 4px;text- decoration: none;text-transform: uppercase;" href="/victoria/logged_in.html">Log in</a></li>
</ul>
<form name = "myform" style="position: absolute; top: 0;right: 0;" hidden>
<p id="p">Username: <input type="text" name="username">
Password: <input type="password" name="pword">
<input type="button" value="log in" onclick= "validate()"></p>
</form>
<center><h1 style="color: #003300;">GTA Resources</h1></center>
<center><img src="http://i1-news.softpedia-static.com/images/news2/Call-of-Duty-Ghosts-Publisher-Wants-to-Break-GTA-5-Sales-Record-Soon-392209-2.jpg"
width="1000" height="500"></center>
<br><br>
<p id="para">
Welcome to Gta Resources. This is a site all about gta, the cheats, mods, and videos of within it. From hiliarous videos to
videos of how to make, convert, and import mods into gta. This site has everything. Right now it focuses on Gta 5 but in the future it will have topics on all
the other Gta's too. This site will have media on the Mods for example, details in a description, videos on and how to do them, and download links, unless
there is no link. Then I will try my best to give information on it, and where you might be able to get it. There will be a forum soon for discussing topics
on anything Gta related. And just have a good time. Enjoi!!:)
</p>
<center>Click here for help</center>
<p id="p" style="text-align: right;">GTA Resources(c) 2014</p>
</body>
<!--MTD(c) 2014-->
</html>
The clean method to do this would be using CSS classes. In your HTML, add a class to the css elements that should have the green background.
HTML:
my link
CSS:
a.green-on-hover:hover {
background-color : green;
}
Note: The class name, is just like a variable-name can be anything, even 'hyphens' are allowed in the class-name. I gave 'green-on-hover' you can call it anything you want.
Found this very simple tutorial to help you with classes:
http://www.tizag.com/cssT/class.php
Hope that helped. Let me know if you have questions.
One Suggestion: Try to make your question, more generic next time.
You background the anchor with green and you put inside the image on it and you see the result of yours.
try this
html:
<a href="/index.html">
<img width="250" height="75" class="logo" src="/victoria/logo.jpg">
<span></span>
</a>
css:
a,a:link, a:visited {
color: #ffffff;
position:relative;
display: block;
font-weight: bold;
padding: 4px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 120px;
}
a span{
position:absolute;
width:100%;
height:100%;
background-color:#98bf21;
z-index:2;
left:0;
top:0;
}
a img{
position:relative;
z-index:0;
}
I bought before-after jQuery plugin, and I made a simple WordPress-theme. But few things don't work. I wanted to make this slider as my background so I made div in which slider is fit to page, but it doesn't fit. That is my first problem.
My second problem is that gravity forms make some strange things, they are blocking some functions, but I'll fix that.
Here is code:
css:
html {
width: 100%;
}
body {
background-color:#A6B8CC;
margin: 0px!important;
}
.titlelogo {
background-image:url(../images/sitelogo.png);
background-repeat:no-repeat;
margin-left:auto;
margin-right:auto;
padding-top:35px;
margin-top:20px;
margin-bottom:-5px;
display:block;
width:250px;
height:98px;
}
#big_divider {
margin-top:150px;
}
#example{
margin: auto;
padding: 0px!important;
}
#example img {
max-width: 100vw;
max-height: 100vh;
}
#after {
max-height: 100vh;
max-width: 100vw;
}
ul {
margin:0px!important;
}
#secondary {
display: none;
}
ul, menu, dir {
display: block;
list-style-type: disc;
-webkit-margin-before: 0em!important;
-webkit-margin-after: 0em!important;
-webkit-margin-start: 0px!important;
-webkit-margin-end: 0px!important;
-webkit-padding-start: 0px!important;
}
#ext_ext_after {
margin: 0 auto;
}
html:
<div id="example" class="beforeafter_slider shadow1">
<ul>
<!-- THE 1. SLIDE -->
<li><img src="<?php bloginfo('template_url'); ?>/img/extralightgethaldus2.jpg" alt="<?php bloginfo('template_url'); ?>/img/withglassesgethaldus2.jpg">
<div id="textbox_1" class="before">
<div id="title_1b" class="fadeup">BEFORE</div>
</div>
<div id="textbox_1" class="after">
<div id="title_1b" class="fadeup">AFTER</div>
</div>
<div id="textbox_snw">
<div id="title" class="fadeup">Don't let the sun be your enemy!</div>
<div id="title2" class="fadeup">Do you consider yourself unique?<br>Your glasses should be as well.</div>
<div id="description" class="fadeup">We are soon lounching a new eyeware webshop<br>like you've never seen before across all Europe.<br><br>
Right now we cannot say anithing else, but if you want<br> to be among the firs to be noticed what it's all about<br>
leave your e-mail adress below and join our community.</div>
</div>
</li>
</ul>
</div>
And here is link: http://svinaweb.hr/gethaldus-lp/
The div will not always fit everyone's screen so to overcome this problem it might be a good idea to change your CSS style to this one below...
#example img {
width: 100%;
height: auto;
overflow: hidden;
}
Please comment back if you need more help or this is not what you are looking for.
I've setup my social media buttons all on a single line (Twitter, Facebook & Google+).
The problem is that the Google+ button isn't spacing correctly - it spaces itself about 3x farther than the Twitter & Facebook Button.
I've tried changing the padding, but that didn't help. I thought that maybe the width of the Google+ button was the problem, but I don't see anything in the code to change the width.
HTML:
<div class="copy_right_social">
<div class="social">
<ul id="social">
<li>Tweet
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></li>
<li><iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.whatever.com&send=false&layout=box_count&width=80&show_faces=false&action=like&colorscheme=light&font&height=90" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:90px;" allowTransparency="true"></iframe></li>
<!-- Place this tag where you want the +1 button to render. -->
<li><div class="g-plusone" data-size="tall"></div></li>
<!-- Place this tag after the last +1 button tag. -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</ul>
</div><!-- SOCIAL -->
</div><!-- COPY_RIGHT_SOCIAL -->
CSS:
.copy_right_social {
float: left;
width: 410px;
height: 100px;
margin: 15px 0 0 0;
padding: 0;
border: none;
background-color: #FFF;
}
.social {
list-style-type: none;
list-style-position: inside;
padding: 0;
}
.social li {
display: inline;
text-decoration: none;
padding: 15px 0 0 20px;
float: left;
}
This example on JsFiddle.
The three buttons are not of equal width. That twitter button is 60px wide, the facebook 44px and the gplus 50px.
Therefore you should define individual classes for each one and set the widths, ala:
.social li { float: left; }
.social li.twitter { width: 60px; }
.social li.facebook { width: 44px; }
.social li.gplus { width: 50px; }
Here is a working fiddle with no spacing between them (feel free to add back in however much you like): http://jsfiddle.net/7jC5f/
The following is my first cut at coding-up a reddit-like comment in html+css. I have a few questions about css and the general structure:
How do I get the comment body ("The King took off his hat...") to align with the comment head ("Nathan, posted...") and the comment tail ("reply permalink ...")? I tried making the margin-bottom for .comment-left a little longer but that didn't fix the issue.
I know I've been a little trigger-happy with the tags. Which ones are redundant?
Is there a better/tighter way to get the same structure?
Thanks all, Nathan
ps I used the handy information here for stacking my voting arrows on top of each other.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>CSS sandbox: comments</title>
<style type="text/css">
.vote {
width: 15px;
float: left;
clear: left;
}
.vote img {
display: block;
float: none;
clear: both;
width: 15px;
}
.userpic img {
width: 60px;
}
.comment-contents li {
list-style-type: none;
margin-bottom: 10px;
}
.comment-left {
float: left;
}
.head {
margin-left:10px;
}
.tail-list li {
display: inline;
}
img {
border: 0;
}
a {
text-decoration: none;
}
</style>
</head>
<body>
<div class="comment">
<span class="comment-left">
<span class="vote">
<img alt="^" title="vote up" src="http://www.reddit.com/static/aupgray.gif">
<img alt="v" title="vote down" src="http://www.reddit.com/static/adowngray.gif">
</span>
<span class="userpic">
<a href="#">
<img src="http://www.gravatar.com/avatar/550deada0ac679dfc3c9103b674760af?s=128&d=identicon&r=PG" height="60" width="60">
</a>
</span>
</span>
<span class="comment-main">
<ul class="comment-contents">
<li class="head">
Nathan, posted 2 hours ago
[-]
</li>
<li class="middle">
<p>The king took off his hat and looked at it. Instantly an immense
crowd gathered. The news spread like wildfire. From a dozen leading
dailies,reporters and cameramen came rushing to the scene pellmell in
highpowered monoplanes. Hundreds of reserves,responding without
hesitation to a riotcall,displayed with amazing promptness quite
unparalleled inability to control the everincreasing multitude,but
not before any number of unavoidable accidents had informally
occurred.</p>
<p>Chapter 1 - untitled (eecummings)</p>
</li>
<li class="tail">
<ul class="tail-list">
<li>reply</li>
<li>permalink</li>
<li>offensive?</li>
</ul>
</li>
</ul>
</span>
</div>
</body>
</html>
Update your css with a left padding on ".comment-contents li" and a remove the margin on ".head"
.comment-contents li {
list-style-type: none;
margin-bottom: 10px;
padding-left: 60px;
}
.head {
margin-left:0px;
}
While you are at it, just use padding instead of margin for ".comment-contents li":
.comment-contents li {
list-style-type: none;
padding: 0 0 10px 60px;
}
I recommend not using padding and margin on a class unless absolutly necessary.
Don't have time to do CSS at the moment (maybe later), but you should be able to achieve the look with this markup:
<div class="comment">
<p class="user">
<a href="#">
<img src="http://www.gravatar.com/avatar/550deada0ac679dfc3c9103b674760af?s=128&d=identicon&r=PG" height="60" width="60">
</a>
Nathan, posted 2 hours ago
[-]
</p>
<p>The king took off his hat and looked at it. Instantly an immense
crowd gathered. The news spread like wildfire. From a dozen leading
dailies,reporters and cameramen came rushing to the scene pellmell in
highpowered monoplanes. Hundreds of reserves,responding without
hesitation to a riotcall,displayed with amazing promptness quite
unparalleled inability to control the everincreasing multitude,but
not before any number of unavoidable accidents had informally
occurred.
</p>
<p>Chapter 1 - untitled (eecummings)</p>
<ul class="commentTools">
<li class="voteUp">vote up</li>
<li class="voteDown">vote down</li>
<li>reply</li>
<li>permalink</li>
<li>offensive?</li>
</ul>
</div>
And the CSS
.comment {
position:relative;
padding-left:75px;
}
.comment p {
}
.comment .user img {
float:left;
margin-left:-60px;
}
.comment .commentTools {
padding-left:0;
}
.comment .commentTools li {
display:inline;
}
.comment .commentTools .voteUp, .comment .commentTools .voteDown {
position:absolute;
display: block;
left:0;
}
.comment .commentTools .voteUp {
top:0;
}
.comment .commentTools .voteDown {
top:15px;
}
.comment .commentTools .voteUp a, .comment .commentTools .voteDown a {
display:block;
width: 15px;
height: 15px;
text-indent:-5000em;
}
.comment .commentTools .voteUp a {
background: url(http://www.reddit.com/static/aupgray.gif) no-repeat;
}
.comment .commentTools .voteDown a {
background: url(http://www.reddit.com/static/adowngray.gif) no-repeat;
}
I haven't tested this so there may be some bugs. Let me know if youwant any of the CSS explained.
How about setting the p margin-left to be set at 30px?