Changing CSS of narrow visualforce homepage component

Question

Since the HTML area component has a bug when using its tool to add URL links, I'm attempting to create a VF page for use on our sidebar. It's quite simple: Just a text message followed by an external URL link.

My issue with my VF page is that the background color is not consistent with the rest of the sidebar sections. I've tried messing with the CSS and different apex components used in my VF page, but to no avail. I also can't seem to find a stylesheet specifically associated with the 'narrow' column of the home page (aka the side bar).

Here is my code:

<apex:page>
      VHLI Messaging here
      <br/>
      <a href="https://www.google.com" target="popup">VHLI link</a>
</apex:page>

 

And here is a screenshot showing the blue background I'm trying to get rid of:

(Note: this is the view of a community user when logged into our SF customer community)

Answer 1

OK, I found an answer shortly after posting by looking at the styling in another VF component used in our community.

Yes, the fact that it was in the customer community was relevant, because the community has its own stylesheet.

My new code:

<apex:page>

<style>
html .brandQuaternaryBgr{
    background:#F1F3F5!important;
    }
</style>

      VHLI Messaging here
      <br/>
      <a href="https://www.google.com" target="popup">VHLI link</a>
</apex:page>