style title and img link

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

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.

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.

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!

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

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?

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!