Whoever wants to see the website for reference go to http://mscair.tk Also, the sidebar contents are visible on any other page but the front page.
So I am using the Blue Masters Theme, now I wish to add an icon to the network connections tab in the sidebar, here is the origninal css and html code:
CSS:
.network { display:block; text-align:center; padding:15px 0; }
.network a { display:inline-block; overflow:hidden; height:32px; width:32px; text-indent:-9999px; padding:0 5px 0 0; outline:none; }
.network a.twitter { background:url(../images/twitter2.png) 0 0 no-repeat; }
.network a.facebook { background:url(../images/facebook.png) 0 0 no-repeat; }
.network a.in { background:url(../images/in.png) 0 0 no-repeat; }
.network a.tumblr { background:url(../images/tumblr.png) 0 0 no-repeat; }
.network a.youtube { background:url(../images/youtube.png) 0 0 no-repeat; }
.network a.flickr { background:url(../images/flickr.png) 0 0 no-repeat; }
HTML:
<a href="http://twitter.com/morethanthemes" class="twitter">Twitter</a>
<a href="http://www.facebook.com/pages/More-than-just-themes/194842423863081" class="facebook">Facebook</a>
<a href="http://www.flickr.com/photos/56103643@N07/" class="flickr">Flickr</a>
<a href="#" class="in">In</a>
<a href="#" class="tumblr">Tumblr</a>
<a href="http://www.youtube.com/morethanthemes" class="youtube">Youtube</a>
So I added these:
CSS:
.network a.ca { background:url(../images/airplaneicon2.png) 0 0 no-repeat; }
HTML:
<a href="http://cyberairlines.net/viewpage.php?page_id=130&id=92564" class="ca"/>Cyber Airlines</a>
The problem is that my the HTML code is working, but it is not showing the image shown in the CSS. Now I have checked whether I am using the correct CSS and as far as I know I am. Also, the file is uploaded to the server and the links work.
While we're on the issue of css/html not working I have another situation:
This theme's homepage is made out of blocks. It is a 3 column layout and each column places and icon next to the block name. I simply wanted to change the icon of the third column to use the image the second column uses. So I changed the CSS code from:
#home-blocks-area .region-home-area-3 .block h2 { background:url(../images/icons/phone-icon.png) no-repeat 13px 10px; padding:10px 0 0 49px; }
to:
#home-blocks-area .region-home-area-3 .block h2 { background:url(../images/icons/bubble-icon.png) no-repeat 13px 10px; padding:10px 0 0 49px; }
to use the same image as:
#home-blocks-area .region-home-area-2 .block h2 { background:url(../images/icons/bubble-icon.png) no-repeat 13px 10px; padding:10px 0 0 49px; }
Yet when I load the front page, it remains as it was, oh and by the way, for both situations, I did upload them back to the server. Any help?
