How to change color background in text widget

  • 1
  • Question
  • Updated 7 years ago
  • Answered
If you go to the main page on my web site you will see that the birthday listings have a white background which looks pretty ugly. Is there a way to make it transparent like the rest of the page?




<style type="text/css">
a.aajcat {font-weight: bold}
td.aajdate {background-color: #transparent; font-size: 8pt; text-align: center}
td.aajcat {background-color: #transparent; font-size: 8pt; text-align: center}
td.aaj {background-color: #transparent; font-size: 8pt}
td.aajlast {background-color: #transparent; font-size: 8pt; padding-top: 18px}
h1 {font-family: verdana; font-size: 10pt; font-color: #50707D; font-weight: normal; font-weight: bold; letter-spacing: 1px}
body {font-family: verdana; font-size: 8pt}
a:link {color: #50707D}
a:visited {color: #50707D}
a:hover {color: #20404D; text-decoration: underline}
</style>

<h5><center>Todays Jazz Birthdays</center></h5><br>
<table cellpadding="4" cellspacing="0" border="0" width="250">
<script language="javascript" type="text/javascript" src="http://www.allaboutjazz.com/live/bday12.txt"></script>
</table>

Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
  • confident

Posted 7 years ago

  • 1
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Hello Randy,

Try background:color:none; instead of background-color: #transparent.

This should work because # is for color codes only! and transparent may not work in older browsers.

Hope this helps,

Andi
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Thanks Andi but it doesn't seem to work. I wonder if it is part of the javascript that they use in this code. Just a thought.




<style type="text/css">
a.aajcat {font-weight: bold}
td.aajdate {background:color: none; font-size: 8pt; text-align: center}
td.aajcat {background-color: none; font-size: 8pt; text-align: center}
td.aaj {background-color: none; font-size: 8pt}
td.aajlast {background-color: none; font-size: 8pt; padding-top: 18px}
h1 {font-family: verdana; font-size: 10pt; font-color: #50707D; font-weight: normal; font-weight: bold; letter-spacing: 1px}
body {font-family: verdana; font-size: 8pt}
a:link {color: #50707D}
a:visited {color: #50707D}
a:hover {color: #20404D; text-decoration: underline}
</style>

<h5><center>Todays Jazz Birthdays</center></h5><br>
<table cellpadding="4" cellspacing="0" border="0" width="250">
<script language="javascript" type="text/javascript" src="http://www.allaboutjazz.com/live/bday12.txt"></script>
</table>

Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Hello Randy,

Please could you provide the direct URL of the page this issue is on. I could then take a closer look at the broader code and see if anything else if affecting it.

Kind Regards,

Andi
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Hi Andi!

My site is www.mcran.com

Thanks again!!!
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Add this code to your existing CSS code.

td.aajdate {background-color:transparent;}
td.aaj {background-color:transparent;}

That will work.

Kind Regards,

Andi
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Hi Andi!

Can you explain to me how you came up with the CSS code you sent me?

Have you used the CSS edit feature in Yola at all? I have a Silver account but I am not quite sure how to go about using it. My understanding is that I can use this feature instead of having to create a separate style sheet to control my site?

Thanks so much!! A short video (if possible) would really help me out. Thanks again!!

Randy
www.mcran.com
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
That worked!! Thanks so much Andi!!

As far as layout is concerned. Are there any recommendations you can give me as far as the look and feel of the home page? I think it is starting to take shape but I just wanted some feedback. Thanks!!