creating a tumblr theme - audio posts don't show on blog - css

I'm creating a new tumblr theme (I'm almost finished actually). The only problem I'm running into (and I ran into the same problem on the last theme I made) is that no matter how I format an audio post, it will not show up on my blog. My formatted audio posts how up both on the dashboard, and on the customize theme page.
I saw that audio/video posts sometimes have a problem with infinite scroll, so I removed all of my scripts. Audio posts still don't show up.
This is the code I have for the audio post:
{block:Audio}
<div id="post">
{block:AudioPlayer}
<div id="audioplayer">
{AudioPlayerBlack}
</div>
{/block:AudioPlayer}
<div id="albumart">
{block:AlbumArt}
<img src="{AlbumArtURL}">
{/block:AlbumArt}
</div>
</div>
{/block:Audio}
this is the css for those divs (in case that's the problem)
#post
{
float: left;
padding: 5px;
margin: 4px;
background-color: {color:Post Background};
width: 215px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
-khtml-border-radius: 7px;
border-radius: 7px;
box-shadow: 2px 2px 4px {color:Post Shadow};
}
#albumart
{
margin: 3px;
margin-bottom: 2px;
width:207px;
height: 207px;
border: 1px solid {color:Border Color};
overflow: hidden;
}
#audioplayer
{
width:25px;
height:25px;
overflow:hidden;
position:absolute;
margin-top:100px;
margin-left:100px;
-moz-border-radius: 18px;
-webkit-border-radius: 18px;
-khtml-border-radius: 18px;
border-radius: 18px;
opacity:0.75;
border:5px solid black;
}
You can see it here: smash-howard.tumblr.com

Since this hasn't been updated with answer and I had a similar problem, here's what needed to be done:
{block:Posts}
...
{block:Audio}
{block:AudioEmbed}
<div class="audio-embed">
{AudioEmbed-400}
</div>
{/block:AudioEmbed}
{block:AudioPlayer}
<div class="audio-player">
{AudioPlayerBlack}
</div>
{/block:AudioPlayer}
{/block:Audio}
...
{/block:Posts}
This way you're accounting for both possible audio post scenarios: audio embed and the audio player. Only accounting for one will cause the other to not show, which is what was happening in this case.

Related

Custom CSS scroll bar only work on chrome

I have been working on a project that involves custom scroll bar here is the code
.scrollbar
{
margin-left: 30px;
float: left;
height: 300px;
width: 65px;
background: #F5F5F5;
overflow-y: scroll;
margin-bottom: 25px;
}
.force-overflow
{
min-height: 450px;
}
#style-2::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
#style-2::-webkit-scrollbar
{
width: 12px;
background-color: #F5F5F5;
}
#style-2::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #D62929;
}
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<body id="main">
<div class="scrollbar" id="style-2">
<div class="force-overflow"></div>
</div>
</body>
the problem is it is only working on chrome how can i make it work on every browser. i have searched all over the internet but still cannot fine any reliable solution.thanks in advance
Sorry friend firfox, Opera Mini & Edge not supported scrollbarstyle
YOU can check it here
check it
-WebKit- applies to Chrome and safari, not sure if other browsers support custom scroll bars but I think they don't

Why is my header background/color not displaying?

I have no clue what's causing this, the last thing I modified was my footer and I verified, it wasn't that. So as I have no clue what's causing this I don't know how to show you my code. I don't know if the error is in CSS or HTML, I might have to show you both but they both have 100+ lines. For now I'm gonna put the footer and header CSS code here.
footer
{
box-shadow: 0px 0px 30px gray;
font-family:arial;
margin-right: -10px;
margin-left: -10px;
margin-bottom: -20px;
background-color: #a8a8a8;
}
header
{
background-color: red;
margin-top:-10px;
margin-left:-10px;
margin-right:-10px;
margin-bottom:-20px;
box-shadow: 0px 0px 25px black;
}
In your test.psichologique.com demo, your styles are failing because you have HTML comments in your style sheet. Change this syntax—
<!-- CSS CODE -->
to this
/* CSS CODE */
and your styles will work.

Placement of Close Button on DIV using CSS

