simple social icons css

[tjd]

Hi,

Been working on putting a border around the icons on my site. I'm learning but not experienced at css. This is the first, from scratch, attempt at  coaxing the css to give me what I want. Unfortunately, I'm missing something. Here's the code I've got so far:

/* Simple Social Icons
------------------------------------------------------------ */

.sidebar .simple-social-icons ul li[type="social-linkedin"] {
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border: 1px solid #000;
text-align: center;
}

Of course the above code doesn't look exactly the same. All code below the .sidebar... entry, is positioned one tab space in, which seems to coincide with the rest of the css on my site....

So, any ideas on this. BTW, Support said the icons were actually 'fonts' not images. I thought that made it easier but no luck yet.

Ideas anyone??    You can chk the icons look here:  tomjdolan.com       Thanx for your input.

[Anita]

Add this to your Style.css file.

.simple-social-icons ul li a, .simple-social-icons ul li a:hover {
    background-color: #BABABA !important;
    border: 1px solid #000000 !important;
    border-radius: 3px 3px 3px 3px;
    color: #A80202 !important;
    font-size: 20px;
    padding: 10px;
}

---

Love coffee, chocolate and my Bella!

[tjd]

Mornin' anitac,

Well working on my iMac, I added that code into the css and removed the code I had put in...it wasn't working anyway. Well interesting results.

The look of the icons didn't change. No border but, when I select one, or hover over one, they all seem very nervous and jiggle around. And too, curiously, the most right icon, the youtube, moves under the facebook icon which is on the far left.... sounds very political? When the youtube moves down and under, the sidebar contents also move down to make way for their new neighbor. Now here's the interesting result:

On the iPhone. the icons are stable, they don't jump around, nor does the youtube reposition itself. But, when I select an icon, it does turn dark grey with a black image in the center...as I set it up. But now, there is a 1px Black border around the icon. That's strange...no?

So, I will leave it that way today, so if you have the opportunity, you can check it out. If this doesn't work I can remove the code with no consequences. But thank you for your input as always.

On this sunny windy Tokyo day,

Tom

ps//I just re-read your post and my response....did you mean to ADD your code to my code... or to REPLACE my code with your code???

[tjd]

Hi anitac

I did go ahead and put back in my  original code, then ADDed your code to it, but no change. So I'll leave it that way for you to see if you get a moment.   tomjdolan.com

Thanx,

Tom

 

[tjd]

Thanx for all your help. It didn't solve the issue though, and the code that was suggested did some weird things....so, I decided this was a minor time-consuming issue that I needed to get past. Today i removed all the code which corrected the "jumping icons" then tested it on 3 browsers and the iPhone and all is well once again.

Later when the entire site is done and I'm into content-n-maintenance I'll revisit this issue. Till then, thank you.

Tom

[Author]

Posts