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
Related
I'm a Web developer.
I have one question about textarea default margin value.
http://jsfiddle.net/tTnCd/175/
This link is jsfiddler site.
I make CSS by
textarea {
position: absolute;
}
<textarea>tyjyjyj</textarea>
enter image description here
You can see a picture from an upper link.
Red checker is default margin on textarea that I say.
How to remove this white space?
Thanks!
try this
body {
margin: 0;
}
If you inspect it in your browser via developer tools, you'll see that that's actually the default margin for the body. You'll want to remove your CSS and do what #Rajath Kumar PM suggested. :)
this will do it
textarea {
margin: 0;
padding: 0;
}
There is concept of Reset CSS and normalize CSS. Please go through them. Here is the one nice explaination for that.
What is the difference between Normalize.css and Reset CSS?
Point 2 is try to avoid position absolute to make it to corner of the page. Absolute is not intended for that.It alters dimensions of the parent div.So please use absolute and fixed wisely and where it is intended to.
Is there a way to change the default block cursor used by Shellinabox to a vertical bar?
Using Chrome's inspector tool, I found this div:
<div id="cursize" style="left: 675.5px; top: 160px; visibility: hidden;">143x20</div>
but altering the value does nothing.
There is nothing about a cursor size in the page's styles.css file or any of the config files found in /etc/shellinabox/options-available.
If you know of a better place to ask a question like this, please tell me.
Those inline styles have been generated dynamically through means of something like JavaScript. Considering they are generated dynamically, simply manipulating their values won't reflect any change.
Having said that, you can override them with the !important declaration. Typically !important should only be used as a last resort, but inline styles have the second-highest level of specificity, and !important is the only way to override them.
Using something like the following should work for you:
#cursize {
left: 500px !important;
top: 100px !important;
}
Hope this helps! :)
I'm sure my question is quite a newbie one, anyway I can't figure out what I'm doing wrong. Basically, I created a <div> that I use as header, and inside of it another <div> that contains an image (logo) and a title (using <h1>).
The problem is that I get an unwanted extra space above the body
as you can see in this picture.
If I get rid of the <h1> title then everything is fine. I think the problem is due the float: left; property that I have assigned to the image, because if I assign no float property then the space disappears, but as you can see if I remove the float: left; the image and the title are not "aligned" anymore. So, the question is, how can I make the image to stay on the left and the title on the right of the image, without using float properties?
Any help will be appreciated, thanks!
Edit: Thanks everybody for the answers, I'm studying HTML and CSS at school and things like this are rarely mentioned by my teachers. Thanks again
A h1 element has margin by default. Simply remove it by adding:
margin: 0;
To the styles for your h1 element.
you can use this:
<h1 style="margin-top:0px; padding-top:0px">some text</h1>
At start of your work you should clear the style for margin (browser apply some of them).
So just in start of css file write:
h1 {
margin: 0;
}
A lot of devs just start a css file like :
* {
margin: 0;
padding: 0;
}
for clear it :)
Also you should read something about css reset and css normalize :)
This is because every browser has a default stylesheet, which you can find in Browsers' default CSS stylesheets. As you can see, the default margins are not zero. This can be solved by explicitly adding margin: 0px to your CSS.
What I'm looking for might be very basic if someone is using bootstrap for a while.
I'm looking for a way to style the body background let say #ebebeb and the container background #fff with a padding of 10px, if you go search something on m.Google.com you will see exactly what I'm talking about.
Somehow I cannot figure out how to do it with Twitter Bootstrap 3.0.2
Could you please edit your question and provide your code? There could be more than one issue causing the problem, and it'll be easier to help you if I can see your code.
If I had to guess, I'd say the easiest way achieve what you want would be something like this:
body {
background: #ebebeb;
}
.container {
background: #fff;
}
Make sure that you're including this CSS after you've included bootstrap.css, otherwise it won't override the default styles set by Bootstrap. Here's a the fiddle that shows this: http://jsfiddle.net/5KwP3/1/
One thing to be aware of however, is that anything that isn't in the container div won't have any padding by default.
I'm used to use padding + background-image to place an icon next to a link.
There are many example of this approach. Here is one from here:
<a class="external" href="http://www.othersite.com/">link</a>
a.external {
padding-right: 15px;
background: transparent url(images/external-link-icon.gif) no-repeat top right;
}
But most browser don't print background image, which is annoying.
What is the standard to place icon next to links which is semantically correct and works in all cases?
EDIT
What about CSS :before and :after? Is it a recommended practice?
a.test:after {
padding-right: 5px;
content: url(../pix/logo_ppk.gif);
}
I'd personally pad it and put a background image via a CSS class (just like your example). It's by far the lightest route, it keeps the document light and semantic.
If printing them really matters (and I do mean really matters) stick a real image in there but be aware that it does screw up markup from a semantic aspect.
Perhaps a better compromise solution would be to have a "printable version" which uses images instead (either by something server-size or some JS that replaces the CSS class with an actual image.
Although as OLi saying keep icon in css is best method and there is no way to print css backgrounds. (until you turned on css background printing from browser settings).
but if you can use javascript then this method will work for you
http://www.learningjquery.com/2008/08/quick-tip-dynamically-add-an-icon-for-external-links
you can add inline image to link.