WordPress.org

Ready to get started?Download WordPress

Forums

Top 10 - Popular posts plugin for WordPress
[resolved] CSS to target tptn_title and modify appearance (18 posts)

  1. gearhungry
    Member
    Posted 1 year ago #

    Hey how's it going?

    Wanted to let you know the widget is chugging along and working great! The site is http://gearhungry.com/ by the way

    I've revamped some visuals on the site, and I'd like to make the title go over the image with a "background" color (exactly like those 5 random posts at the top of my height).

    However, by targetting tptn_title, I can't get anything to happen. I'm definitely not a pro at CSS, though, but maybe you could offer some advice.

    Please let me know, thanks!

    http://wordpress.org/extend/plugins/top-10/

  2. Ajay
    Member
    Plugin Author

    Posted 1 year ago #

    You can try changing the Location of post thumbnail to "after title"

  3. gearhungry
    Member
    Posted 1 year ago #

    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!

  4. Ajay
    Member
    Plugin Author

    Posted 1 year ago #

    I'm no CSS expert, but does this work?

    .tptn_title { width: 300px }
  5. gearhungry
    Member
    Posted 1 year ago #

    That's the one I tried but for some reason it doesn't work.

  6. Ajay
    Member
    Plugin Author

    Posted 1 year ago #

    Just checked your site. Is the list in the sidebar?

  7. gearhungry
    Member
    Posted 1 year ago #

    Yes exactly, does that affect anything?

  8. Ajay
    Member
    Plugin Author

    Posted 12 months ago #

    Just realised that your Trending is in the sidebar! And looks gorgeous!

    What exactly is the issue then ?

  9. gearhungry
    Member
    Posted 12 months ago #

    Yeah I just renamed it lol. It's the top 10 of the past few days, instead of the total top ten.

  10. Ajay
    Member
    Plugin Author

    Posted 12 months ago #

    Did you fix your formatting issue?

  11. gearhungry
    Member
    Posted 12 months ago #

    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.

  12. Ajay
    Member
    Plugin Author

    Posted 12 months ago #

    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.

  13. gearhungry
    Member
    Posted 12 months ago #

    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?

  14. Ajay
    Member
    Plugin Author

    Posted 12 months ago #

    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.

  15. gearhungry
    Member
    Posted 12 months ago #

    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!

  16. Ajay
    Member
    Plugin Author

    Posted 12 months ago #

    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?

  17. gearhungry
    Member
    Posted 12 months ago #

    The rest is pretty much done within your widget settings. The images are set to 300px wide, sorted using views over 7 days with a reset once a week. There's not much more to say really, but let me know if I missed anything.

  18. Ajay
    Member
    Plugin Author

    Posted 11 months ago #

    Thanks that is sufficient :)

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags