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.
Related
We are using twenty sixteen word press theme.
The theme has lot of header and footer spaces which would like to remove.
Eventhough we didn't provide any banner or any other images it still have more spaces before the table gets generated in the page or page content
any suggestion on how or where to fix this?
Thanks.
You can just right click on the empty space annoying you and click inspect in chrome. It will show you something like this...
Here... Faint Green outline is the padding... this is causing that annoying whitespace,
.site-header {
padding: 5.25em 4.5455%;
}
Just kill it with CSS, you need higher specificity ( Learn more here https://developer.mozilla.org/en/docs/Web/CSS/Specificity ) for beginners simply prefix body before selector and it will have higher specificity and will work like a charm...
body .site-header {
padding: 0;
}
You can also use !important...
.site-header {
padding: 0 !important;
}
Using !important is not a good practice coz it breaks the heirarchy but since you are designing the site not writing a plugin it's up to you ;)
You can use this for any element, try yourself for footer 😉
You can add the CSS by using a plugin like https://wordpress.org/plugins/simple-custom-css/
http://www.geneseo.edu/new_social_media_test
I am working on a new social media page for my school, and I cannot get rid of this border within my table. Under the <thead> and above the <tbody> there is this grey line that I can't seem to target. I have turned off table borders in the html and in the css, but nothing works. I can't figure out where it is coming from and its driving me crazy. Is it something from a global CSS file? Maybe one of the social media plugins at the top are messing with it? I'm out of ideas; any help would be greatly appreciated.
Also, in Firefox (8.0.1 :: Mac OS 10.7), the row colors flicker when the fade is over. Absolutely no clue on that one, either.
If you are looking at the code, sorry it is such a mess. I'm new to drupal, I don't have privileges to create my own CSS files, so I had to do everything inline.
Thanks!
Edit: Here is a screenshot to clarify: http://i.imgur.com/dOcoE.png. I also forgot to mention that when I am in preview view in Drupal, the color turns to a light blue, but not a color I have defined anywhere (like this: http://i.imgur.com/WWF0e.png).
The border is set on the th, not the thead or tr. There are a couple rules in css_4ea78c62a1f11df9a1a23dfccad4464e.css that target th, creating a bottom border:
th{text-align:left;padding-right:1em;border-bottom:3px solid #ccc;}
tbody th{border-bottom:1px solid #ccc;}
thead th{text-align:left;padding-right:1em;border-bottom:3px solid #ccc;}
Note that !important is intended only for user agent stylesheets. Use the cascade and selector specificity. Since the stylesheet that disables the bottom border is loaded after css_4ea78c62a1f11df9a1a23dfccad4464e.css, all you need is:
table th {
border-bottom: none;
}
You may need to limit the selector to target the chart more specifically, if there are other tables that you want to keep the border.
I found this CSS:
tbody {
border-top: 1px solid #CCC;
}
I disabled it in Chrome's developer tools, but it didn't have any effect. That's all I can find related to the table though, try removing it from your styles, if you can. Or overriding it.
It's this line, it's in your CSS doc.
thead th
{
text-align:left;padding-right:1em;border-bottom:3px solid #ccc;
}
This is driving me crazy. Can anyone tell me what I am missing here.
I have a word-press site I am trying to copy the design into an e-commerce skin
The wordpress site: http://solesu.clarityproductions.com/ and the
e-commerce skin i am working on is http://cspro.solesu.com/.
The words MAIN PAGE are slightly differently balanced from the wordpress site to the
e-commerce skin and I cant figure it out. Can anyone help me where the problem
is and what css change may need to be made. I have been looking a this for hours.
It looks like the background padding or height or something is a little taller
on top and bottom on the wordpress site but im not sure whats controlling this.
It seems that there is a quite a few differences in the code. Have you tried using Firebug for Firefox or the Webkit Developer Tools to inspect the page elements for differences?
After a quick look I can see that your missing elements and other stuff is going on.
This is what you have on line 54 in your styles.css:
.sidebox-categories-wrapper ul li a, x:-webkit-any-link, x:default {
padding-bottom: 3px;
}
It's the padding-bottom: 3px; that expands the height of the anchor tag.
Remove it, and you'll be fine.
This is the style giving you the issue
.sidebox-categories-wrapper ul li a, x:-webkit-any-link, x:default {
padding-bottom: 3px;
}
just make sure you overwrite it
#vmenu_8 a {
padding-bottom: 0;
}
And it'll be fine.
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;
}
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.