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

  • Resolved gearhungry

    (@gearhungry)


    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/

Viewing 15 replies - 1 through 15 (of 17 total)
  • Plugin Author Ajay

    (@ajay)

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

    Thread Starter gearhungry

    (@gearhungry)

    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 }
    Thread Starter gearhungry

    (@gearhungry)

    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?

    Thread Starter gearhungry

    (@gearhungry)

    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 ?

    Thread Starter gearhungry

    (@gearhungry)

    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?

    Thread Starter gearhungry

    (@gearhungry)

    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.

    Thread Starter gearhungry

    (@gearhungry)

    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.

    Thread Starter gearhungry

    (@gearhungry)

    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?

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