Align Audio Player?
-
Yeah, how do you do it?
I did a lot of Google and forum searching, and what little I could find on this, it was all for wordpress.ORG and not for here.
Also, I tried everything I could find and everything I could think of and nothing would work. I even have Firebug and was trying to find a way to get it but… there’s a paragraph enclosure that gets added automatically (not in the RTE or HTML editor but on the page) that I can’t seem to get my custom CSS to point toward…
The blog I need help with is: (visible only to logged in users)
-
Also, do NOT suggest I wrap it in a table. I don’t know how that got so popular, but wrapping anything that’s not actually a table in table tags is SUPPOSED to be n00b 101 crap, and again, I won’t do it, it’s too much of a pain.
You would think WordPress would have given you the option to align it… *whistles nonchalantly*
-
The only thing I can suggest is to use the HTML editor and put it in Div tags like:
<div align="center"> {audio URL] </div> -
-
@disembedded: It works for text and most objects, but not for the WP audio player. The OP may consider table coding “n00b 101 crap” but the right table coding is the only way to center the player.
-
Panos has done three posts on positioning of shortcode objects which can be found here: http://wpbtips.wordpress.com/category/shortcodes/page/5/ .
-
And there you go. Ignore my previous post. Panos has just given you the answer. If you want the audio player centered, you will have to choke on a table.
-
Thanks Rich. Those posts need some updating, because the suggested codes don’t work with some of the newer themes.
-
-
Oi.
Every time I turn around, WordPress is just, disappointing me more and more.
Like, I don’t understand why I can’t and what would be so hard or bad for WordPress to allow you to wrap the audio player in any sort of
<div>or<p>or something.It’s like they purposely set it up so you can’t do it at all, which doesn’t make any sense to me.
Another thing I don’t get, I put in custom CSS to point to that specific character, or even point to the object, and I save it and it doesn’t strip my CSS, but when I load the page, it loads my CSS that points exactly to the
<p>or<object>and then after that, loads it’s own CSS for those things so that it can’t be centered.But, I guess for now, I will use a table, if it works… and it doesn’t.
I put in the code for the table, and now my audio player is invisible. >_<
-
-
-
-
-
I haven’t published the post, but I got it to not be invisible anymore.
http://metaledu.wordpress.com/?p=45&preview=true
Anyway yeah, don’t worry about it.
I mean, the player is enclosed in a
<p>tag automatically, and because of this it has a white space padding above and below it, which doesn’t work well when you’re trying to design your blog manually. I mean, I basically have two options, override the <p> for ALL paragraph tags so it was no white space then have to manually add it in, or just do nothing.Lame.
-
a) We fellow bloggers don’t have access to your dashboard.
b) Yes I know the player is automatically enclosed in a paragraph tag (and paragraphs are left-aligned by default, which is what creates the difficulty with the centering).
But no, you’ve got more options than those.The table solution would be too complicated in your case, among other reasons because default tables in Twenty Ten have visible borders, extra cell padding, and 100% width.
Easier solution: Your main column is 640px wide. The default width of the WP audio player is 290px. So you can indirectly center the player by enclosing it in a div with a (640-290)/2 left margin. And you can add negative top and bottom margins to override the p padding:<div style="margin:-18px 0 -18px 175px;"> AUDIO SHORTCODE HERE </div> -
1. I didn’t think you’d be able to see my post without it being published.
2. The Twenty Ten theme is the one I’m using on my other blog, not the blog in question, which would be http://metaledu.wordpress.com (uses Black Letterhead, but I have custom CSS)
3. I have it set up with a table and it’s working now.And most importantly:
No matter what you wrap the player in, it won’t center it, I already tried your suggestion before and that didn’t work, it just decided to move the<p> audio stuff</p>To being outside of whatever container I gave it.
Also, a better idea for centering would be:
<div style="margin:-18px auto; align: center">This makes it so that, even if you update your CSS and change the page width, the div container will still be centered, and you won’t have to go back an manually re-center all your custom/special div elements.
Also, the way I just suggested is one of two ways that for some things, you’ll have to do them that way for it to properly render on both full-screen and wide-screen monitors (where in one case, on full screen it would be fine and on wide-screen it would all be shifted to the right, or in the other case it would be fine on the wide-screen and shifted to the left on full-screen). That mainly just applies to top-level stuff though. Another option would be:
<div style="left: 50%; margin-left:-50%;>Essentially what that last one does, when you select a left alignment at 50%, that puts the left side of the div at the exact center of the page, then the next part changed the margin of the div to be negative 50% of whatever the size of the div is, so first it centers the left edge, then it moves the left edge to the left by one half its own size. This option though should only be used if you want it to be ABSOLUTELY centered, meaning if they change the size of the window, the div container moves so that it remains in the center of the viewing area.
Either way, wrapping the audio short code in ANY code at all other than a table won’t work to center it. I dried div’s and p’s that were directly controlled in the post, custom div’s and p’s that were controlled by CSS.
You can see this problem over and over again from other users who wanted to center their player, they had it like this:
(any sort of code to create a block here and center that block)
Text text text text.
Audio player
Text text text text.
(end of code to create and center block)What they noticed was that all the text above and below centered, but not the audio player.
The problem is, it gets wrapped in a paragraph element, well, let me post what it does first…
<span style="text-align:left;display:block;"> <p> <object id="audioplayer1" width="290" height="24" data="http://s-ssl.wordpress.com/wp-content/plugins/audio-player/player.swf" type="application/x-shockwave-flash"> </object> </p> </span>So, theoretically, what you SHOULD be able to do (though in practice it doesn’t work) with custom CSS:
span element.style, p element.style { text-align:center; margin stuff; }So far, at least not on my template, I haven’t seen a case where a paragraph element was wrapped in a span, but this couldn’t work for all users. Well, it doesn’t even really work so it doesn’t matter.
-
Theory that doesn’t apply to your blog simply doesn’t apply to your blog. Your blog doesn’t work according to your theory. So you have the choice of throwing out the blog and starting again or throwing out the theory and starting again.
WordPress.COM is different from WordPress.ORG and you must have different expectations for them. If you really insist on a blog that works like WordPress.ORG, you will have to move to WordPress.ORG.
-
I’ve never once ever used WordPress.ORG to know how it works.
I purchased a custom CSS upgrade, therefore, if my code is allowable, (which it strips it if it’s not, and it doesn’t strip this), then it should work.
I’m not flushing $50 down the toilet just to start over and have to pay another $50 on a different site from the same company, especially after in my search for answers about the audio player, I discovered that YOU CAN’T CENTER IT ON WordPress.ORG either, at least not by any way other than making this table.
So moving to .ORG won’t change anything.
And I don’t expect much, or at least anything I don’t consider unreasonable.
Expectation 1: easy blogging – check (sort of, some things are a little well, we’ll not go there).
Expectation 2: being able to totally customize my blog layout and design in ALL facets after paying $30 for the custom CSS upgrade (sans any sort of scripting).That’s not expecting much. It’s not like I’m expecting to be able to set up a powerful e-commerce store on a wordpress.com blog and become a billionaire and put in a bunch of .php this and that crap.
-
No, the CSS upgrade documents SPECIFICALLY say that the CSS editing capacity is limited.
Most of this feedback should be directed to staff, as we volunteers in the forum can’t make the changes you want anyway.
And blogging here is easy. Design and formatting are not.
TOTAL design control is simply not an option here, no matter what. Take that up with staff; it’s the tradeoff you pay for security and tech support.
- The topic ‘Align Audio Player?’ is closed to new replies.
WordPress.com Forums 