WordPress.org

Ready to get started?Download WordPress

Forums

Top 10 - Popular posts plugin for WordPress
[resolved] style title and img link (15 posts)

  1. filo21
    Member
    Posted 1 year ago #

    Hi,

    I am trying to style the links within the plugin, and I'm having some issues separating the style for the title from the style for the image.
    On mouse hover, I'd like to keep the underline on the title, but I'd like to remove it from the thumbnail. I tried to style the tptn_thumb class with text-decoration: none and border: none, but it didn't seem to have any effect. On my general css, images are already styled so that they won't be underlined when they are wrapped between anchors, but for some reason it doesn't seem to affect the way images are styled within the Top10 plugin.

    Do you have any input on what I should try?

    Thanks in advance

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

  2. Ajay
    Member
    Plugin Author

    Posted 1 year ago #

    Filo,

    The new version I'm about to release in a day or two will have a new style tptn_title for the title that you can style specifically.

  3. filo21
    Member
    Posted 1 year ago #

    Thank you for your super-speedy reply. I'll def check the new version as soon as it comes out.

    Actually, I didn't have as mucn of a trouble styling the title part as I had with the image. I could easily write some css to style the title (e.g. font and size), but I'm not able to style the link for the img thumbnail. I think it's because both the tptn-title and tptn_thumb are wrapped inside the same <a href>. Are you considering separating them into individual divs? That could make it easier to style via custom css for not-so-skilled people like me!

    Anyway, I'll try with the new version. Thank you again.

    Cheers

  4. Ajay
    Member
    Plugin Author

    Posted 1 year ago #

    What CSS code are you using?

  5. filo21
    Member
    Posted 1 year ago #

    I added the following:

    .tptn_posts_daily ul li {
    list-style: none;
    list-style-type: none;
    margin: 3px 0;
    padding: 3px 0;
    border-bottom: 1px solid #ccc;
    .tptn_posts_daily img {
    margin-top: 5px;
    }

    I tried to add something like a.tptn_thumb and tptn_thumb a to style the img, but to no avail.

  6. Ajay
    Member
    Plugin Author

    Posted 1 year ago #

    I think you might need to add !important to styles in the a.tptn_thumb to override settings.

    However, if you wait another day or so. Am just polishing up a few bits for the release.

  7. Ajay
    Member
    Plugin Author

    Posted 1 year ago #

    I have released v1.9.5 with the new tptn_title CSS Class added. You should be able to write a style specific for this now without worrying about the thumbnail getting affected.

  8. filo21
    Member
    Posted 1 year ago #

    thank you, i'll try it asap and let you know!

  9. filo21
    Member
    Posted 1 year ago #

    just installed the update, but I guess I still don't know how to separate the style of title from the style of the thumbnail lol!

    here's the website, if you want to give a look.

    on the home page you should see the difference between the style of the first widget (featured posts, "in vetrina") and top10 ("trending"). when you hover on the first one, only the title gets the dotted underline, while the img doesn't. I don't seem to be able to do the same in top10.
    I can't really wrap my head around this, I tried the css I know but nothing seems to work, so I'm obviosuly missing something. Maybe the style of the anchor a href is applied to the whole div, so it's not really the img getting the underline, but maybe anything within the div? just a wild guess, I suppose...

    anyway, thank you again for your support!

  10. Ajay
    Member
    Plugin Author

    Posted 1 year ago #

    The reason between the two widgets is that in the first the a tag is different from the title and the img.

    In Top 10 this is both under the same a.

    What's the code you are using for tptn_title. Also, for the a tag are you using a :hover attribute?

    What's the CSS code for this?

  11. filo21
    Member
    Posted 1 year ago #

    the theme has this general rule:

    .widget a:hover {
    color: #0090d3;}

    paired with:

    .widget a {
    border-bottom: dotted 2px transparent;}

    to avoid the underline on some of the links i don't want to be styled that way (like imgs in the other widget), i added border: none and text-decoration: none

    i tried to apply the same to tptn_thumb, but without success. if i apply the same rule to tptn_title, the underline disappears also from the part between span

  12. Ajay
    Member
    Plugin Author

    Posted 1 year ago #

    What about code along the lines of

    .tptn_thumb:hover {
      border-bottom: none !important;
      text-decoration: none !important;
    }
  13. filo21
    Member
    Posted 1 year ago #

    mmm nope, it didn't work.

    now i tried this

    .tptn_link {
      border: none !important;
      text-decoration: none !important;
    }
    
    .tptn_title:hover {
      border-bottom: dotted 2px #0090d3 !important;
      transition: all 0.5s ease-out;
      -webkit-transition: all 0.5s ease-out;
      -moz-transition: all 0.5s ease-out;
      -o-transition: all 0.5s ease-out;
    }

    and it partially works: the img isn't underlined, the title is, but i got some trouble with the transition during the hover status, which is not consistent with the rest of the website. if you still got time for this, would you give it a look?

  14. Ajay
    Member
    Plugin Author

    Posted 1 year ago #

    I can, but I must confess that I am no expert at CSS. I suggest checking on StackOverflow. There are usually some experts out there

  15. filo21
    Member
    Posted 1 year ago #

    Sure, no problem. Thank you so much for all your help!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic