I'm trying to change the style of a tagged page on Tumblr (as in the page that collects all the specific tags - for example). At the moment all the tagged pages look the same. This is the code I've used -
{block:TagPage}
<div id="sp">
<div class="container">
<div class="row">
<h1 class="main-logo"><a href="/">
<img src="http://static.tumblr.com/bw1wxme/p5cn7shd5/logo_web.png" alt="" />
</a></h1>
</div><!-- row -->
</div><!-- /container -->
</div><!-- /portrwrap -->
{/block:TagPage}
Working example
I'm trying to use a different background for a certain tagged page. For example, when you visit the /tagged/shows page, it has a different background to the /tagged/news page.
Unlike Wordpress, I've been unable to find a page ID. I looked into this but that only changes the style of the post, not the tagged page.
You could set an '#id' on the body element, based on the current tag:
<body {block:TagPage}id="{URLSafeTag}"{/block:TagPage} />
...
</body>
When you visit a tagged page, tagged/news/ the HTML will render like so:
<body id="news" />
...
</body>
That way you can change all elements on the page, such as the navigation.
#news #nav {
background-color: red;
}
Hope that helps!
Reference: https://www.tumblr.com/docs/en/custom_themes#tag-pages
Related
As in the photo above, I would like to get rid of the scroll bar along with the history of all the likes and reblogs which are located once you click on the photo on my blog. Where would I locate this in the custom CSS on tumblr and which code would I use?
I have been looking at this code, but not sure where to go next.
{block:Photo}
{block:IndexPage}{LinkOpenTag}<div class="photo"><img src="{PhotoURL-500}" alt="{PhotoAlt}" width=250px/></div>{LinkCloseTag}
<ul class="like_and_reblog_buttons">
Thank you.
OK, so in the template on line 408 I simply wrapped the notes component in html comments so they don't get rendered in the browser.
Simply changing:
{block:PostNotes}
</center></center>
<div class="notes">{PostNotes}</div>
{/block:PostNotes}
</div>
{/block:Posts}
To:
<!--
{block:PostNotes}
<div class="notes">{PostNotes}</div>
{/block:PostNotes}
</div>
{/block:Posts}
-->
Full html template saved here: https://pastebin.com/yva5npcW
I've also removed the redundant
</center></center> that tag is obsolete:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center
Nothing is being rendered in those erroneous tags.
Before:
After:
I have a tumblr blog on which I post short webcomic stories. I want that when I post a few pages in a single post, they appear small, but when I click it enlarges and one can browse through the comic.
I would like to have something similar to this.
How can I set it up?
You can achieve this by implementing the Pirobox plugin in your theme: http://www.pirolab.it/pirobox/
You will then need to edit the photoset code in your theme to something like this:
{block:Photoset}
<div class="photo">
{block:Photos}
<a rel="gallery" class="pirobox_gall" href="{PhotoURL-HighRes}"><img src="{PhotoURL-500}" alt="{PhotoAlt}"/></a>
{/block:Photos}
</div>
{/block:Photoset}
And make sure you also adjust the photo-post block so they also open in Pirobox when clicked.
{block:Photo}
<div class="photo">
<a rel="single" class="pirobox" href="{PhotoURL-HighRes}"><img src="{PhotoURL-500}" alt="{PhotoAlt}"/></a>
</div>
<div class="caption">
{Caption}
</div>
{/block:Photo}
Add a link to the Pirobox js file in the "head" of your theme.
<script type="text/javascript" src="http://static.tumblr.com/ajtokgb/DfDluuzg8/pirobox_extended.js"></script>
Add this before the "head" or preferably in the "body" section near your other scripts.
<script type="text/javascript">
$(document).ready(function() {
$().piroBox_ext({
piro_speed : 700,
bg_alpha : 0.5,
piro_scroll : true // pirobox always positioned at the center of the page
});
});
</script>
And you will need to style it with CSS of course. You can also look into the "fancybox plugin" which does something similar.
Now when people click on a photo from one of your posts, an enlarged version of the picture will open up and they will be able to browse through the pictures from that specific post.
Note: This method will only work with photo posts. Every theme is different, you will need to adjust the code to suit your theme.
I have a chunk of content in HTML that is viewable when JavaScript is enabled with fancyBox. The read more link, when clicked, triggers fancyBox to pop up a window that shows the hidden content. The Intro, More and Bob parts are displayed in the fancyBox, but the Intro and Bob parts are displayed first, before the read more linked is clicked. It's a testimonial list, with the read more sections appearing with fancyBox.
...
<li>
<!-- hidden div begin-->
<div id="read-more-1" style="display: none;">
<p>Intro More</p>
<span class="source">Bob</span>
</div>
<!-- hidden div end-->
<!-- displayed begin-->
<p>Intro</p>
<a class="fancy-monials" href="#read-more-1">Read more...</a><br />
<span class="source">Bob</span>
<!-- displayed begin-->
</li>
...
If I disable JavaScript and click the read more link, it just takes me to my home page. Which I expect.
I've flirted with building a <noscript> block that re-displays the testimonials in full, and hides the others but that seems tedious and hacky.
One common way to solve this type of problem is to add a class="no-js" attribute to your page's html element, and then remove this class using javascript.
You can then use this class as a styling hook in your CSS to show/hide content depending on whether JS is enabled. So at the most basic, you might do this (using your code from above):
<html class="no-js">
<head>
<script type="text/javascript">
var dde = document.documentElement;
dde.className = dde.className.replace('no-js','js');
</script>
<style type="text/css">
.no-js .read-more {
display: block;
}
.js .read-more {
display: none;
}
</style>
</head>
<body>
<!-- ... -->
<ul>
<li>
<!-- hidden div begin-->
<div id="read-more-1" class="read-more">
<p>Intro More</p>
<span class="source">Bob</span>
</div>
<!-- hidden div end-->
<!-- displayed begin-->
<p>Intro</p>
<a class="fancy-monials" href="#read-more-1">Read more...</a><br />
<span class="source">Bob</span>
<!-- displayed begin-->
</li>
</ul>
<!-- ... -->
</body>
</html>
In other words, you use javascript to change the no-js class to js, and then use CSS to hide .js .read-more but show .no-js .read-more (or whatever your hidden element's class name may be).
Hope this helps!
So I have something like this:
<html>
<body>
<div id="jqt">
<div id="page1">
...
</div>
....
<div id="generic">
Some generic page to use as a template
</div>
</div>
</body>
</html>
and I want to create a new page on after everything is loaded and the user does some action.
$('#generic').clone().attr('id', 'some_new_page').appendTo('#jqt');
What happens is the new page ends up showing up in front of everything and doesn't seem to have and jqtouch events or styles added.
How do initialize this page (or at least have jqtouch reinitialize the whole html file)?
I don't want it to show up at first, I just wanted loaded and ready in the background.
Have you tried to do a deep clone with data and events instead?
$('#generic').clone(true, true).attr('id', 'some_new_page').appendTo('#jqt');
I don't usually deal in exclamation points, but I have hours before this goes live. I have the following page full of FBML for a Facebook tab on a product page:
<fb:fbml version="1.1">
<div id="container" style="width: 520px;">
<fb:visible-to-connection>
<div>
Yay!
<a href="{link}" style="border: 0; display:inline-block;">
<img src="{image link}" style="border: none;" />
</a>
</div>
<fb:else>
<div>
<img src="{image link}" style="border: none;" />
</div>
</fb:else>
</fb:visible-to-connection>
<div class="{a css class I have to censor}">
<img src="{image link}" />
<p class="nopurchase" style="font-family: 'Trebuchet MS Gothic', Arial; font-size: 10px;">
some text.
Click for something.</p>
</div>
</div>
</fb:fbml>
Basically it's a fan gate. To get past it the user has to like the page it resides on. It parses and renders, but for whatever reason both conditions (the div for fans, and the one for non-fans) are drawn. I have no idea why fb:visible-to-connection isn't doing this.
The answer is simple. If you are an admin of the application you are using, visible-to-connection will show you everything, regardless whether you're a fan or not. Normal users will see the expected functionality.
Yep, if you are an admin you get the trap all the time. If you go to the page with an account that is not an admin you can like the page and then see the content as expected. Thanks
Go to ACCOUNT on the top right of your screen
Click USE FACEBOOK AS PAGE
Select another page, then check your functionality - this should work