I am using the facebook like button on a page with a red gradient background. I would like the text inside this share button to be white not the dark blue that it currently is (the "be the first of your friends to like this" text):
I'm not sure how to go about this though. This is the code used to generate the button:
<div class="fb-like" data-href="<current page's url here>" data-send="true" data-width="360" data-show-faces="false" data-font="arial"></div>
The code generated according to firebug is this:
<div data-font="arial" data-show-faces="false" data-width="360" data-send="true" data-href="<current page's url here>" class="fb-like fb_edge_widget_with_comment fb_iframe_widget">
<span>
<iframe scrolling="no" id="f29d650aad23b3a" name="fc2a4f4faf238e" style="border: medium none; overflow: hidden; height: 29px; width: 360px;" title="Like this content on Facebook." class="fb_ltr" src="http://www.facebook.com/plugins/like.php?api_key=271291652883209&channel_url=https%3A%2F%2Fs-static.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%3Fversion%3D3%23cb%3Df28525cd54eb78%26origin%3Dhttp%253A%252F%252F<current page's url here>&extended_social_context=false&font=arial&href=http%3A%2F%2F<current page's url here>%2Ftag%2Fzach-galifianakis&layout=standard&locale=en_US&node_type=link&sdk=joey&send=true&show_faces=false&width=360"></iframe>
</span>
</div>
Any ideas how to make that text white?
According to Facebooks TOS Item IV. 7. d.
“You must not obscure elements of the Like button or Like box plugin.”
http://developers.facebook.com/policy/
If you go to this page you can make it dark.
Under Color Scheme you can chose "dark".
https://developers.facebook.com/docs/reference/plugins/like
Here is a blog entry where someone disguises the like button.
http://www.esrun.co.uk/blog/disguising-a-facebook-like-link/
One option is to simply hide the like button and instead just create your own. Then you'd bind a click event on your custom button that simply triggers a click event on the actual, hidden Like button.
I highly suggest you try Anders solution first, as it may be the quickest and simpler solution for your situation, since you can freely change the background image.
But this article will tell you exactly how to even point a css file with your own rules for the facebook box. there's even a demo:
http://line25.com/tutorials/how-to-add-a-custom-facebook-like-box-to-your-site
Good luck =)
Related
hope you are all safe and well.
Have inherited a SaaS/web based 'design online' website, and it runs okay for our small business, before I have plans for a full Magento2 build, however there is a 'show more/show less' function I would like to get rid of on the product pages. See here, for example:
https://black-rhodium.co.uk/Products#!/products/bolero-s
can drop blocks of code in, but don't have an option in the back end of the web based site builder to turn this 'see more/see less' feature on and off.
Can any of you guys help me with a snippet of code to force it to disappear, so I just have the block of text for the product description to display as normal in full, on page load?
have already tried the below, to no avail
<div class="ws-clamp-text-show-hide {display: none;}">Show more</div>
<div class="ws-clamp-text-show-hide {display: none;}">Show less</div>
Have also tried !important and 1/0/0/0 on the above, and that hasn't worked either.
Have placed in body, body2, head, footer, none has worked.
can delete this in opera inspector, to give me the result I want, with the entire product description there:
<div class="ws-clamp-text-show-hide focus">Show less</div>
Although, nothing I add will essentially override it.
someone could help me out, that would be appreciated. Many thanks.
Just to fully understand.. do you want to hide
<div class="ws-clamp-text-show-hide">Show more</div>
and
<div class="ws-clamp-text-show-hide">Show less</div>
using CSS?
if so, try,
<div class="ws-clamp-text-show-hide" style="display: none">Show more</div> same for the show less one.
Other CSS alternatives would be:
width: 0; height: 0;
visibility: hidden;
opacity: 0;
But I think that in your case you'll have to remove the function from the backend.
Here is my reference page: http://ca.pockethm.com/setupaccount/feature-videos_library.php
I am using Dynamic Drive's "Dynamic Ajax" script to change the content in a 'containerarea' div. Here is a sample of my actual anchor code:
<a href="javascript:ajaxpage('videos-maintenance/appliances-repair_fridge_gasket.php', 'contentarea');">
<img src="http://aaaa.pockethm.com/images/icon-youtubeTV.png" alt="Repair a Refrigerator Door Gasket" class="icon-image" border="0" />
<div class="icon-text">Repair a Refrigerator Door Gasket</div>
</a>
What I need is to have the page jump to an <a name="videoTop"> anchor positioned above the video window upon clicking the YouTube icon to watch a particular video in preparation for when I add a lot more videos. I've tried onclick, onfocus, onmouseover, and a variety of other code mashes....to no avail. There's a strong possibility I'm doing it wrong, though.
Thanks in advance for the assist.
You need to stack it in the inline code:
<a href="javascript:document.location.hash='#videoTop';ajaxpage('videos-maintenance/appliances-repair_fridge_gasket.php', 'contentarea');">
I havent used Javascript in a while and I have almost forgotten it all but I would like to be reminded how to show and hide html div boxs to display hidden content by clicking on a text or such.
In this case I would like to have a hidden box filled with login information while the ahref link will be the indicator to tell the loginbox to appear or disappear and by knowing this I could easily apply it to the register area.
I would like to know how to do this or a pop up box sort of thing.
This is what I have so far:
Could anyone help me with this now. I can't seem to get it work.
The toggle is
Login
Showing content
<div class="signup" style="display: none;">
<p> test </p>
</div>
Javascript is
function showStuff(signup) {
document.getElementById('signup').style.display = 'block';
}
Why won't this work
Looks like the issue with your code is that your div has a class as 'signup' not an id.
try:
<div id="signup" style="display: none;">
<p> test </p>
</div>
See this jsfiddle for a working example with an additional fix to how your function works.
http://jsfiddle.net/aUQ6B/
Original Answer:
See: javascript hide/show element
Code to make note of is the following:
document.getElementById('myid').style.display
Setting this to 'none' hides the element.
Setting it to 'block, 'inline' or whatever the original value was will show the element.
I have a Facebook 'Like' button on my page:
<div class="fb-like" data-href="http://mysite.com" data-send="false" data-layout="button_count" data-width="100" data-show-faces="false" data-font="arial"/>
I also have the 'fb-root' div and the SDK javascript (the button functions just as it should).
For some reason, when the like button is toggled on (occurs when the visitor is connected to his Facebook account AND had already liked my page before) the button will magically reduce its width (in some last second javascript) and make the other buttons (twitter/g+) hide it. It aligns just fine for a second and then 'collapses'.
I tried disabling my css and many other components of my site, to no avail.
I attached an image illustrating the situation.
EDIT: Something I just found out. The width attribute is the one that seems to be overridden. When setting width = 2000 (rediculusly high), when the like button is enabled (user is not connected/not liked), the button is indeed 2000px wide, but when a previously-liked user is connected, you can see the 2000px width for a second there, and then it 'collapses' again.
EDIT2: I seem to have found the culprit, but I don't know why and how to fix it. It seems the generated code in the toggled on facebook button sets the width to 72 instead of 100.
Generated code for enabled button:
<div class="fb-like fb_edge_widget_with_comment fb_iframe_widget" data-href="http://mysite.com" data-send="false" data-layout="button_count" data-width="100" data-show-faces="false" data-font="arial">
<span style="height: 20px; width: 100px;">
Generated code for liked(diabled) button:
<div class="fb-like fb_edge_widget_with_comment fb_iframe_widget" data-href="http://mysite.com" data-send="false" data-layout="button_count" data-width="100" data-show-faces="false" data-font="arial">
<span style="height: 21px; width: 72px;">
Any help would be much appreciated.
Thank you!
Well, I ended up adding this to my CSS:
div.fb-like > span {
min-width:100px;
}
Probably not the best way, but it is working for now.
You could try to use
<div style="width: 100px;"></div>
to wrap around your code. usually the plugin will automatically adapt to the width of its parent element on page load.
If the width of parent element is smaller than your data-width, it could cause your Facebook button to shrink. This could be the reason why your button size changes.
http://geodit.com:8000/
If you try to click between "Spear St. Oakland" and the description, you'll notice that the anchor takes you nowhere. That's because there's a padding between them.
How do I get the hyperlink to work when the user clicks between the text?
Try putting the padding on the a element(s), instead of the div elements.
Your code is unnecessarily complex. For example you don't need to wrap everything (such as each link) in a DIV (or the other way round). Just style the link directly, possibly setting it's display style to block so that it behaves like a div.
If you merge both links into one then your problem will go away and you wouldn't need to "fake" the links with cursor: pointer.
Here an example how simple your HTML could be:
<div class="awallpost grid_doc_holder sub" data-image="http://s3.amazonaws.com/fabletest/7cgeq8hkdt">
<a href="/d/1339" class="trans_caption ">
See the sun whispering the light of our days from last summer...
</a>
<div class="trans_caption_over">
<img src="/media/img/brightmix/star.png"> Great Find!
<a href="/d/1339" class="extras">
<em><img src="/media/img/brightmix/placedot2_white.png" align="texttop" width="12" height="auto"> Spear St. Oakland, 94107</em>
<span>Hey it's weekend! Whohoooo :O) Made a few new photos on my favorite heathland just outside the city, the sunset ...</span>
</a>
</div>
<div class="title_text_only">
See the sun whispering the light of our days from last summer...
</div>
<div class="desc_text_only">
Hey it's weekend! Whohoooo :O) Made a few new photos on my favorite heathland just outside the city, the sunset was so gorgeous and soft just perfect for my &quot;cream ...
</div>
</div>
You do not have a link between the text. You have TWO links.
What is confusing is the
.grid_doc_holder {
cursor: pointer;
text-align: center;
}
which shows the hand when you are not over the links too
You could consider making the outer container clickable
I believe you want to just put your div(or Divs) within an A tag, that will make it all clickable.