Discord Picture + Link Underlines

Hello! I have two questions that I need help with.

Firstly, I've got a discord logo that I used custom css to obtain, acquired from another forum post somewhere, but it was a little too complicated for me to follow beyond what I just have. Here's a picture of what I've got. I'd like to make it white and match the other logos I have. And, not necessary, if possible, I know theres a discord logo thats JUST the logo in the middle, not the whole box around it. If possible is it doable to just have that logo? so its bigger? But mostly I just want the logo to be white.

Secondly, I've struggled alot with link underlines since code was changed a few months ago on squarespace. I have waay more custom css than what's actually needed, but no code seems to be really giving me a website-wide removal of link underlines. Here's my issue atm
- I have no underlines under links on 90% of things
- Some things (Like the picture below of an inline picture with text below) have links
- only bold text do not have link underlines. Regular text has underlines
(Here's a photo of an inline photo with text beneath it. I previously said that only bold text doesn't have underline links, regular text does, well thats not the case for inline photo texts with links)

Basically, i just want no underline links if possible, on anything.

Here's the code I currently have, which is quite a mess, and I'm pretty sure is 10x longer than it needs to be. 

.item-pagination {
  display:none !important;
}
.sqs-block-html a {
    text-decoration: none !important;
}.sqs-block-html a {
  background-image: none !important;
}/* begin change social icon to discord */

  .header-actions--right .header-actions-action--social .icon:nth-of-type( 2 ), /* desktop */
  .header-menu-actions .header-menu-actions-action--social:nth-of-type( 2 ) /* mobile */
  
    {
    
      background-image: url( https://cdn4.iconfinder.com/data/icons/logos-and-brands/512/91_Discord_logo_logos-512.png );
      background-repeat: no-repeat;
      background-size: 110%;
      
      }
      
  .header-actions--right .header-actions-action--social .icon:nth-of-type( 2 ) svg, /* desktop */
  .header-menu-actions .header-menu-actions-action--social:nth-of-type( 2 ) svg /* mobile */
  
    {
    
      display: none;
      
      }
      
  /* end change social icon to discord */
// Remove Hyperlink Line - v7.1 //

.sqs-block-html a {
  text-decoration: none !important;
  background-image: none !important;
}

Usually you will get quicker response here if you post the url of your site. 

Hello,

For the logo, you can attach a different logo link from the same website provided in the CSS code you shared above (iconfinder). You can also download and upload it directly to your website using the Manage Custom Files feature located in your Design > Custom CSS tab. Simply upload the file, remove the previous URL and adjust accordingly.

The link to the black and white discord logo is here.

As for the underlined words -- I'm not sure exactly what you mean, but I would think that from looking at the code you shared, your underlined text problem is because you aren't targeting all of the proper elements or being "specific" enough for the code to be applied to the various elements, classes, and objects that are created when you add different blocks. The code you're using specifically targets the "<a>" element of ".sqs-block-html" class and I guess now we know that 10% of the blocks are not same. 😛

That being said,  there are different blocks that have preset styles applied to them. Some of them will only be applied in certain circumstances. The Inline Image block, for example, sets a border-bottom for the "<a>" or "<p>" class (I forget which one changes the style) when you've added a link to the caption text. The text decoration won't appear to have any effect because of the border bottom style that is being applied.

To solve this in the way you mentioned, you may have some success applying a blanket code.

You could use a blanket code like: 

* a {
  text-decoration: none !important;
  border: none !important;
}

The "*" selects everything, used or not being used.

Hope this helps!