CSS for Header Image

bugtuss · Member · Jun 27, 2013 at 4:16 am
Copy link

Add topic to favorites
Is there a CSS code for a border-radius to apply to top of a header image?
Also, is there a CSS code to apply border-radius to Facebook widget?
Finally, is there a CSS code to make Facebook widget transparent like the built in feature in the Twitter widget?

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Jun 27, 2013 at 4:17 pm
Copy link
Hi there, the header image has a 3px top left/right radius now, but you can change that by adding the following CSS (I used 5px in my example).
```
#headimg img {
    border-radius: 5px 5px 0 0;
}
```
add this to put a 5px radius on the FB like box widget.
```
#facebook-likebox-3 iframe {
    border-radius: 5px;
}
```
Are you taking about the FB icon you have at the top of the left sidebar? If so, what you will have to do is to create (or find) an image without the blue background and save it as a PNG image with transparency, upload it to your media library and then use that image in an image widget or a text widget.

Let me know if you have any questions or problems.
bugtuss · Member · Jun 27, 2013 at 4:53 pm
Copy link
Hi Thesacredpath!

I am talking about the FB like box widget. The Twitter widget has an option of transparent background, which I think looks cool! Wondering if there was a code to do the same for FB like box widget.

Muchas Gracias!
thesacredpath · Member · Jun 27, 2013 at 5:33 pm
Copy link
Ah, yes you can do that. Replace the FB like code I gave you with this:
```
#facebook-likebox-3 iframe {
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.5) !important;
}
```
The first three numbers in the background declaration are RGB color (white in this case), and the 4th is the opacity. The lower the number (approaching zero) the more transparent it is.

no es nada :)
bugtuss · Member · Jun 27, 2013 at 6:31 pm
Copy link
Big ups to you!

Loving these solutions! All I have to do on my end is figure out how to eliminate white borders around my logo in Twitter. Don’t know why this is because logo is png file. Not your problem!

Cheers!!! :)
thesacredpath · Member · Jun 27, 2013 at 7:06 pm
Copy link
You are most welcome.

Make sure you set the background as transparent in the PNG. If the logo was copied in from another source, it could have the white background in it already. Time for an eraser tool workout perhaps? :)
bugtuss · Member · Jun 27, 2013 at 9:00 pm
Copy link
Hello,

Yes, logo imported into Twitter w/o white background. I think Twitter sees the entire frame for profile and just fills in missing information w/white background. If it really starts bugging I will just go with border-radius option.

Many thanks again!
bugtuss · Member · Jun 27, 2013 at 9:10 pm
Copy link
However….

Long shot in the dark. If there is a CSS code the same as the one you provided me for transparency on the Facebook like box, might this solve the Twitter widget issue for me?
thesacredpath · Member · Jun 27, 2013 at 9:52 pm
Copy link
Hmmm, sorry, the white background is part of the image. I just viewed it in Firefox and there is a white background to the image. If we apply the rgba to it, it will lighten the entire image, not just the background since the background is part of the image.

Sorry I can’t help on that one. :(
bugtuss · Member · Jun 28, 2013 at 12:40 am
Copy link
That’s ok, didn’t think it would work anyway!

Cheers
thesacredpath · Member · Jun 29, 2013 at 2:03 am
Copy link
You are welcome.

Please let us know if you have any further questions.

Cheers.
bugtuss · Member · Jun 29, 2013 at 3:32 pm
Copy link
Hello

FYI the solution for my Twitter question was to modify the logo by coloring in the background with the color on the blog. I am a happy camper now!

While I am here, I might set up a Flickr account. Assuming the Flickr widget is similar to the FB widget, what is the CSS code for transparency?

Have a splendid weekend!
thesacredpath · Member · Jun 29, 2013 at 9:33 pm
Copy link
@bugtuss, great news on the image! Happy campers are the best kind. :)

I just did a little testing and this should get you on your way with the flickr widget.
```
#flickr_badge_wrapper {
background: transparent;
border: none;
}
```
Hope that helps, and you have a great weekend too.
bugtuss · Member · Jun 30, 2013 at 4:26 am
Copy link
Thank you, thank you!

Continuing to be high maintenance, when mouse hovers Flickr, the white background appears. Can this be eliminated?

Bugtuss = Pain in Bum-Bum
designsimply · Member · Jul 2, 2013 at 1:02 am
Copy link
when mouse hovers Flickr, the white background appears. Can this be eliminated?

Try adding this to your Appearance → Themes → Customize → CSS panel:
```
#flickr_badge_uber_wrapper tr:hover {
	background: none;
}
```
bugtuss · Member · Jul 2, 2013 at 3:25 am
Copy link
Designsimply,

Worked like a charm!

Muchas Gracias!
designsimply · Member · Jul 2, 2013 at 3:32 am
Copy link
Great! I marked this topic as resolved. If you need help again in the future, please create a new, separate help request.

No items found.