WordPress.org

Support

Support » Plugins and Hacks » [Resolved] style title and img link

[Resolved] style title and img link

  • 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/

Viewing 14 replies - 1 through 14 (of 14 total)
  • Plugin Author Ajay
    Participant

    @ajay

    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.

    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

    Plugin Author Ajay
    Participant

    @ajay

    What CSS code are you using?

    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.

    Plugin Author Ajay
    Participant

    @ajay

    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.

    Plugin Author Ajay
    Participant

    @ajay

    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.

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

    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!

    Plugin Author Ajay
    Participant

    @ajay

    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?

    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

    Plugin Author Ajay
    Participant

    @ajay

    What about code along the lines of

    .tptn_thumb:hover {
      border-bottom: none !important;
      text-decoration: none !important;
    }

    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?

    Plugin Author Ajay
    Participant

    @ajay

    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

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

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘[Resolved] style title and img link’ is closed to new replies.