you're reading:
Alignment, Audio player, Galleries, Html & inline css codes, Shortcodes, Text-wrap, Videos

Changing the default positioning of shortcode objects (pt. 3)

http://wpbtips.wordpress.com/

[Updated April 2013.] [Pt.1 here; pt.2 here.]

Adjusting gallery column distance

<div class="aligncenter" style="width:60%;">
SHORTCODE HERE
</div>

The width number is an example – adjust it till the columns get the distance you prefer.

Audio player with text (e.g. track title) by its side

<div style="float:left;width:30%;">
TEXT HERE
</div>
<div style="float:left;width:70%;">
SHORTCODE HERE
</div>

Change the percentages to adjust the space between text and player.

Example:

Bloodflowers (Cure)

Two videos side by side

On most themes they won’t fit, so first you need to downsize them.

Shortcode for youtube videos:

[youtube=VIDEO URL HERE&w=WIDTH NUMBER HERE]

Shortcode for vimeo videos:

[vimeo http://vimeo.com/VIDEO NUMBER HERE w=WIDTH NUMBER HERE]

Then you use this code:

<div style="float:left;width:auto;margin-right:14px;">
SHORTCODE1 HERE
</div>
<div style="float:left;width:auto;">
SHORTCODE2 HERE
</div>
<div style="clear:both;height:1em;"></div>

Change the margin number to adjust the space between the two videos.

Example:

If you want the two videos centered instead of left aligned, use this code:

<div style="width:TOTALpx;margin:auto;">
<div style="float:left;width:auto;margin-right:7px;">
SHORTCODE1 HERE
</div>
<div style="float:left;width:auto;margin-left:7px;">
SHORTCODE2 HERE
</div>
</div>
<div style="clear:both;height:1em;"></div>

Replace “TOTAL” with the right number (video1 width + video2 width + margins).

Example:

http://wpbtips.wordpress.com/

Please don’t paste code in comments – see comment guidelines.
About these ads

Discussion

32 thoughts on “Changing the default positioning of shortcode objects (pt. 3)

  1. “Llorona” is so spooky it gave me goosebumps and I had to find out what the words mean. A scary story, that.

    In fact all your selections here are very dramatic. (I’ve learned some restraint ≥^,^≤)

    Posted by Tess | May 2, 2009, 18:19
  2. Most otherworldly performance I know. You know la Llorona is supposed to be a ghost; Vargas here is like a ghost herself. I also like the way she turns and walks away at the end, knowing she’s just delivered an experience. To me, the best rendering of this song ever – unsurpassable.

    (I think I’ll make another “irrelevant” post, with the lyrics and the translation…)

    Posted by Panos | May 3, 2009, 17:47
  3. Thank you for the very useful tips! How are you using the audio shortcode to put an actual name in the textbox of the audio player? Yours has the artist and track title, mine only has “File #1″ when I try it. Thanks again!

    Posted by coffeesash | May 9, 2009, 12:37
  4. Hi! I was going to do a post on that anyway, so please wait a little, I’ll do it today!

    Posted by Panos | May 9, 2009, 18:49
  5. Sorry, I changed my mind – I want to present some other things first. The code for that is:

    [audio URL_HERE|titles=TITLE_HERE|artists=ARTIST_HERE]

    Posted by Panos | May 9, 2009, 21:30
  6. re: http://wpbtips.wordpress.com/2009/04/30/positioning-shortcode-objects-pt-3/#comment-79
    Yes—a ghost whose longing for love has become vengeful, and that performance makes me feel its/her pain. I’ve come back here to watch it many times, and it’s fresh every time. You said it better, that performance is an experience.

    Google translate doesn’t go far to make the words real.

    Posted by Tess | May 11, 2009, 18:10
  7. Ok, I’ll post a translation tonight! In the meantime read this:

    http://www.literacynet.org/lp/hperspectives/llorona.html

    Posted by Panos | May 11, 2009, 18:26
  8. Thanks for the code, Panos, it’ll come in very handy!

    Posted by coffeesash | May 11, 2009, 18:41
  9. Very good. That story has much more detail than any I was able to find. Thank you.

    Posted by Tess | May 11, 2009, 22:58
  10. I’ve seen some blogs have the audio widget ‘unfolded’, that would be really useful so as not to ahve to label it, and really just having to call attention to it too :) I guess it’s yet another undocumented feature!

    Posted by coffeesash | May 14, 2009, 18:17
  11. @coffeesash: Undocumented in the wp Support page, that is. Because that page is a direct transfer from the older FAQs, and refers to the previous version of the player. For the “unfolded” version of the new player, you add this to the shortcode:

    |animation=no

    Posted by Panos | May 14, 2009, 23:00
  12. You’re an angel <3 That’s exactly what I needed!

    Posted by coffeesash | May 14, 2009, 23:06
  13. Llorona is missing.

    Posted by Tess | November 4, 2009, 19:00
  14. I know, I know… Makes me regret not having downloaded it…

    Posted by Panos | November 5, 2009, 11:15
  15. can I add borders to these? like those that appear on my pictures?

    Posted by zdueck | February 14, 2012, 07:21
  16. Also, I can’t find a post for this on your site, so this is either a suggestion for a future post, or a request for help… can I make my ‘more tag’ not take my readers to the middle of the new page when they click it?

    Posted by zdueck | February 14, 2012, 07:26
  17. a) Please be more precise: borders to what exactly? Better post an example and show me what you mean.

    b) No, by definition: read more = read the rest.

    Posted by Panos | February 14, 2012, 19:45
  18. a) like on my blog, when I post a picture (as in the most recent post) there is a grey border around the picture, and I thought it might look nice to post that same border around these videos I’m trying to place side by side.

    b) but why can’t they read the rest without the scroll down feature? I just don’t get that.

    Posted by zdueck | February 14, 2012, 20:04
  19. tonaldiscord.wordpress.com

    Posted by zdueck | February 14, 2012, 20:05
  20. I mean publish the videos so I can see the result and tell you how to modify it. Also, one border enclosing both videos, or each video enclosed in its own border?

    Posted by Panos | February 14, 2012, 20:10
  21. Each in their own I guess

    SHORTCODE1 HERE

    SHORTCODE2 HERE

    That’s the code I’m currently using, but I really do not like posting until I have it looking exactly like I want it, like how would you do it for your blog… I’m pretty good at adapting once I have the code in front of me.

    Posted by zdueck | February 14, 2012, 20:15
  22. oh right… I guess code doesn’t show up properly… just pretend all the ()’s are actually ‘s

    (table align=”center”)(tr)(td)
    SHORTCODE1 HERE
    (/td)(td)
    SHORTCODE2 HERE
    (/td)(/tr)(/table)

    Posted by zdueck | February 14, 2012, 20:17
  23. ()’s are actually those triangle brackets since I apparently can’t even type them without code in between them

    Posted by zdueck | February 14, 2012, 20:18
  24. I basically have it looking almost identical to your example but with different videos

    Posted by zdueck | February 14, 2012, 20:19
  25. I don’t believe this. I’m asking you to publish the thing so I can see exactly what you have inserted (type of video, dimensions) and tailor a solution accordingly, and you’re trying to show me the basic code you copied from my own post? Please don’t bother me with this anymore: you can do without borders.

    Posted by Panos | February 15, 2012, 07:30
  26. Sorry, I didn’t mean to bother you (I actually thought I was trying to save you time)… I’ll keep experimenting, but I just don’t believe in posting un-finished products. It seems unprofessional and sloppy, to say the least. If that is a necessity to recommending something for your readers to try then I guess I’ll have to find somewhere else interested in sparking that creative imagination (and again, I’m good with tinkering, even if it was as simple as ‘here’s how to add a colored border without affecting your video’ I could have worked with that). I am not and never was asking you to code for me, that seems like too much work to ask of a stranger and lazy on my part. I naturally assumed with all this knowledge that you would probably have at least an idea of how to add a border to a tabled video. But if it’s too frustrating for you to just recommend what you would do without going into the coding of my site and spending all the time figuring out exactly how to tailor what I’m trying to do for me… Then I guess I’ll go elsewhere… It’s a shame too, you were really informative. I was starting to really enjoy your site and getting excited about all the things I could do in wordpress.

    Sorry to have offended you, I guess I’m just not your typical reader.

    Posted by zdueck | February 15, 2012, 21:19
  27. • Nice try, but if I am “informative” present tense I don’t become informative past tense because you were annoyed.
    • My blog is all about tips and advice. But helping users is one thing, wasting time is another. Trying to show me the very code you got from my post isn’t “offending”, it’s an absurdity that simply wastes both your time and mine.
    • The other videos you have posted don’t have any borders around them, so temporarily posting that pair of videos the same way wouldn’t look like an “un-finished product”.
    • If you had asked about borders around images, I would have given you the standard bit of coding that does the job. But videos aren’t supposed to have borders around them, so you’re asking for a complicated workaround. I don’t give workarounds for something I’m not seeing. Like you, I don’t want to be “unprofessional and sloppy”: I give precise solutions to specific problems.
    • What you were looking for can be done in a variety of ways, and the right way depends on the type of video, the dimensions you’ve set, the dimensions in relation to the total width of your main column, and the rest of the content (if any). Contrary to what you think, the way I wanted it would be faster for me than the way you wanted it, because it would save me from adding details you don’t need, or omitting details you do need and then have to answer follow-up questions or provide alternative solutions.
    • And anyway when you ask for help, and you ask it to someone who is both experienced and under no obligation to help you whatsoever, you don’t set the terms, he does.

    In short, my apologies for actually wanting to “code for you” instead of “just recommending” a generic solution that might prove to be a mediocre one. Byebye.

    Posted by Panos | February 17, 2012, 02:12
  28. 1) First off, I wasn’t annoyed… I thought I had done something to offend you as I assumed you would not have reacted to rudely had I not. I was therefor legitimately apologetic, although with all those quotations in your last line I’m not 100% sure if yours was as sincere.
    2) I never said you were informative past tense. What I said (or was trying to say) was that what I had learned here was informative, but if you weren’t willing or able to help me that I would look for my solution elsewhere.
    3) Here’s what happened;
    – I asked if something was possible
    – you said yes and asked what I was attempting to do and if you could see it
    – since I had not yet posted it I tried to be more specific like you asked
    – apparently I wasn’t quite specific enough and you asked if I could post it
    – I’m pretty sure I told you in a different thread that I didn’t post unfinished products (though it’s possible I’m wrong there as this is not the only place I’ve looked for this solution) so I thought I’d try and explain what I’ve done so far because since I was pretty sure I had I said that I’m not one to post unfinished products.
    – You tore into me when all that was necessary was “I’m sorry, but if you aren’t willing to post this for me to see then I am unable to help you.” No need for all that other attitude all that was necessary was a simple ‘can’t help you’.
    I am sorry in that I thought I had said in this thread somewhere that I don’t post stuff before it’s finished, but even if I did neglect to post that it certainly did not warrant the response you gave. Showing you the code was my attempt to show you where I was coming from, I had again assumed more of you that I maybe should have (though I’m always one to assume more of people/give the benefit of the doubt until proven wrong) that by seeing which of the examples I had strung together that you might be more capable of suggesting something.
    4) I never said the videos were the reason it was an unfinished product. I’m currently at about 1000 words out of what’s looking like it will be a 1500-2000 word post. I tinker with things as I write out of boredom, but that doesn’t mean it’s ready to post or that what I am asking you about is the only thing preventing me from finishing.
    5) Videos also aren’t supposed to be next to each other in wordpress either… they are both complicated workarounds, if I am interested in one workaround, why is it such a stretch to think I’d be interested in another. I respect that you don’t wish to be unprofessional and again is all you’d have had to say instead of the rude little comment that lead to this little exchange.
    6) Sorry to have assumed something about code that apparently I did not know. I figured that based on the examples above it would be the same solution regardless what kind of video I had posted… that being said I also thought that by informing you that it currently appeared identical to yours (i.e. same type and size of video) would give you an idea of what I had done.
    7) By this point I think we’ve wasted about as much time as all your rationals would have saved, but the reason I didn’t want you to tell me exactly what to do to make it look as I wanted is that I want to know how what I am doing works, I like experimenting with variables and whatnot to make things look that way I want them to look instead of having the final solution given to me so that if I ever have other ideas that require a tweak I know what it is I need to tweak having already experimented with the rest of the problem. You saying ‘here’s what you need to type to get that looking like you want it’ would not have allowed me that experimentation. But you didn’t know that, so again I am sorry for assuming too much.
    8) I never said you were under obligation to help, in fact the second you said you wouldn’t help me I said I would take my problems elsewhere and not once did I continue to prompt you to help with my problem, nor did I utter a word of complaint (although I may have given a suggestion for future reference, which was not meant as a complaint if that’s how you interpreted it). I never expect people to help me, but I also never shy away from asking… otherwise I’d never learn.

    So if that was a legitimate apology, Thank You. Just as a heads up though, the quotes make it come off a little sarcastic. And if it wasn’t… That doesn’t change the fact that I tend to give the benefit of the doubt whenever I can, so until you prove me wrong I’ll assume it was.

    Good-bye

    Posted by zdueck | February 17, 2012, 04:03
  29. Also, sorry for all the typos up there… longer comments screw with my dyslexia and I don’t really proof read comments as carefully as I do my posts.

    Posted by zdueck | February 17, 2012, 04:32
  30. What happened is that instead of what I asked you tried to show me the code that’s right there on my post, which is absurd as absurd can be. This pissed me off, and my response was my candid reaction. It’s my blog, you know: I have no reason to play polite if I don’t feel like it (or provide the exact variety of help you would have preferred). You should save your remarks for when you are a customer.

    If the unfinished thing you didn’t want to publish was the text, you could have said so in time, and I would have told you how to post the part I wanted to check in a temporary page that other visitors wouldn’t see.

    And no, the quotation marks weren’t sarcastic: they are used when you repeat someone else’s words, you know. I repeated your phrases because “code for you” was exactly what I was willing to do (as I have done for lots of other users, both here and in the wp.com forums).

    Posted by Panos | February 19, 2012, 08:11

Trackbacks/Pingbacks

  1. Pingback: Side by Side « Tess’s Japanese Kitchen - May 13, 2009

  2. Pingback: How to embed Youtube videos side by side in one row on WordPress? | GREG LEWICKI - September 24, 2014

Author

author's avatar panos (justpi)

 Subject Index

Announcement 22/03/2012: After WP's latest move, this blog will no longer offer active support and assistance. The blog will remain online but commenting on older posts has been disabled.
✶ All theme-related posts are updated up to and including theme 189 in this list, but will not continue to be updated.

Stats

  • 2,548,710 views
  • Views per month:
Safari Icon Firefox - Never Internet Explorer
Note: if you see ads on this site, they are placed by WordPress, not me.
wpbtips.wordpress.com
Mostly on themes, formatting, coding, tweaks and workarounds.
Based on or springing from my contributing in the wp.com forum.
Theme-related posts constantly updated
Premium themes and Annotum not included
%d bloggers like this: