Plugin Author
Ajay
(@ajay)
You can try changing the Location of post thumbnail to “after title”
I realized one of my problems was that I hadn’t updated your widget. Now using firebug I can actually see tptn_title on my page. So that’s a start haha.
What I’m looking to do is make the title tag 300 pixels wide (so it extends across the full length of the images), and then add a partially transparent background color to it. Adding the color is easy, but I haven’t managed to get it to 300 pixels wide.
To be clear, I’m trying to get the tptn_title to 300 pixels wide (not the font, the words, or anything – I want the writing to stay as-is).
Let me know if you’ve got any ideas, thanks a ton!
Plugin Author
Ajay
(@ajay)
I’m no CSS expert, but does this work?
.tptn_title { width: 300px }
That’s the one I tried but for some reason it doesn’t work.
Plugin Author
Ajay
(@ajay)
Just checked your site. Is the list in the sidebar?
Yes exactly, does that affect anything?
Plugin Author
Ajay
(@ajay)
Just realised that your Trending is in the sidebar! And looks gorgeous!
What exactly is the issue then ?
Yeah I just renamed it lol. It’s the top 10 of the past few days, instead of the total top ten.
Plugin Author
Ajay
(@ajay)
Did you fix your formatting issue?
No I haven’t figured it out. To clarify, this is what I’m trying to accomplish: http://i40.tinypic.com/2v3qb04.png
(i.e. getting the title onto the image with a background). I can move the title up no problem, but I need to make it as wide as the image using CSS for that the background to work.
Plugin Author
Ajay
(@ajay)
Check out http://kevin.deldycke.com/2012/04/beautify-contextual-related-posts-wordpress-plugin/
Kevin had a good post on this for my other plugin, but you can use similar styles.
Thanks man! That link indirectly helped me out. I ended up googling some of the issues I was having, and realized it’s actually because it was not set to display:block (it was inline, for which precise widths cannot be set, apparently). Anyhow now it’s working!
Thanks a ton for your support, I appreciate it. Great widget you got here, too! Do you have a donate button?
Plugin Author
Ajay
(@ajay)
You’re welcome and am glad it worked out.
There’s a donate button in the settings page of the plugin or you can just send your donation via http://ajaydsouza.com/donate/
Btw, would you like to share the code you used to make the trending etc. I am sure users would love it.
Perfect, here’s the code. I’ll also explain:
.tptn_title {
display:block;
width:300px !important;
background-color: rgb(255, 255, 255);
background-color: rgba(0, 0, 0, 0.35);
color: #FFFFFF !important;
padding-left:3px;
}
So display:block lets you set the width (otherwise it’s displayed inline by default, which won’t let you set the width).
Then I set the width (300 pixels in my case, to stretch across the image).
I set the background color in rgba to 0 0 0 (black) with an opacity of 35% (i.e. 0.35 in the code)
I also put rgb in case a browser can’t understand rgba (though for some reason I set it to white, I think this may be a mistake – it should probably also be 0 0 0 for black). Let me know if you know how to test my site on a non-rgba supporting browser.
I set the font to white with the color.
Then I added 3 pixels of padding on the left side so the writing would space itself out from the left side of the image and the semi-opaque background I’ve created.
Let me know if anything isn’t clear! Also, donating sent.
Cheers!
Plugin Author
Ajay
(@ajay)
Thank you. I think I received and replied.
Regarding your code, what are the other parts of the styling that you do, including the image?