0

I have a tumblr site (portfolio) and would like to have a custom footer plus randomize the order of the posts. Somehow I cannot successfully do any of these things. I am editing the HTML of this theme I was trying something like this Html code for displaying posts in random order for randomizing posts order.

Then for a custom footer I've tried creating this style:

.footer{
  height: 125px;
  background-image: url(https://preview.ibb.co/njBged/clients_and_collaborations2.png);
  background-size: 100% 100%;
  color: {color:Text};
}
<div id="footer"></div>

But none of the above seems to work. Are there some limitation with Tumblr and themes?

Maybe some of you guys could point me to the right direction. Cheers!

My site: http://mantaspalaima.com

Pol
  • 1,132
  • 1
  • 11
  • 35
Mantas Palaima
  • 1

2 Answers2

0

I think both of your troubles here share a common root! The CSS selectors you're using con't match the HTML elements you mean for them to work on.

Footer

Regarding your footer styling, the CSS selector you're using to target the footer element is close, but not quite right!

.footer will target an HTML element with a class of footer. Something like <div class="footer"></div>.

#footer will target an HTML element with an id of footer. Something like <div id="footer"></div>.

So, change one or the other such that the CSS selector matches what's in the HTML document.

Random Posts

I can see that you're targeting an HTML element with a class of .entry with that javascript snippet you're using. the ".entry" part of the snippet in the question you linked.

{block:IndexPage}
<script>
    $(document).ready(function (name) {
        return function () {
            var elts = $(name);
            var max = elts.length;
            $.each(elts, function (index, elt) {
                var randPos = Math.floor(Math.random() * (max - 0 + 1) + 0);
                $(elt).insertBefore(elts[randPos]);
            })
            return ;
        }
    }(".entry")) // <-- THIS LINE!
</script>
{/block:IndexPage}

Looking at some of the code on your page, here's an example of an analogous element that I see:

<article id="ant-175268574147" class=" ants-item-three post modal post-photoset pp" ...>...</article>

And if you'd like to target that, you could use a CSS selector like this: article.post. That translates basically, to <article></article> elements with a class of post.

A word of warning, though, it looks like your theme uses something called isotope to lay out the posts grid. You'll want to add your javascript BEFORE lines like

$antsIsoCont = $('#stash-ants');
antsIsotope = $antsIsoCont.imagesLoaded(function(){
// ...

To be sure that you're not trying to move around elements that have already been absolutely positioned.

Cameron Hurd
  • 4,836
  • 1
  • 22
  • 31
  • Thanks! The footer was an easy (silly me). I also applied margins to position it right. But the random post is still won't work. I've put the script before all $antsIsoCont but then posts became blank. I am still trying out this. – Mantas Palaima Jul 02 '18 at 20:43
  • Anything in your browser's console that you could share? An error, I mean? – Cameron Hurd Jul 03 '18 at 12:53
  • So I have misplaced the code and it conflicts with the rest of it. Sure thing, here are the errors: https://ibb.co/byYnmd To be clear - I am using the code with article.post instead of .entry Thanks again. – Mantas Palaima Jul 05 '18 at 17:57
  • Looks like you don't have jQuery installed. https://stackoverflow.com/questions/1458349/installing-jquery – Cameron Hurd Jul 05 '18 at 20:41
0

A major css problem which I observe in your code is that you are referring to the footer css class in the css script but you haven't added that class to the div.

Read CSS Selector Reference to gain more knowledge about basic CSS.

  • Change CSS code from .footer to #footer.

OR

  • Add class='footer' to the <div>.

#footer{
  height: 125px;
  background-image: url(https://preview.ibb.co/njBged/clients_and_collaborations2.png);
  background-size: 100% 100%;
  color: {color:Text};
}
<div id="footer"></div>
Roshana Pitigala
  • 8,437
  • 8
  • 49
  • 80