I am trying to set the position of a close button over a div and cant get it to the top right hand side. I have read many of the Stack articles relating to this but cant get this working.
Is anyone able to assist?
http://jsfiddle.net/grantfeldman/K4p6g/1
<div class="tag">
<a class="closeButton"></a>
Foo
</div>
div.tag
{
color: #EEE;
font-size: 15px;
font-family: Georgia, Times, serif;
display: inline-block;
border: 2px solid #324566;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
background-color: #283957;
padding: 8px;
margin: 5px;
}
.closeButton
{
display:block;
float:right;
width:27px;
height:27px;
background:url('http://cdn-sg1.pgimgs.com/images/pg/close-button.png') no-repeat center center;
}
Working Fiddle: http://jsfiddle.net/K4p6g/2/
Needed changes:
#divMyTags div.existingTag
{
position: relative;
}
.closeButton
{
display:block;
position:absolute;
top:-10px;
right:-10px;
}
This absolutely positions the close button relative to its parent.
Quick update for another requirement in your comment:
http://jsfiddle.net/K4p6g/5/
Note that it's a quick update using jQuery, but it should give you the idea. If you're already using jQuery in your project then you're good with this.
I just changed some things, have a look
#divMyTags div.existingTag
{
color: #EEE;
font-size: 15px;
font-family: Georgia, Times, serif;
display: inline-block;
border: 2px solid #324566;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
background-color: #283957;
**padding: 0px**;
margin: 5px;
}
**#divMyTags .theText
{
margin:10px;
}**
Updated sources here : http://jsfiddle.net/K4p6g/4/

IE8 CSS - background box sits on top of my text

This is how my css looks like:
.rounded-box{
border-radius: 5px;
background-color: #e4f4fd;
font-size: 16px;
margin-top: 18px;
border: 1px solid #dedef7;
padding: 18px;
text-shadow: 1px 1px 0 white;
display: inline-block;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
h3 {
text-shadow: 1px 1px 0 white;
margin: 10px;
}
And this is how my html looks like:
<div class="rounded-box">
<h3>some text here</h3>
<h3>some text here</h3>
</div>
For some reason in IE8 (haven't tested it yet in other IEs) the rounded-box sits on top of the text. When I load the page a see for a fraction of the second my text then the rounded box covers the text.
(All the other browsers display the text as I intended on top of the rounded-box)
Any ides?
The problem was with jquery.curvycorners.min.js. When I eliminated it from my HTML page the problem went way.
On top of that it eliminated a problem I had in another page where I had a text field that would not show up in IE 8.

How to fix CSS float issues in IE6 and IE7?

I am talking about the "Previous" and "Next" post navigation links below the articles on my website, which look like this (below) in all modern browsers (IE > 7)
But in IE6 and IE7, it looks like this
Yes, the rest of my website looks very fine in these browsers as well, and want to get this to work, and without breaking anything else. I see that IE6 and IE7 can have float issues, and that there's a fix as well (a working one, I couldn't find).
This is the HTML code pertaining to the post navigation (mentioned above):
<div class="post-entries">
<div class="nav-prev fl"><span class="meta-nav">?</span> LG's A530 3D Notebook Shoots And Plays In 3D [PICS]</div>
<div class="nav-next fr">LG's Mouse Scanner Saves Scanned Material To Image, PDF or DOC <span class="meta-nav">?</span></div>
<div class="fix"></div>
</div>
and here's the CSS code pertaining to the above:
.post-entries { clear:both; margin-top:20px; background-color: #F8F8F8; border-bottom: 1px dashed #AAAAAA; border-top: 1px dashed #AAAAAA; line-height: 1.7; margin-bottom: 15px; padding: 5px 10px; font-weight: bold; font-size: 1.1em; }
.post-entries a:link, .post-entries a:visited { font-size:0.9em; color:#888; }
.fl{float: left;}
.fr{float: right;}
.fix{clear: both;height: 1px;margin: -1px 0 0;overflow: hidden;}
I hope I am clear. Can someone help me out with this?
How about this? Added css:
/*.post-entries{float:left;width:600px}*/
.nav-prev,.nev-next{display:block;width:100%}
Updated fiddle: http://jsfiddle.net/y3MBC/14/
I think if you just add a <div style="clear:left;></div> in between the two divs it will format the way you want. I tested it in ie7 but don't have an effective way of testing for ie6. Here's the updated fiddle: http://jsfiddle.net/D3Jja/
Looks like you haven't specified a width for the div's. Try this:
.fl{float: left; width: 100%}
.fr{float: right; width: 100%}
Also if you plan on using margin/padding add a display: inline to your floated elements to prevent old IE from doubling the amount of margin/padding.
Thanks to #marissa.c for the help, this is the answer...
modify this line:
.post-entries { clear:both; margin-top:20px; background-color: #F8F8F8; border-bottom: 1px dashed #AAAAAA; border-top: 1px dashed #AAAAAA; line-height: 1.7; margin-bottom: 15px; padding: 5px 10px; font-weight: bold; font-size: 1.1em; }
to his:
.post-entries { clear:both; margin-top:20px; background-color: #F8F8F8; border-bottom: 1px dashed #AAAAAA; border-top: 1px dashed #AAAAAA; line-height: 1.7; margin-bottom: 15px; padding: 5px 10px; font-weight: bold; font-size: 1.1em; height: 100%; }
And then add this line:
.nav-prev, .nev-next { display:block; width:100%; }
And that fixes the float issues. It now even works in IE6, all credit to #marissa.c

Resources