Tag Archives: custom

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

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:

CSS Tricks: Custom styling for your scrollbars

Here is the simple code I use to style scrollbars in a web page. Simply add this code to your stylesheet:

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 8px;
   background:#A020F0;
}

::-webkit-scrollbar-thumb {
    border-radius: 8px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
  background:#fff;
}

And customize it to fit the design that you want!

Including retweets in your custom Twitter feeds

Here are the codes I use to create a custom Twitter feed for my websites which includes retweets.

First you will want to insert the Javascript that makes the whole thing work. Copy and paste this line of code into your website, preferably just before the closing <body> tag:

<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="http://api.twitter.com/1/statuses/user_timeline.json?screen_name=thelibzter&include_rts=1&callback=twitterCallback2&count=6" type="text/javascript"></script>

Replace the words THELIBZTER in the above example with your own Twitter username. Change the number 4 after “count” to the number of tweets that you want to display.

Next, copy and paste the following html into the web page where you want the Twitter widget to display:

<div id="twitter">
<div id="twitter_t"></div>
<div id="twitter_m">
 <div id="twitter_container">
 <ul id="twitter_update_list"></ul>
 </div>
</div>
<div id="twitter_b"></div>
</div>

And, finally, copy and paste the following CSS into your website’s stylesheet:

#twitter {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width:430px;
border:1px solid #c9c9c9;
}
#twitter_t {
width:405px;
height: 44px;
background:#c68aeb url(yourimagehere);
color:#fff;
text-shadow:.5px .5px #333;
font-size:18px;
font-family:Candara;
padding-top:20px;
padding-left:25px;
}
#twitter_m {
width: 400px;
padding: 0 15px;
background:#f7effc;
}
#twitter_container {
min-height:45px;
height:auto !important;
height:40px;
padding-bottom:5px;
padding-top:5px;
}
#twitter_update_list {
width: 413px;
padding: 0;
overflow: hidden;
font-family: Georgia;
font-size: 14px;
font-style: italic;
color: #31353d;
line-height: 16px;
font-weight:bold;
margin-left:-13px;
}
#twitter_update_list li {
width: 400px;
list-style: none;
padding:15px;
border-bottom: dotted 1px #ccc;
}
#twitter_update_list li a {
color:#631891;
text-decoration: none;
}
#twitter_update_list li a:hover {
color: #31353d;
}
#twitter_b {
width: 430px;
height: 29px;
background:#c68aeb url(yourimagehere);
}

Of course, you will probably want to edit the CSS codes for your Twitter widget.

And that, my friends, is all it takes to create a custom Twitter widget for your website! :) Have fun, and let me know if you run into any issues.

FURTHER READING:

If you want to remove the time stamp from the tweets in your custom Twitter feed, please check out this post  – http://icode4you.net/creating-a-custom-twitter-feed-how-to-remove-the-time-stamp-from-tweets.

Make sure you also check out another post I wrote that has the styles for several different custom Twitter widgets that are all ready to incorporate into your website!

And here is a link to a post that provides the codes and instructions on how to create a Twitter feed of the search results for a certain term.

Create a custom Pinterest “Pin It” button for your website

Here is the Javascript code I use to create a Pin It button for a web page using a custom graphic:

 

<div>
<a href="javascript:void((function(){var%20e=document.createElement('script'); e.setAttribute('type','text/javascript'); e.setAttribute('charset','UTF-8'); e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)})());"> <img src="images/pinit.jpg" alt="Pin It" /></a> </div>  

You will want to change the path to the image in the code above so that it points to the graphic that you want to use for the Pin It button. You could also substitute text for the graphic if you prefer.

 

Creating a custom Twitter feed with avatars for your website

Here is the simple code I use to create a Twitter feed which includes avatars for a website:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Twitter feed with avatars</title>
	<style type="text/css">
		body {
			background: #333333;
		}
		.twtr-widget {
			float: left;
			width: 300px;
			margin: 50px 0 0 80px;
			padding: 0 0 15px;
			background: #fafafa;

			/*** cross browser box shadow ***/
			-moz-box-shadow: 0 0 2px #fff;
			-webkit-box-shadow: 0 0 2px #fff;
			-ms-filter: "progid:DXImageTransform.Microsoft.Glow(color=#ffffff,strength=3)";
			filter:
				progid:DXImageTransform.Microsoft.Shadow(color=#ffffff,direction=0,strength=3)
				progid:DXImageTransform.Microsoft.Shadow(color=#ffffff,direction=90,strength=3)
				progid:DXImageTransform.Microsoft.Shadow

(color=#ffffff,direction=180,strength=3)
				progid:DXImageTransform.Microsoft.Shadow

(color=#ffffff,direction=270,strength=3);
			box-shadow: 0 0 2px #fff;

			/*** kind of cross browser rounded corner ***/
			-webkit-border-radius: 3px;
			-khtml-border-radius: 3px;
			-moz-border-radius: 3px;
			border-radius: 3px;
		}
			.twtr-hd {
				/*** cross browser rgba ***/
				background-color: transparent;
				background-color: rgba(255,255,255,0.3);
				filter:progid:DXImageTransform.Microsoft.gradient

(startColorstr=#30ffffff,endColorstr=#30ffffff);
				-ms-filter: "progid:DXImageTransform.Microsoft.gradient

(startColorstr=#30ffffff,endColorstr=#30ffffff)";
			}
			.twtr-bd {}
				.twtr-widget .twtr-bd .twtr-tweet {
					margin: 5px 0 0;
					padding: 0 0 5px;
					border-bottom: 1px solid #cecece;
				}
				.twtr-tweet:before {
					display: block;
					float: left;
					margin: -5px 0 0 5px;
					font-size: 50px; /* let's make it a big quote! */
					color: #bababa;
					text-shadow: 0 1px 1px #909090;
					font-family: "times new roman", serif;
				}
			.twtr-ft { display: none; }
	</style>
</head>
<body>
	<script src="http://widgets.twimg.com/j/2/widget.js"></script>
	<!-- first box -->
	<script>
	new TWTR.Widget({
	  version: 2,
	  type: 'profile',
	  rpp: 4,
	  interval: 6000,
	  width: 300,
	  height: 300,
	  theme: {
		shell: {
		  background: 'transparent',
		  color: '#333'
		},
		tweets: {
		  background: 'transparent',
		  color: '#333',
		  links: '#c10000'
		}
	  },
	  features: {
		scrollbar: false,
		loop: false,
		live: false,
		hashtags: true,
		timestamp: true,
		avatars: true,
		behavior: 'all'
	  }
	}).render().setUser('thelibzter').start();
	</script>

 

You can see a working example of this Twitter feed at http://icode4you.net/wp-content/uploads/2012/02/twitterfeed_with_avatars.html.

Concrete5: How to add a unique body class to individual pages

Here is the easiest way I have found to add a unique body class to individual pages in a Concrete5 site.

First, in your dashboard go to “Pages and Themes,”then “Attributes,” and add a custom attribute (text field) called bodyclass.

Next, open your theme’s header.php file and add:

class="<?php echo $c->getCollectionAttributeValue('bodyclass')?>"

to your < body > tag, so it reads like this:

<body class="<?php echo $c->getCollectionAttributeValue('bodyclass')?>">

For any page that you want to apply a custom class to, simply add the Body Class custom attribute and type whatever class name you want into the Body Class Custom Attribute text field. When you save your changes, your opening < body > tag will now look like:

<body class="red">