Help with inline CSS for display-posts?
-
Wondering if anyone can help me figure out the inline css to use with display-posts shortcodes?
At the above mentioned link, there is a CSS code to float images to right, left and center.
.display-posts-listing .listing-item { clear: both; } .display-posts-listing img { float: left; margin: 0 10px 10px 0; }I need to know if above is achievable as inline CSS since I don’t have custom upgrade (not planning to buy one just for this).
Thanks.
The blog I need help with is: (visible only to logged in users)
-
As the display short codes support document you mentioned says:
In order to get the image floating to the left, add this to your custom CSS file (requires the Custom Design upgrade):
So Custom Design upgrade is indeed required.
-
-
Thank you @timethief. Hope you had a good day and a great Christmas :-)
It is 12:07 pm Saturday here and I can’t wait to answer few more questions later today :-)
-
Well, I was asked to submit this here by the staff, just to see if someone may know a way around through inline. I understand that custom CSS upgrade may be required, but hoping there is an inline option?
-
@ismailimail, I have one idea on this. Can you point me to a page that I can have a look at that uses the display posts shortcode? Even an unpublished page would be fine.
-
Almost all of my recent posts (published) are using display-posts at the bottom. I am currently working on/experimenting with the same on an unpublished post (post=108804).
-
Ok, I see you have put them all into a table. Can you explain what you are trying to achieve with alignment? Are you wanting all of the titles in the cells of your table to be top aligned?
-
I am actually looking for a solution without the tables.
I learned (through support conversation) that the tables are the cause of my images bleeding to the right on Firefox browser for smaller screens (they work fine on Chrome and other browsers as they scale properly, depending on the size of the screen). However, this is not really a big problem I am trying to solve.
I am trying to find a solution where I no longer have to use the table code. I want to use the display-post code as is without employing the table code.
The display-post code on its own – with images – work fine if I use the custom design CSS solution (mentioned above). I plugged in the CSS code (mentioned above) into my CSS custom design section, and it flushed the text appropriately next to the image (by top-aligning it). Without the custom design upgrade solution, the text and image do not align well (as described in the display-post support document).
I am trying to see if I can achieve the same result with inline CSS (since I don’t have custom design upgrade).
-
Just to help clarify this, below are couple of examples.
Example#1
This is how display-post code looks without css custom upgrade.Example#2
This is how it looks WITH the css custom upgrade.In both of the above examples, I am using display-post code without table code.
I am looking for a possible solution which would let me achieve the example#2 without purchasing custom upgrade, through inline CSS (if possible).
-
@ismailimail, I’ve tried a few things, and I have not been able to set a float left so that the title and/or excerpt aligns at the top of the image. I’ve filed an enhancement request for the display-posts shortcode and hopefully the alignment issue will be addressed. I have no idea on a timetable on this or even if it will be addressed, but let’s hope it will.
-
@thesacredpath, great, and thank you.
Along the similar lines, I have this thread open for a very long time. The Expound theme can use a better related post solution, just like what many other themes enjoy.
-
It has a trac ticket for implementation, but I can’t say when it will be done. I’ve posted a comment on it just now to see what I can find out. I’ll post in the other thread when I find out anything.
And you are welcome.
-
Hello. I’d like to follow up to let you know the display posts shortcode styling has been updated. There is still not an update for the Expound theme related posts function—that one may not get looked into for a while because it is working in the capacity it was when the theme was launched and so other work will likely take higher priority over an update to something like that.
-
@designsimply, this is great news. Thank you. i see that the image is floating right by default. Would I be able to float it to left? If yes, how? I’m using this:
[display-posts id="102202" image_size="thumbnail" wrapper="div" posts_per_page="1"] -
@designsimply, I have another feedback on this along with above question.
I used the above code with the addition of “include_excerpt=”true”” and the result of it in the email (the blog post as it is sent out) at least on gmail, is not as same as how it looks on the blog.
On the email, the image floats to left and the excerpt text gets dropped to the bottom.
Hopefully, you guys will look into it to make it consistent. Thanks.
-
i see that the image is floating right by default. Would I be able to float it to left? If yes, how?
I reviewed the ticket, and it looks to me like floating the images right by default for LTR languages was an intentional design decision because the display posts shortcode shows items in a list by default and typically images in bulleted lists look nicer when the image floats to the right. Of course, this depends a bit on how the theme styling is setup as well as the length of the excerpts in the content on the site, so it really could go either way and changing the preference for some people might be one way compared to another. My guess is that, when the change was made, it was thought that right-aligning the images would cover more scenarios and make it look better in more themes overall. Does this make sense? Would you argue against my read on it?
On the email, the image floats to left and the excerpt text gets dropped to the bottom.
Email layout will not always match the site content exactly. This is expected because WordPress.com emails have their own styling that is separate and minimal. I believe this is done because of the very large number of email clients how differently they may each display content. I think there are considerations for efficiency and volume as well. If you were to add a lot of CSS to the email template to cover various exceptions like this one, those could really start adding up and begin to affect performance negatively. I think WordPress.com sends enough volume of email for it to be a major consideration and a more simplified layout without adding extra CSS is how the development will lean.
-
WRT the image floating. I guess I can live with that. It is just so that it gets boring and repetitive after a while. An option to float left or right would be nice. I am not a fan of the combination of lists with images. They never really look good under any scenario. So to me, div wrapper, which gets rid of the bullet, is only suitable if there is an image. Please see if you can have an internal conversation on the possibility of providing an option to bloggers to make that choice of floating images left or right.
WRT the email styling. I guess you are right and there is no choice here. Thanks.
-
- The topic ‘Help with inline CSS for display-posts?’ is closed to new replies.
WordPress.com Forums 
