Tag Archives: image

CSS: Use a custom image instead of bullet points for unordered lists

Posted on October 15, 2012 by
No comments

Here is the line of code I use when I want to use a custom image instead of bullet points in unordered lists:

 

li { 
background:url(images/checkmark.jpg);
background-repeat:no-repeat;
background-size:20px 20px;
list-style-type:none;
padding-left:25px;
}

 

Simply replace the image URL in the code with the correct path to your image, adjust the width, height and padding, and you will be good to go :)

Here is an example of an unordered list that uses an image of a checkmark in place of the normal bullet points:

Categories: CSS, HTML | Tags: , , , , , ,

CSS Tricks: How to make sure an image is always centered inside its div

Posted on January 6, 2012 by
No comments

Here is the code I use to keep an image always centered inside its containing div, regardless of browser width or resizing:

<img src="yourimage.jpg" style="width:100%;margin:0 auto;">
Categories: CSS, HTML | Tags: , , , ,

Concrete5: How to fix the issue of captcha images not displaying in your web pages

Posted on January 3, 2012 by
4 comments

Here is one way I have found to fix an issue in Concrete5 where your captcha images are not showing up.

Navigate to  concrete/helpers/validation/ on your server and open captcha.php.

Find this block of code:

class ValidationCaptchaHelper {

   private $securimage;
	public function __construct() {
		Loader::library("3rdparty/securimage/securimage");
		$this->securimage = new Securimage();
		$this->securimage->ttf_file = DIR_LIBRARIES_3RDPARTY_CORE . '/securimage/elephant.ttf';
	}

And change it to:

class ValidationCaptchaHelper {
   private $securimage;
	public function __construct() {
		Loader::library("3rdparty/securimage/securimage");
		$this->securimage = new Securimage();
		$this->securimage->use_gd_font = true; $this->securimage->gd_font_file = DIR_LIBRARIES_3RDPARTY_CORE.'/securimage/gdfonts/caveman.gdf';
		$this->securimage->ttf_file = DIR_LIBRARIES_3RDPARTY_CORE . '/securimage/elephant.ttf';
	}

The text in red is the text that you are adding to the original block of code.

This worked for me but let me know if it doesn’t work for you.

Categories: Concrete5, Random | Tags: , ,

CSS Trick: Resize background image to fit browser window

Posted on December 30, 2011 by
No comments

Here is the neat little block of CSS that I use to resize a background image to fit the size of the browser window the site is being viewed in:

body {
        background: url(images/bg.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

Let me know if you have any questions or need help with this! :)

Categories: CSS, HTML | Tags: , , , , , ,

Add a hover effect to button links using CSS

Posted on November 2, 2011 by
1 comment

Here is the code I use to add a hover effect to button links.

Copy and paste this code into your stylesheet:

a img {
opacity:.40;
filter:alpha(opacity=40);
filter: “alpha(opacity=40)”;
filter:alpha(opacity=40);
}

a:hover img{
opacity:1;
filter:alpha(opacity=100);
filter: “alpha(opacity=100)”;
filter:alpha(opacity=100);
}

You can see an example of this here.

That’s it!

Categories: CSS | Tags: , , , , , ,

WordPress Content Slide plugin: How to stop all of the slideshow images from displaying on page load

Posted on April 27, 2011 by
16 comments

I recently ran into an issue with the WP Content Slide plugin where, when you first went to the website it was installed on, all of the images in the slideshow displayed in a line down the page for a split second before disappearing and only showing the top image like it was supposed to. Here is the solution (or workaround, more accurately) that I came up with to hide that line of images as they were loading.

In your WordPress admin panel, go to Plugins -> Editor. Select the Content Slide plugin from the drop down list of plugins to edit. In the content-slide/content_slide.php file, find this line of code:

#wpcontent_slider_container
{
 overflow: hidden; position: relative; padding:0px;margin:0px; text-align:center; width:<?php echo $total_width;?>px !important;
}

Now, simply add a height declaration to that code snippet, so that your code now looks like this:

#wpcontent_slider_container
{
 overflow: hidden; position: relative; padding:0px;margin:0px; text-align:center; width:<?php echo $total_width;?>px !important;height: 130px !important;
}

Obviously, you will want to change the height to whatever the height of your slideshow is.

Making this change fixed the problem and now all of the images are not shown as the page loads.

Let me know if you have any questions or run into any further issues.

Categories: WordPress | Tags: , , , , , , , , ,