I have a blog theme which does not include captions in photo posts. I have been successful with plugging in {block:Caption} {Caption} {/block:Caption} before {/block:Photo}, but the caption seems to be floating on the background and not inside the post box as seen below:
How do I include the caption to be apart of the same box as the date?
Any help is appreciated!
It would be much easier if you posted the relevant code here. I don't know what theme you are using but if you take a look at this site http://www.tumblr.com/docs/en/custom_themes you'll see that dates are rendered by {block:Date} {/block:Date}, {Timestamp}, {DayOfYear} etc. Take a look and see which one suits you theme. When you have found it, simply Ctrl + F in you code and find where in your HTML code the date box is rendered and then put the {block:Caption} {Caption} {/block:Caption} inside.
Related
We have a sharing toolbox that defaults to 32x32 px but we also use the same toolbox code to display at 20x20 px in other parts of our site. The code below (including Drupal tokens) worked fine for a few months but last month it started showing the icons at 32x32 even though it has the class addthis_20x20_style. It also changed the behavior on another system outside Drupal that uses the same toolbox code.
<div addthis:title="[node:title]" addthis:url="[node:url]"
class="addthis_sharing_toolbox addthis_default_style addthis_20x20_style">
</div>
I tried changing addthis_sharing_toolbox to addthis_toolbox per the support page at http://www.addthis.com/academy/customizing-the-addthis-toolbox/, but then the buttons do not display at all. The AddThis support pages are incredibly disorganized and outdated and they seem to have abandoned their user forum. I don't even know where else to ask.
Here's a reply I received from AddThis support. Hopefully this will be of use to others:
JAN 07, 2016 | 03:26PM EST
Hi,
We recently made a change to our code that affected some of our older
buttons.
You will need to use our advanced configuration code in the locations
that you would like our buttons to appear in 20x20.
Replace the current code in these locations with the following:
<div class="addthis_toolbox addthis_default_style addthis_20x20_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
</div>
Additional advanced configuration code information can be found here:
http://www.addthis.com/academy/customizing-the-addthis-toolbox/
Please let me know if you need any additional help
Thanks,
Mike
I am having the same problem. It looks like they have removed support for 20x20 sized buttons, as it is no longer listed on the academy support page you provided. It is a shame because it is the only size that has a constant height for facebook, facebook_like, tweet, etc buttons.
The below css styles, while feeling a little hacky, go some distance in repairing the broken functionality:
.addthis_20x20_style .at-icon-wrapper,
.addthis_20x20_style .at-icon {
height:20px !important;
width:20px !important;
}
That didn't fix the size of the google_plusone button. I happen to be using drupal as well - the addthis module - and the below 'customize services' settings worked pretty well.
That's:
Service code: google_plusone
HTML classes: addthis_button_google_plusone
HTML attributes: g:plusone:size="medium"
(Re the addthis service, the phrase "you had one job!" comes to mind...)
I hope someone can help me with my problem with tumblrs lightbox.
I only have very basic html knowledge and because of that, I thought, it might be a good idea to work with tumblr themes. Everything works fine, but if you click on a picture on my site, tumblrs lightbox shows up and its back button does not bring you back to my main site, instead it shows the picture on another site.
Thats annoying, but I do not know how to change the options of the tumblr lightbox back button?
http://andreasschmitten20062010.tumblr.com/
Is there anyone here, who knows something about tumblr and how to change this?
Also it would be great if you could move through the other pictures from the lightbox.
Thank you very much
Andre
Get rid of the {LinkOpenTag} and {LinkCloseTag} surrounding the image tag.
Eg.
{LinkOpenTag}
<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
{LinkCloseTag}
becomes
<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
When user chooses "add to homescreen" option from mobile Safari she sees a dialog where she can enter title for that shortcut. The text field is already filled with some default title.
The question is: there this title is taken from?
In my code I have following header for one of my pages (all pages in single html file):
<div data-role="header" class="toolbar">
<h1 id="someHeader" class="exampleHeader">Example Header</h1>
Other
</div>
I'm changing this title dynamically by using
var someDifferentTitle = ...
$('.exampleHeader').html(someDifferentTitle).trigger('create');
The title updates just fine but when I tap "add to homescreen" the system still uses original "Example Header" hint!
How to fix this? Any ideas?
Answer here: https://stackoverflow.com/a/11569043/275754
Short answer:
<meta name="apple-mobile-web-app-title" content="Short name">
OK, it turned out to be very simple, one just needs to change document's title:
document.title = someDifferentTitle
I still have no idea why the hint is truncated after several characters, but that is kind of enough for me.
I think however that there is slight inconsistency in jQM implementation. If setting toolbar's header in h1 using code changes the document title then dynamic change of header via .html() method should change the title as well.
I have a tumblr blog. I want to put a Google Translate Tool & Button on my tumblr blog. How can I do? Unfortunately, I cant find it in tumblr help pages.
Go here: https://translate.google.com/manager/add
Follow all of the instructions and you'll get two pieces of code, one that looks like this:
<meta name="google-translate-customization" content="272b1f36bdc17cf1-0221013045ec1abb-gfd965ee1275b4499-14"></meta>
You'll want to place the <meta> code before the closing </head> tag, this will be at the top of your theme.
The other piece of code looks like this:
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
For this piece of code you'll need to place it where you want the tool to appear on your theme, likely this will be near the top of your page, just after the opening <body> tag. Your blog will likely have some sort of 'wrapping' div, so you maybe want to place it inside of that.
You'll need to fiddle around a little bit to position it how you like.
To put both of these bits of code into your theme, you'll need to go to the 'Customize Theme' page and click on 'Edit HTML'.
How to control the facebook like box stream part height alone. Its normal to reduce height of whole box but if tries to control it fans images are not shown.
The css .fan_box .page_stream{ ...,width:300px} to .fan_box .page_stream{...,width:150px}
i'm asking because the stream box inside iframe
There isn't a way to change the height. Facebook doesn't provide a way to change the height and there isn't a way to change the height using JavaScript and CSS.
Why can't I do it with JavaScript and CSS?
CSS just doesn't apply through an iFrame because thats how an iFrame works -- its basically a window to another page with its own CSS.
Javascript won't allow you to access the content of an iFrame if the URL of the iFrame is different than the page that contains the iFrame. Doing:
document.getElementById('iframeID').contentWindow.document
Will give you the following warning in Chrome.
Unsafe JavaScript attempt to access frame with URL... Domains, protocols and ports must match.
The reason for this is to prevent XSS. Here's more on the Same Origin Policy.
I saw this on the Like Box page and figured I'd respond that you can use the 'data-height' attribute:
data-height="250"
Worked for me. Here's my example:
http://www.skonet.com/Resources/Articles/Index.aspx
you can reduce the height of the encasing div, hide its overflow and if you want push the top of it underneath an absolutely positioned element with a higher z-index like so:
<div style="position:absolute;z-index:2;top:0;left:0;width:300px;height:130px;background-color:#c0c;opacity:0.5;filter:alpha(opacity=50);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";"></div>
<div style="height:140px;width:140px;overflow:hidden;background-color:#0c0; margin-top: 60px;color: #fff;padding: 30px;font-family:arial;">
facebook like box goes here - only the green part will be visible if you make the pink box white and take out the 0.5 opacity and the bottom will get cut off so you can just display whatever part you want
</div>
I suppose you guys still need it and this is the most acurate trick I can provide and its also promising to work with the every day changing of the facebook like box by facebook.
Its a bit tricky but will work for you guys..
create two seprate like box of the same page, and close them in seprate div right in my case
<div class="up1">
facbook like box 1 code
<div class="up2">
facbook like box 2 code
Now in the css
use position absolute to class up1
.up1 {
position:absolute;
z-index:99999;
background-color:white;
}
and in up2
.up2 {
padding-top:87px;
}
What it does it will put the box 1 over the box 2 hiding its facebook like and bla bla making it feel like you have one box that contain picture and streaming of your desired lenght
I was looking around cos I had a problem like this one. Facebook has no standard way of customizing the stream if the faces and header are checked.
The solution is to take them differently. If you need the stream as long as 1000px, just uncheck everything except the stream. This will change its height from the default 300px to whatever value you type in the height field.
See an example below:
<div class="fb-like-box" data-href="https://www.facebook.com/MadeinHeavenEvents" data-width="800" data-height="2000" data-colorscheme="light" data-show-faces="false" data-header="false" data-stream="true" data-show-border="true"></div>
Then if you still need the one with faces, get a new code and set the height differently, then uncheck the others. Below is an example:
<div class="fb-like-box" data-href="https://www.facebook.com/MadeinHeavenEvents" data-width="800" data-height="500" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="false" data-show-border="true"></div>
Don't forget to add the SDK before these codes.
I know it's a long time since this was posted, but here is the solution that helped me today
Yes the data-height to 250 will work as it reduce the outside iframe
Now try to set data-height to 1000 - it is still 300px height,
because the inner div inside the iframe hard coded to 300px and
you can not control that as it is in a cross domain iframe...
<div class="fb-like-box" data-href="http://www.facebook.com/example" data-width="292" data-height="250" data-show-faces="true" data-stream="false" data-header="false"></div>
Adjust the height in this code to what works best for you.