Support » Plugin: Top 10 - Popular posts plugin for WordPress » CSS to target tptn_title and modify appearance

  • Resolved gearhungry


    Hey how’s it going?

    Wanted to let you know the widget is chugging along and working great! The site is 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!

Viewing 15 replies - 1 through 15 (of 17 total)
  • Plugin Author 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


    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


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

    Yes exactly, does that affect anything?

    Plugin Author 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


    Did you fix your formatting issue?

    No I haven’t figured it out. To clarify, this is what I’m trying to accomplish:
    (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


    Check out

    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


    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

    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 {
    width:300px !important;
    background-color: rgb(255, 255, 255);
    background-color: rgba(0, 0, 0, 0.35);
    color: #FFFFFF !important;

    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.

    Plugin Author 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?

Viewing 15 replies - 1 through 15 (of 17 total)
  • The topic ‘CSS to target tptn_title and modify appearance’ is closed to new replies.