I'm using a wordpress theme which is all good but when I add sharethis buttons, they are half visible. I've tried everything but couldn't locate the exact issue.
Look at top of the page.
site URL: http://ccl5.com
.stButton .stButton_gradient {height: 16px}
This css cause the elements to take only half of its height. That css is generated by sharethis itself.
You can add this css to override.
.stButton .stButton_gradient, .stButton .stFb, .stButton .stTwbutton, .stButton .stMainServices {height: 22px !important}
Thanks
Here is the fix
update heights for the containers as follows:
.stButton .stButton_gradient
{
height:26px;
}
.stButton .stFb, .stButton .stTwbutton, .stButton .stMainServices
{
height:26px;
}
this fix will solve the problem
Firstly please specify a ShareThis Publisher Key (For help, contact support#sharethis.com) on your site.
Secondly, to answer your question, the file buttons.css contains the following code (at line 139):
.stButton .stButton_gradient {
background-repeat: repeat-x;
border: 1px solid #bfbfbf;
padding: 2px;
font-family: serif;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
display: inline-block;
height: 21px;
background: #d5d5d5;
background: -moz-linear-gradient(top, #d5d5d5 0, #efefef 48%, #fff 94%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d5d5d5), color-stop(48%, #efefef), color-stop(94%, #fff));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d5d5d5', endColorstr='#ffffff', GradientType=0);
}
Firstly remove the line:
height: 21px;
as it is causing you problems.
Thirdly please remove the line:
height: 16px;
from this passage (line 737):
.stButton .stFb, .stButton .stTwbutton, .stButton .stMainServices {
background-image: url(/images/facebook_counter.png);
background-repeat: no-repeat;
display: inline-block;
white-space: nowrap;
font-family: Verdana, Helvetica, sans-serif;
font-size: 11px;
height: 16px;
padding-top: 3px;
padding-bottom: 3px;
line-height: 16px;
width: auto;
position: relative;
}
as this is also causing problems.
Hopefully this will solve your problem.
Related
I know i can create in CSS a lot of round corners, but i have never created something like this
I don't need styling for fonts, and heading only for left corner, it is possible to make it like this?
I know i can create moon like this, maybe this is the way?
#moon {
width: 80px;
height: 80px;
border-radius: 50%;
box-shadow: 15px 15px 0 0 red;
}
I think it has to be before pseudo class?
Any idea how to make it like my picture?
i guess you want something like this
jsfiddle
just create and element with :before, and make it oval.
to make it oval you need to set border-radius:100%; and the element should have a rectangle form... not a square form.
and then some minor position adjustments.
for this solution to work the background-color of the container where your element is situated ( in this case body ) needs to be the same as the background-color of the :before element
body {
background:#fff;
}
h2 {
color:#fff;
font-size:20px;
padding:10px;
width:200px;
text-align:right;
background:blue;
text-transform:uppercase;
position:relative;
}
h2:before {
position:absolute;
content:"";
background:#fff;
height:120%;
width:50px;
border-radius: 100%;
left:-25px;
top:-10%;
}
<h2>
Predictions
</h2>
You can use radial-gradient for background property of your element without any extra elements or pseudo-elements:
.shape {
width: 200px;
height: 50px;
padding: 0 20px;
line-height: 50px;
color: #ffffff;
text-align: right;
text-transform: uppercase;
font-size: 20px;
background: radial-gradient(circle 26px at 0% 50%, transparent, transparent 25px, #0000ff);
}
<div class="shape">Predictions</div>
More over, you can play with parameters of radial-gradient to get any required arc:
.shape {
width: 200px;
height: 50px;
padding: 0 20px;
line-height: 50px;
color: #ffffff;
text-align: right;
text-transform: uppercase;
font-size: 20px;
background: radial-gradient(circle 41px at -13% 50%, transparent, transparent 40px, #0000ff);
}
<div class="shape">Predictions</div>
Please look at the jsFiddle.
I'm trying to make interactive cart buttons using CSS stylings. I want my "add to cart" button to invert colors (black n white only) on hover to enhance user experience.
CSS style:
.ryanAddButton {
display: inline-block;
padding: 8px 0px;
width: 390px;
background: -moz-linear-gradient(#000, #000);
background: -o-linear-gradient(#000, #000);
background: -webkit-linear-gradient(#000, #000);
background: linear-gradient(#000, #000);
color: #fff;
font: normal 700 20px/1 "Calibri", sans-serif;
text-align: center;
text-shadow: 1px 1px 0 #000;
}
ryanAddButton:hover {
background-color:white;
color:black;
}
HTML snippet of the button:
<p class ="ryanAddButton">Add to Cart</p>
Your original background shorthand uses a gradient which is interpreted as a background-image and so your hover declaration does not override that property.
.ryanAddButton {
display: inline-block;
padding: 8px 0px;
width: 390px;
/*
background: -moz-linear-gradient(#000, #000);
background: -o-linear-gradient(#000, #000);
background: -webkit-linear-gradient(#000, #000);
background: linear-gradient(#000, #000);
*/
background: black;
color: #fff;
font: normal 700 20px/1"Calibri", sans-serif;
text-align: center;
text-shadow: 1px 1px 0 #000;
}
.ryanAddButton:hover {
background-color: white;
color: black;
}
<p class="ryanAddButton">Add to Cart</p>
First of all, there's a slight typo in your CSS.
Solution 1 : (A simple one - a layman's solution) :
Secondly, Paulie_D's answer is correct. However, just as another viewpoint, if you apply the background property, why not change the same property on hover :
.ryanAddButton {
display: inline-block;
padding: 8px 0px;
width: 390px;
background: -moz-linear-gradient(#000, #000);
background: -o-linear-gradient(#000, #000);
background: -webkit-linear-gradient(#000, #000);
background: linear-gradient(#000, #000);
color: #fff;
font: normal 700 20px/1"Calibri", sans-serif;
text-align: center;
text-shadow: 1px 1px 0 #000;
}
.ryanAddButton:hover {
background:white;
color:black;
border: 1px solid #ccc;
}
<p class="ryanAddButton">Add to Cart</p>
Solution 2 : (A better solution - a designer/programmer's solution) :
Your background property makes use of linear gradient. However, since both the colors are same, the use of linear gradient becomes redundant. Instead, you can get the color by making use of the background-color property. This is beneficial since you wouldn't need to use vendor prefix and at the same time the browser support would be much better on older browsers.
At the same time, it reduces several lines of code by just one :
background-color : black;
Hope this helps!!!
Change the background gradient in the ".ryanAddButton" for black, and you miss the dot for class in "ryanAddButton:hover", should be ".ryanAddButton:hover"
Your background uses a gradient, which overlays the background colour. So even if you change the background colour behind the gradient, you won't see the change. You can override it by setting the entire background property, which will remove the gradient while also setting the background colour.
.ryanAddButton:hover{
background:white; /* overrides all background properties */
color:black;
}
You're also missing a . in your hover selector.
.ryanAddButton{
display: inline-block;
padding: 8px 0px;
width: 390px;
background: -moz-linear-gradient(#000, #000);
background: -o-linear-gradient(#000, #000);
background: -webkit-linear-gradient(#000, #000);
background: linear-gradient(#000, #000);
color: #fff;
font: normal 700 20px/1 "Calibri", sans-serif;
text-align: center;
text-shadow: 1px 1px 0 #000;
}
.ryanAddButton:hover{
background:white;
color:black;
}
<p class ="ryanAddButton"> Add to Cart</p>
I'm trying to get this to work but there's still something not right.
I want to style the submit buttons with css to match the ones i already have.
<input type="submit" name="save_settings" value="Opslaan">
Style:
input[type="button"], input[type="submit"], button
{
background: url("http://gasterijdebakker.nl/email/php/pages/images/layout/bg-btn-left.png") no-repeat scroll left top transparent;
display: inline-block;
line-height: 35px;
padding:7px 0 15px 12px;
margin:0;
border:0;
color: #FFFFFF;
font-size: 15px;
font-weight: bold;
letter-spacing: -1px;
text-shadow: 0 1px 1px #70A7E0;
}
jsFiddle
You would be better off not using the background image and using css3 gradient instead. Something like:
input[type="button"], input[type="submit"], button
{
background-color: #a3d4ff;
background-image: -webkit-gradient(linear, left top, left bottom, from(#a3d4ff), to(#88bcf2));
background-image: -webkit-linear-gradient(top, #a3d4ff, #88bcf2);
background-image: -moz-linear-gradient(top, #a3d4ff, #88bcf2);
background-image: -o-linear-gradient(top, #a3d4ff, #88bcf2);
background-image: linear-gradient(to bottom, #a3d4ff, #88bcf2);
border-radius:3px;
display: inline-block;
line-height: 22px;
padding:7px 12px;
margin:0;
border: 1px solid #88bcf2;
color: #FFFFFF;
font-size: 15px;
font-weight: bold;
letter-spacing: -1px;
text-shadow: 0 1px 1px #70A7E0;
cursor:pointer;
}
input elements can't be styled completely.
Instead, use a button element.
button elements are much easier to style than input elements. You can add inner HTML content (think em, strong or even img), and make use of :after and :before pseudo-element to achieve complex rendering while input only accept a text value attribute.
source:
Mozilla Developer Network
https://developer.mozilla.org/en-US/docs/HTML/Element/button
CSS3 gradient displays with different saturation in diffeent browsers. How to fix this problem? Couldn't find anything helpful.
http://d.pr/i/chm1
Here's the code:
html
<div class="button-body">
Купить
</div>
css
.text{
font-family: Calibri;
font-size: 20px;
text-decoration: none;
font-weight: bold;
color: #913944;
margin-top: 7px;
margin-left: 70px;
float: left;
text-align: center;
text-shadow: rgba(255,255,255,0.6) 0px 1px 0.5px;
border-radius: 8px;
}
.button-body{
height:40px;
width:200px;
display:inline-block;
background: -moz-linear-gradient(top, #ff4d55, #cc1d31);
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,#ff4d55), color-stop(100%,#cc1d31));
background: -o-linear-gradient(top, #ff4d55, #cc1d31);
border-radius: 10px;
border: 2px solid #993f49;
box-shadow: inset 0 1px 1px rgba(255,255,255,1);
}
The problem is the browsers' way of rendering are different. Using image is the best way to make it similar.
Achieving identical presentation across browsers is an enormous challenge at times. From a business perspective, you should ask yourself whether the requirements are that the elements look identical in all browsers or simply look good in all browsers.
We need to tweak the styling of the dropdown that shows the autocomplete place suggestions when using the Google Places/Maps Autocomplete API.
Does anyone know if this is even possible? If so, I guess we just need to know the CSS classnames/IDs.
There's a screen grab of the bit I am referring to here:
This is now documented by google: https://developers.google.com/maps/documentation/javascript/places-autocomplete#style_autocomplete
If you use firebug (as mentioned in a comment to your question...) you see that the container with the autocomplete results is a DIV with the class "pac-container" and the suggestions are inside it as a DIV with the class "pac-item". so just style with CSS.
This CSS will allow the drop-down to resize to fit the width of the results:
.pac-container, .pac-item {
width: inherit !important;
}
It is pretty difficult to inspect the elements since it closes as soon as it loses focus.
Though we know that the container has the .pac-container class and items have .pac-item, upon further investigating the API I found that it embeds the CSS styles in the document.
Here's what initially there, so use it to change the pre-defined styles to fit your needs.
.pac-container {
background-color: #fff;
position: absolute!important;
z-index: 1000;
border-radius: 2px;
border-top: 1px solid #d9d9d9;
font-family: Arial, sans-serif;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden
}
.pac-logo:after {
content: "";
padding: 1px 1px 1px 0;
height: 16px;
text-align: right;
display: block;
background-image: url(https://maps.gstatic.com/mapfiles/api-3/images/powered-by-google-on-white3.png);
background-position: right;
background-repeat: no-repeat;
background-size: 120px 14px
}
.hdpi.pac-logo:after {
background-image: url(https://maps.gstatic.com/mapfiles/api-3/images/powered-by-google-on-white3_hdpi.png)
}
.pac-item {
cursor: default;
padding: 0 4px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
line-height: 30px;
text-align: left;
border-top: 1px solid #e6e6e6;
font-size: 11px;
color: #999
}
.pac-item:hover {
background-color: #fafafa
}
.pac-item-selected,
.pac-item-selected:hover {
background-color: #ebf2fe
}
.pac-matched {
font-weight: 700
}
.pac-item-query {
font-size: 13px;
padding-right: 3px;
color: #000
}
.pac-icon {
width: 15px;
height: 20px;
margin-right: 7px;
margin-top: 6px;
display: inline-block;
vertical-align: top;
background-image: url(https://maps.gstatic.com/mapfiles/api-3/images/autocomplete-icons.png);
background-size: 34px
}
.hdpi .pac-icon {
background-image: url(https://maps.gstatic.com/mapfiles/api-3/images/autocomplete-icons_hdpi.png)
}
.pac-icon-search {
background-position: -1px -1px
}
.pac-item-selected .pac-icon-search {
background-position: -18px -1px
}
.pac-icon-marker {
background-position: -1px -161px
}
.pac-item-selected .pac-icon-marker {
background-position: -18px -161px
}
.pac-placeholder {
color: gray
}
I case anyone is interested in the hierarchy I was able to scrape the following using Firebug:
<div class="pac-container pac-logo" style="width: 557px; position: absolute; left: 66px; top: 106px; display: none;">
<div class="pac-item">
<span class="pac-icon pac-icon-marker"></span>
<span class="pac-item-query">
<span>France</span>
</span>
</div>
<div>
This worked for me, and now I can run this on mobile!
.pac-container {
z-index: 10000 !important;
width: auto !important;
position: initial !important;
left: 0 !important;
right: 0 !important;
display: block !important;
}
.pac-container:empty{
display: none !important;
}
And this somewhere!
$('selector').append('.pac-container');
Now the results will show in the selected div as a normal block element :)
To force the box to stay open for much easier styling and inspection from dev tools you can set the input value from the JS console and the container will stay open when inspecting from the dev tools.
Simply run document.querySelector('.pac-target-input').value = 'CB' in the console on your page with the input, then go back to the Elements tab and you can now individually inspect each element.
This gets around the issue where it always closes when focus is lost.
if you want to create your custom html & css then AutocompleteService class is also available which will provide all data in json.
const service = new google.maps.places.AutocompleteService();
service.getQueryPredictions(
{ input: "provide location string here for search" },
(suggestions) => console.log(suggestions)
);
For easier debugging and styling. to keep the dropdown open.
use the following code in chrome console.
document.querySelector('.pac-container').style.display = 'block'
Also used following classes to style the suggested dropdown in google places auto complete
Update icons
.pac-icon {
background-image: url('./assets/locationMark.svg') !important;
background-repeat: no-repeat;
background-position: 0 0;
background-size: 14px 18px;
}
Update text
.pac-item-query {
font-size: 16px
}
Hide google logo
.pac-logo {
padding: 10px 0;
&::after {
display: none;
}
}