In the 'bottom' row of www.friendsofhonleylibrary.org.uk I used some zen shortcodes code to make two icons appear.

How do I remove the white background?

Hi

You need to remove the inline style that is applying

Cheers
Paul

span style="color: #323232; font-family: Muli, Helvetica, Tahoma, Geneva, Arial, sans-serif; letter-spacing: -0.48px; line-height: 28.56px; background-color: #f6f6f6;">

I added your code to the bottom of my css file (see a copy below).

It hasn't had the desired affect yet...



#bottomwrap p, #bottomwrap h3, #bottomwrap a {
color: #000!important;
}

#header {border-left:0}

.mainwrap.zen-spotlight,.zen-spotlight,.article-header {border-bottom:0}

.article-title, h1 {border-top:0}




h2 a {color:#333}

h2 a:hover {color:#000000}


.article-title, h1 {border-top: 1px solid #59C7DE;}
.zen-spotlight {border-bottom: 1px solid #59C7DE;}
#header {border-left: 1px solid #59C7DE;}

.sidebar .zen-module-title {
background: #59C7DE;
}

.side-image .main-content-inner, .side-image #midCol {background: none}

.mainwrap.zen-spotlight {border-bottom: 0;}

.sidebar .moduletable {border-top: 0;}

.article-header {border-bottom: 1px solid #59C7DE;}

#bottomwrap p, #bottomwrap h3 {
color: #000;
}



#bottomwrap a, #footerwrap a {
color: #106cad;
}

.off-canvas-body a, .off-canvas-body .zen-menu-heading, .off-canvas-body .separator {
color: #106cad; !important
}


#menu ul > li a:hover, #menu ul > li .zen-menu-heading:hover {
color: #000000;

} !important


#menu ul > li.active > a, #menu ul > li.active > .zen-menu-heading {
color: #000000; font-weight:1200;} !important

span style="color: #323232; font-family: Muli, Helvetica, Tahoma, Geneva, Arial, sans-serif; letter-spacing: -0.48px; line-height: 28.56px; background-color: #f6f6f6;">

Hi

inline styling doesn't work in external css files - inline styling is only for adding to the actual html and on the whole is to be avoided

You need to apply the styling you are adding inline to the divs in the custom.css file

This is also invalid

#menu ul > li a:hover, #menu ul > li .zen-menu-heading:hover {
color: #000000;

} !important


#menu ul > li.active > a, #menu ul > li.active > .zen-menu-heading {
color: #000000; font-weight:1200;} !important

you need the !important inside the close bracket

so in answer to your original question to remove the background you delete the inline style from the html in the article

Inline styling is a problem

webdesign.about.com/od/css/a/aa073106.htm