Trying to add gif images to Post in Motion theme
-
I’m using wordpress.com theme Motion and am trying to add stacked gif images using a link anchor for the main photo to a post. It works on Categorian and StumbleUpon if you want to take a look at the image under my name lin52. The code I finally settled on displays fine in the editor view but code gets stripped when I publish, and I don’t understand why or how to fix it. I am new at this. Here is the code:
<h1><span style="color: blue;">Lacey and Smokey: Wonderdogs</span></h1>
Lacey, 1994-2008, my sweet and gentle sable
and white Sheltie, like a little Lassie, faithful companion
through good times and bad. See you on the Rainbow Bridge one
day, Sweetie!Smokey, my blue merle - that's silver and white-
Shetland Sheepdog. A good boy except he enjoys terrorizing the
mailman.<center style="border: 11px groove blue; padding: 10px; background-image: url('http://i115.photobucket.com/albums/n297/neiswender/Bubbles/bubbles77.gif');">
<strong style="display: block; width: 50%; background-image: url('http://i115.photobucket.com/albums/n297/neiswender/Bubbles/bubbleBacground.gif'); border: blue 11px groove; padding: 20px;">
<img src="http://i115.photobucket.com/albums/n297/neiswender/Dogs.jpg" alt="" border="0" vspace="10" /></center>Any help will be appreciated as I have tried everything I can think of.
Lin
The blog I need help with is: (visible only to logged in users)
-
Some bits are incorrect or outdated.
Replace this:
<center
with this:
<div align="center"Replace this:
<strong
with this:
<divReplace this:
</center>
with this:
</div></div> -
That works- thank you! It only needs minor tweaks now. The photo of the dogs needs to be nudged up a little and there is a dotted line below the picture that I would like to remove. Can you tell me how to do this? I was wondering if the dotted line was for a caption perhaps.
I really appreciate the help!
Lin
-
The dotted line is showing up because you’ve got a residual link in the code. Remove these:
<a rel="nofollow">
</a>I don’t see why you think the photo “needs to be nudged up a little”: it’s already a bit higher than the middle. If anything, it needs to be nudged down.
-
That did fix the dotted line problem, thanks! Things look different in the editoir view than on the page. I see what you mean about nudging down, but nothing I have tried has done that.
Here is the code as it now stands:
<h1><span style="color: lightblue;">Lacey and Smokey: Wonderdogs</span></h1>
Lacey, 1994-2008, my sweet and gentle sable
and white Sheltie, like a little Lassie, faithful companion
through good times and bad. See you on the Rainbow Bridge one
day, Sweetie!Smokey, my blue merle - that's silver and white-
Shetland Sheepdog. A good boy except he enjoys terrorizing the
mailman.
<div style="border: 11px groove blue; background-image: url('http://i115.photobucket.com/albums/n297/neiswender/Bubbles/bubbles77.gif'); padding: 20px;" align="center">
<div style="display: block; width: 50%; background-image: url('http://i115.photobucket.com/albums/n297/neiswender/Bubbles/bubbleBacground.gif'); border: blue 11px groove; padding: 20px;"><img src="http://i115.photobucket.com/albums/n297/neiswender/Dogs.jpg" alt="" align="middle" border="0" vspace="20" /></div>
</div>Thank you for having so much patience with a beginner!
-
You’re welcome, and this code is no beginner’s stuff!
Note: To display code here correctly, you need to enclose it in backticks. But if it’s code from a published post, you don’t need to paste it: we can see your code.
And things look differently in the visual editor, because the editor is a generic tool: it’s the same no matter what theme you’re using, while each theme has a different width and different defaults for various things. So never trust the Visual editor: publish or preview the post to see the actual result.
Now, to adjust the vertical positioning of the image in relation to the inner frame, change this:
padding: 20px;
to this:
padding: 22px 20px 17px;
First number is top padding, second one is left&right, third one is bottom. -
Thanks once again. Had no clue you could combine them like that. Can you give me a quick rundown on how you figure the pixels for the padding? Just in case I want to try this with some other images so I don’t have to bug you again.
-
a) You can combine them in several ways. If you use one pixel value, it means that value for all four sides. If you use two, the first means top&bottom and the second means left&right. If you use four, they mean top/right/bottom/left. But if you don’t want to memorize all that, you can always spell them out, for example:
padding-top:22px;padding-bottom:17px;[etc.]b) Depends on the case. In this case top and bottom distances should have been equal, according to the code, but since for some reason they weren’t, I took a screenshot and compared the distances in Photoshop.
By the way, in my previous reply I neglected to mention that I was referring to the padding in the second div only, but you got that right.
-
- The topic ‘Trying to add gif images to Post in Motion theme’ is closed to new replies.
WordPress.com Forums 