How to change the link color in a custom news ticker widget to white or another color

Eric S1
Tera Contributor

‎08-14-2023 04:06 PM

Hi,

 

I created a custom news ticker with black background and white letter.  However, when you try to do a mouse over on the link, it turns dark blue. This makes the ticker unreadable. Is there a way to change the hover color?  It seemed that it is picking up the default css from the theme.  As a workaround I moved the content of the ticker out of <a></a>  and put there "See details" which still changes its color to dark blue.  I actually plan to copy the announcement widget to handle the ticker but because of time constraint, I was forced to just implement the news ticker like this.  Here is the part of the css I used/experimented for the ticker:

 

.news-ticker-h{
display: flex;
margin:0;
padding: 0;
padding-left: 90%;
z-index: 999;
  font-color: white;
  $link-color:white;
  
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-name: tic-h;
animation-duration: 30s;
 
}
.news-ticker-h:hover { 
animation-play-state: paused;
  color:white;
  font-weight: bold;
}
 
.news-ticker-h a:hover {
  color:white;
}
 
.news-ticker-h li{
display: flex;
width: 100%;
align-items: center;
white-space: nowrap;
padding-left: 20px;
  color: white;
}
 
.news-ticker-h li a{
color: white;
 
}

 

0 Helpfuls
  • 368 Views
2 REPLIES 2

Barrilito van D
Kilo Guru

‎08-15-2023 07:08 AM

Hi,

 

I would suggest to check things like this:

  • you say you have a custome widget, so you can alter your code and css in that widget. Check first if the styling used is used in a another widget, page stylesheet or theme. Meaning: the css that you showed above, if like you guess the theme is also setting same elements with the same rules then the theme will overrule. You cna give more priority on your css in the widget with adding "!important". So:
    a hover on a link like for instance a:hover{ color:#ffffff;} will become a:hover{ color:#ffffff !important;} That should immediately solve your issue

  • If not solved try to change your code in the widget to make it specific so other css rules don't affect your code, like for instance if your anchor link has now a class ".news-ticker-h", change something like:
    <a class=".news-ticker-h">  to something like <a class=".news-ticker-h my-new-extra-class">  and then set in your css a rule on the new class: 
    a.my-new-extra-class:hover {  color:white; }
 
Or share also your html code to have a more specific look. But in general, create html elements with specific classes that cannot be overruled so you can style those specific elements.
 
If you think my answer put you in the right direction or you appreciated my effort, please mark the response as Helpful or mark my response as Correct.
Thanks in advance! Good luck!
0 Helpfuls

Eric S1
Tera Contributor
In response to Barrilito van D

‎08-28-2023 01:40 AM

Thank you. Here is the HTML.   

 <div class="ticker-wrapper-h">
<div class="heading">Breaking News</div>
<ul class="news-ticker-h">
<li>Bass will undergo scheduled maintenance from 10 Aug to 12 Aug 2023 from 7 AM to 5 PM. There will be a server upgrade in the morning and production deployment in the afternoon</li>
<li>Oracle ERP, Oracle EM Server, Cofinancing Management System, eGov ICT Guidelines, and Icecon Workspace will be temporarily unavailable on 12 August to facilitate a patch activity and OS server upgrade. <a href="https://philnabank.sharepoint.com/teams/itd/SitePages/ADB%20Today/IT-Maintenance--Scheduled-patch-ac..."target="_blank">&nbsp See details.</a></li>
 <!-- <li><a href="">Where does it come from?</a></li>
<li><a href="">Where can I get some?</a></li>
        <li><a href="">The last news item</a></li>
 --> </ul>
</div>
0 Helpfuls