Latest News Type B - Summary text color


#1

Hi Folks,
I’m trying to change the Blog-Post summary text color when hovering over the complete Latest News B entry - but with the code I added the color of the text only chnges, when I’m directly over the summary text. I’d like the color to change already when the mouse is over the complete highlighted box (supposed to be class “owl-item”)

.latest-news-wrapper.carousel.style2 .entry-summary:hover {
	color: black !important;
}

I tried this with the “owl-item” class but it will not change the text color of the blog summary accordingly. Any idea wht the correct code would be?

(Check it out here:https://www.soundmarketingteam.com/)
Cheers, Timo


#2

Hello Timo,

Please try this code:

    .sydney_latest_news_widget_b .blog-post:hover .entry-summary {
      color: #ff0000;
    }

Regards,
Kharis


#3

Hi Kharis, thank you … I had to add

!important;

but than it worked.
BTW: Is there any way to make the whole box clickable and not only the headline and the date?
Very much appreciated
Timo


#4

To accomplish it, you’d need to do the below steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box
(function($){

  if( $('.sydney_latest_news_widget_b').length ) {
      $('.sydney_latest_news_widget_b .blog-post').each(function(){
        var link = $(this).find('.entry-title a').attr('href');
        $(this).wrapInner('<a href="'+link+'" style="color:inherit;"></a>');
      });
  }

})(jQuery);
  1. Update
  2. This will overrides the previous hover color CSS. So you’d need to replace this CSS code:
    .sydney_latest_news_widget_b .blog-post:hover .entry-summary {
      color: #ff0000;
    }

with:

    .sydney_latest_news_widget_b .blog-post a:hover .entry-summary {
      color: #ff0000;
    }

Regards,
Kharis


#5

Hi Kharis,
thanks again - this works perfectly for all the text - but not for the whole surrounding box of the entry. Any idea?
It maybe could help if I could increase the number of lines of text shown as a preview of the article from 2 to maybe 4 but I don’t know where to change that. Currently the sourrounding rectangle seems to be pretty big for the little preview text shown.

Great Support!! Very much appriciated!
Cheers, Timo


#6

Hello Timo,

Please share a link to your page where Latest News Type B can be found at. So I can inspect it further directly. It doesn’t seem to appear on homepage.

Regards,
Kharis


#7

You can still find it here:


Just below the “Unser Team” section

Cheers, Timo


#8

Hello Timo,

Are you referring to this section?

Regards,
Kharis


#9

Yes, Kharis … please switch to the german version since I did not work on the english one yet …


#10

Try adding this extra custom CSS code:

    .sydney_latest_news_widget_b .blog-post {
      position: relative;
    }

    .blog-post > a {
      display: block;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      padding: 20px;
    }

Regards,
Kharis


#11

Hi Kharis, thanks again. That works perfectly now!
I’m just wondering about one thing: The box has a smooth blend in and out that I can steer by the transisition element in this section:

    .latest-news-wrapper.carousel.style2 .post-background {
    	background-color: transparent;
    	position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      z-index: -1;
      opacity: 0.7;
      transition: opacity 1s;
      color: black !important;
    }

Regrettfully this does not seem to steer the transision for all the elements. After the Headline there is a “date” and a “Blog” element before the blog summary. These elements show completely different transition behaviours than the rest of the box (the transition goes differently and with a different speed) - Any idea how I can make these elements behave in the same way?

And thanks again for the excellent support! You guys rock!
Timo

BTW: I figured out that you always use

   .sydney_latest_news_widget_b

instead of

   .latest-news-wrapper.carousel.style2

Is there any programming reason for that? These objects seem to behave in the same way.