Facebook "Likes" box css styling? - css

I want to display which users like my facebook page with a widget in my website. I have tried the official widgets but they work with an iframe, and it is not possible to style them. They have a white (or black, those are the only two choices) background, and a border and font styling that look horrible on my site.
Is it possible, with a different plugin or whatever, to show a) the number of users who like my fb page and b)the profile pictures of some of them?

It is possible check this tutorial out here,
http://www.speckygeek.com/how-to-add-facebook-like-box-to-your-website/
You can style the fanbox to fit your theme. The key is including a css attribute to the <fb:fan> tag, linking it to your own stylesheet.

Related

Displaying video title on hover in Divi Builder's Video Slider

Using The Divi Video Slider Module to display a set of videos. We'd like to display the video title on hover for each video. Divi says they currently don't support this functionality, but said to check the development community for answers.
See the test page at https://work.gmmb.com/project/political. have tried to edit hover class, but hasn't worked.
There is a class at class="et_pb_video_overlay_hover" Not sure how we can use this to display the video's title from the WordPress Media Library.
Any good Divi coders who have tried this or might know a custom CSS or JS solution?
A really quick workaround would be to use an :after pseudo-element on class="et_pb_video_overlay_hover". You could put the title in content: like so:
.et_pb_video_slider_item_0 .et_pb_video_overlay_hover::after {
content: "Title";
// Title will be small, white and centered at the top of
// the video. Use other CSS properties to style your titles.
}
The first video is .et_pb_video_slider_item_0, the second video is .et_pb_video_slider_item_1 etc.
That is a quick solution you can implement right away.
Edit - I've just have a quick look at the Divi Video Slider module to see if it can be filtered. The code you need is located in these files:
/wp-content/themes/Divi/includes/builder/module/Slider.php
/wp-content/themes/Divi/includes/builder/module/SliderItem.php
I tried to use the Admin Label to set a title for each video, then print that to screen on the overlay, but it isn't accessible during render. I do see that content_unprocessed does contain the title:
["content_unprocessed":protected]=> string(339)
"[et_pb_video_slider_item admin_title="Video Title Goes Here" src="https://www.youtube.com/watch?v=FkQuawiGWUw" ... "][/et_pb_video_slider_item]"
but it is protected and not directly accessible from within the render function.
I'm afraid it's going to require some long and tedious coding to get that to work. The easier solutions are to use the CSS hack above, or simply embed the title on your overlay images.

Custom CSS Coding/Coding Block for a Website

I have a question about Custom CSS or using a coding block when uploading an image to a page as a logo. I am using squarespace for my website and I need help coding my logo so that it fits on every page. An option is to use Custom CSS or a coding block. I am using the Rally template for Squarespace and my logo has a max capacity unfortunately. What coding do I use to have my logo on each page? My site is www.goodemoments.com. Please help, I would like to officially launch my blog very soon!!
Typically, in Squarespace, the way to put your logo on every page is to use it in the header. That is true for the Rally template as well.
To do this:
Add your logo via edit mode by going to Design > Logo & Title >
Logo Image
Save
The logo will now be used in place of your title ("Goode Moments
| Lifestyle Blog")
Go to the Style Editor: Design > Style Editor
Under "HEADER: BRANDING", adjust the "Logo Width" parameter to
your liking.
Once you've done this, it may then make sense to add some custom CSS via the CSS Editor if some additional minor tweaking is needed.
Yes, so I would like to use Custom CSS, because my logo that I will be using is to small. The width only goes to a certain size and I want it to be larger.

How do I override CSS on embedded google calendar using ASP.Net/C#?

Based on my research and the many posts on this subject, I understand that I cannot alter the CSS in the iframe based on the domain tree security policy. However, I am sure (or hope) there has to be a developer out there that has implemented a way to run the iframe locally on their domain and therefor gain access to alter the CSS attributes.
All I need to do is change the calendar grid (array) background and border colors. Please do not tell me you can change the bg-color in the tool, because all that does is change the header. The border is blue and the bg-color of the grid is defaulted to white.
Any direction would be much appreciated.
Look at this:
http://www.webdesignerdepot.com/2012/04/integrating-google-calendar-with-your-website/
It is described there how to change google calendar css.

Best way to hide background image in Drupal with certain URL patterns

What would be the most effectient way to hide a background image if the url has node in it it?
I have set a background image that runs through the site however I dont want the background image to show if the url has node in it. For example,
http://example.com/node
http://example.com/node/add.
The site uses drupal and my css is entry level to be polite!
Thanks
I know in pure CSS there isn't a way to do what you are trying. However, I am pretty sure that Drupal would find a way to prove me wrong. :-)
The best way to do this would be to create a new stylesheet or style for the pages that have node in the URL and override the default background. You can do that by using the following code:
background-image: none;
But remember that this should be called after the common stylesheet that is on all the pages otherwise you will see the background image on the node pages as well.

DRUPAL: replace tags with icons

is there any plugin for Drupal, replacing tags with small icons (see the picture below, the icons are actually small circles, and the different colors are automatically generated.
I need to replace the tags with the circles, for each node, and the starting view.
Furthermore, when the mouse move over the tags, the tag title should appear as pop-up
thanks
Edited: SORRY, here is the image! :)
http://dl.dropbox.com/u/72686/tagsIcons.png
If I understand you correctly, what you are looking for is the taxonomy_image module.
I use it and it works very nicely.
I had to enhance it a little to do what I want inside a View, but other than that it answered my requirements.

Resources