How can I modify the width of that fricken button? I have a retweet button that is the width that I like, but I cant seem to find any documentation on how to reduce the width in css for the facebook share button.
If you look at the posts buttons you will see it on the site. www.itjourneyman.com you will see the facebook button is just a little wider then the retweet button making things look funny.
Does anyone know where I can find the css for that button without having to mod the actual plugins code.
Thanks in advance.
Try changing this css. You could tweak the right button padding to make it a little smaller. I used 4px in firefox and it looks good. I hope this helps. If you don't want to mess with the plugin code you would probably have to overwrite this CSS somewhere in your own CSS file. It's probably easier just to update the plugin CSS.
FBConnectButton_Small .FBConnectButton_Text {
margin-left:17px;
padding:2px 4px 3px;
}
You want to change the width attribute:
Add this:
style="width:100"
To your tag with the background image of the Facebook button in it. Change the width to whatever you need it to be.
This was the answer I did not add in the important.
.FBConnectButton_Text
{
font-size: 8px;
padding:2px 4px 3px !important;
}
Related
I have read many posts and tried quite many things but I don't seem to get an embed form to work the way I need it to work.
Problem with input on focus:
1. Blue outline > I tried the code below I seemed to work and then suddenly it stopped working.
input:-webkit-autofill:focus {
outline: none !important;
}
2. Yellow background > I got it fixed with the code below.
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0px 1000px #ffefef inset !important;
}
I would like the form to always look like this (normal, hover, focus, active
But that's sadly not the case because of "user agent stylesheet".
You can see the form in live here →
Also note, I am not a programmer. I know WordPress well enough but any tricky answers might get me confused. I would like to solve this problem either using .css or adding some JavaScript code in the header/footer element.
And I also tried Normalize.css which, I guess, I could just add to my theme folder with the same name... forgive my dummyness. If so, that didn't help. Well, I don't know if I was supposed to add a new line there or not.
Any help would be highly appreciated (praying hands).
#drip-first-name:focus, #drip-email:focus {
outline: 0;
border-bottom: 3px solid black !important;
}
make sure you prefix it for different browsers(Not sure if needed) and of course do the same for active etc (wherever you get that blue outline) . This will work for chrome.
However, a few notes. since you're messing with css you need to start using Chrome Devtools. It's free and built into chrome. This will show you what's wrong and how to fix it.
Secondly, using !important in css is not a major no no but the reason your border-bottom rule wasn't working was because you had already used !important in a previous class and it was picking it up. Important won't let you override anything unless it's lower in the CSS stylesheet and is also marked as important. Long story short at some point you will have to redo the whole thing if you keep using important.
this is how it would look to you with devtools open:
This is the link for you to get started with devtools:
Devtools
apply outline:0 to the input normal style not :hover or focus, then remove
border-width: inherit !important; from the :focus of the input, because then it takes it's parent border width, and that is 0px therefore your border disappears on focus.
Well if you'd like you can remove all the default userAgent-styling by using the all: unset; ? That works for me.
But if you just want to remove the outline you shall do
input { outline: none; }. Hope that helps.
Edit: the all: unset is there for remove all user Agent Stylesheet. Nothing else.
I am using the Pinterest hover button widget for a client website.
https://developers.pinterest.com/on_hover_pin_it_buttons/
By default it appears at the top left of all images. It doesn't look like their script allows for positioning. Is it possible to override this with CSS?
Thanks
Yes I believe that it is. If you generate the code you will see that the pin it button is created as a span and then positioned with inline styles, I am guessing dynamically with each image.
In the example I looked at it had the class xc_pin, so I will use that for my example but bear in mind that the class you have may be different.
As I mentioned, the span is styled inline, so to overwrite it you will have to use !important, else the styles will be overwritten. Here is how your code could look:
xc_pin {
left: 20px !important;
top: 50px !important;
}
I hope that this helps!
EDIT WITH WORKING JSFIDDLE
After playing around with the css I managed to find a way to target it using the css sibling selector, here is the jsfiddle: https://jsfiddle.net/2xzxgvfw/19/
Hope this solves your issue!
I do not know how you generated the code but I think there should be somewhere a file called: ppibfi_pinterest.css in this file look for the line:
.pibfi_pinterest .xc_pin{}
there you should find something like: top: 5px; margin-left: -1px;
if you adjust this, you should be able to modify the position of the pinterest icon
Hi Clever CSS Gurus etc
I've just added Google custom search widget to my wordpress site
I have a problem with the styling though?
Its supposed to appear like this sidebar one - http://googlecustomsearch.blogspot.co.uk/
but on my site it appears like this - http://brightmist.co.uk/blog/
Any ideas on how to fix it?
Thanks for all your help
Judith
First off, if you have access to your CSS stylesheet('/wp-content/themes/modernize/style.css'), go to line 40 where it has...
tr th, tr td{padding: 9px 20px;}
I think the 20px padding is what is squashing it up like that. Thats to generic a style to use really, that will effect every HTML table on your website. If you want certain tables on your website to have that padding, give them a class and apply that padding only to tables with that class. Or try adding...
#cse-search-form74 table td{padding: 0; border: none;}
Hope that helps.
Have a look at this picture
alt text http://www.abbeylegal.com/downloads/2009-04-01/web%20part%20top%20line.jpg
Does anyone know what css style is used for the line/border highlighted in red? I'm trying to over ride it in my custom style sheet but I’m not having any luck, so far I’ve tried overiding these different styles...
.ms-viewheadertr
.ms-vh2
.ms-vb
.ms-vb2
.ms-unselectedtitle
.ms-summarystandardbody
which is changing the display but not the border, it's enough to make you go mad!
Update:
.ms-WPHeader is indeed one of the css classes, however if you set the border-style to none there is still a line that appears; just a little thinner. I can use .ms-viewheadertr to completely remove the header but just can't seem remove this one line.
Why don't you use firefox & the firebug addon to work out which classes to override?
Are you using !importance to override the css classes?
I work intensively on customising sharepoint UI. So i know for sure that the class you should be looking at is the following:
*.ms-vh,.ms-vh2,.ms-vh-icon,.ms-vh2-nofilter,.ms-vh2-nofilter-icon,.ms-viewheadertr .ms-vh-group,.ms-vh2-nograd,.ms-vh3-nograd,.ms-vh2-nograd-icon,.ms-ph,.ms-pickerresultheadertr{
background-image:url("/_layouts/images/viewheadergrad.gif");
background-repeat:repeat-x;
padding-top:1px;
padding-bottom:0px;
background-color:#f2f2f2;
}*
You should remove the image reference in the background-image property like so:
*background-image:url("");*
That will remove the dark greyish line on top.
Happy Customising!!!
Chrome seems to suggest that it's the iframe (id Filterlframe1) that's the culprit:
border-bottom-style: inset;
border-bottom-width: 2px;
Clarification: the Sharepoint list view uses an iframe for the menu bar at the top - that's where the border is being rendered.
Well, after playing in the IE8 dev toolbar, I came up with:
<tr class="ms-WPHeader">
CSS props:
border-bottom:#4e7cb7 1px solid;
border-collapse:collapse;
Check out Heather Solomom's SharePoint CSS reference at http://www.heathersolomon.com/content/sp07cssreference.htm.
Browsing through the webpart specific section at http://www.heathersolomon.com/content/sp07cssreference.htm#WebParts, it looks like this might be ms-WPBorder perhaps?
Hope this helps.
I reviewed each of the responses and none of them was successful. The key is the color of the line "#4E7CB7". I then searched the root CSS files on the server and at line 2683 of the CORE.css I changed the
.ms-WPHeader TD {
border-bottom:1px solid #4e7cb7;
border-collapse:collapse;
}
to
.ms-WPHeader TD {
border-bottom:0px solid #4e7cb7;
border-collapse:collapse;
}
I am studying the css methods Google uses to create their ui. I realized that the css code on their home page contains no reference to their search box; it seems like just a naked input tag, with not a border, background image or any of the conventions normally used to stylize a border. And yet it can display not only a hue and a kind of gradient, but it is slightly round and also reacts to the cursor focus.
So, your guess is as good as mine. Please use your Firebug to check it out and help me get to the bottom of this riddle.
http://www.google.com/
EDIT: Just to be clear, I'm not trying to make an aesthetic judgment. Although I think minimalism of Google's homepage is fantastic, I am really interested to find out the techniques they used to stylize the borders around their search box -- without using any css whatsoever.
Are you using a mac? Aren't all of the native UI elements round, glow, and change color?
Do you have any add-ons like the Google Toolbar which could be modifying the UI of the page without you being able to detect it?
Edit: The technique asked about in the question really has nothing to do with CSS and everything to do with the browser. The text input on the Google home page has no CSS style applied to it and is therefore left to the browser to decide how it looks. Here's what it looks like when the field has focus in Google Chrome:
removed dead ImageShack link
No secret. It's a normal text box... Google's home page has always famously been minimalist.
not sure about their home page, but they do the same in Gmail, and there's CSS involved:
.mFwySd:focus
{
border:2px solid #73A6FF !important;
margin:0 !important;
outline-color:-moz-use-text-color !important;
outline-style:none !important;
outline-width:0 !important;
}
.mFwySd {
background-color:#FFFFFF;
border-color:#666666 #CCCCCC #CCCCCC;
border-style:solid;
border-width:1px;
color:#000000;
}
It is all about Chrome, it applies an outer glow effect when you focus on any textbox with this browser.
Now that the some browser such as firefox are able to read css3 u can use that to have corner radius, im using it now! although its not valid by w3c yet.
It does not look like they are stylizing the search box. But if they wanted to they could just use the native HTML tag input. You just have to reference it in the CSS file.
input {
padding:???;
margin:???;
background:url(http://www.???.???/images/???.???) #FFF no-repeat 0 0;
color:#??????;
text-align:????;
font:normal ?em/?em arial;
}
This would just cover the search field box.
If you needed to cover the button, just add a class to your button input field.
I always use .btn
input.btn {
padding:???;
margin:???;
background:url(http://www.???.???/images/???.???) #FFF no-repeat 0 0;
color:#??????;
text-align:????;
font:normal ?em/?em arial;
}
Now this should give you complete control over any input field on you entire website.