CODEWITHSUNDEEP
htmlcssthemestumblr
user2498890
user2498890

Reputation: 1556

Remove CSS from an element when that element isn't available in a Tumblr theme?

I'm building a tumblr theme and have padding applied to my list of notes on the permalink page.

When the list of notes is enabled and there are reblogs/likes for the post it displays the list as intended with padding top and bottom. My issue is when the list of notes is enabled but there are no notes for that post the gap created by the padding is still visible so its creating a gap that shouldn't be there.

I wondered if there is a solution to this? I'm pretty sure there must be, but I just can't get my head around it.

An example of the gap being created is here between the like/reblog buttons and the disqus box.

http://minori-theme.tumblr.com/post/104674196686/melbourne-based-photographer-brooke-holms

HTML

{block:IfShowNotesList}
 {block:PermalinkPage}
<div class="f-all e-all d-all b-all a-all">
    <section class="f2-f4 e2-e4 d3-d4 b4-b5 a4-a5">
                <ul class="postListNotes">
            {block:PostNotes}
                {PostNotes}
            {/block:PostNotes}
                </ul>
    </section>
</div>
{/block:PermalinkPage}
{/block:IfShowNotesList}

CSS

{block:IfShowNotesList}
    ul.postListNotes {padding-top: 50px; padding-bottom: 80px;}
{/block:IfShowNotesList}

Upvotes: 0

Views: 263

Answers (2)

fregante
fregante

Reputation: 31718

{block:****} tags are created exactly for this purpose: to display markup only when **** exists.

Use this code to hide the ul element if there are no notes to display:

{block:PostNotes}
    <ul class="postListNotes">
        {PostNotes}
    </ul>
{/block:PostNotes}

You can hide the rest of the elements too:

{block:IfShowNotesList}
    {block:PostNotes}
        {block:PermalinkPage}
        <div class="f-all e-all d-all b-all a-all">
            <section class="f2-f4 e2-e4 d3-d4 b4-b5 a4-a5">
                <ul class="postListNotes">
                    {PostNotes}
                </ul>
            </section>
        </div>
        {/block:PermalinkPage}
    {/block:PostNotes}
{/block:IfShowNotesList}

Upvotes: 2

kapantzak
kapantzak

Reputation: 11750

enter image description hereUse the empty CSS3 property:

ul.postListNotes:empty {
    padding: 0;        
}

or even:

ul.postListNotes:empty {
    display: none;
}

If the code:

{block:PostNotes}
{PostNotes}
{/block:PostNotes}

produces anything else of blank or html comments, the :empty selector will not work

In this case, if you can, apply a class, let's say .noNotes on ul.postListNotes every time there are no notes to display and use this rule:

EDIT

ul.postListNotes.noNotes {
    padding: 0!important;
}

Upvotes: 0

Related Questions