Forums

cybershot

I am working with the twitter script that chris put up on this site.

http://css-tricks.com/video-screencasts ... r-updates/

I have integrated it into a site that I have been working on

http://www.wilsonwrites.com/

using this script to make it toggle

http://www.sohtanaka.com/web-design/eas ... -tutorial/

Demo can be found here
http://www.sohtanaka.com/web-design/examples/toggle/

Here is the css for the twitter and the css for the toggle that I have in my page


/*******/twitter scroll box *****/

h2.trigger {
	padding: 0 0 0 50px;
	margin: 0 0 5px 0;
	background-image: url(h2_trigger_a.gif);
	height: 46px;
	line-height: 46px;
	width: 450px;
	font-size: 2em;
	font-weight: normal;
	float: left;
	
}
h2.trigger a {
	color: #fff;
	text-decoration: none;
	display: block;
}
h2.trigger a:hover { color: #ccc; }
h2.active {background-position: left bottom;} /*--When toggle is triggered, it will shift the image to the bottom to show its \"opened\" state--*/

.toggle_container {
	margin: 0 auto;
	padding: 0 0 50px 0;
	border-top: 1px solid #d6d6d6;
	/* background: #f0f0f0 url(twitter/images/toggle_block_stretch.gif) repeat-y left top; */
	background: url(images/page-bg.jpg) top left no-repeat #2f2e2c;
	overflow: hidden;
	font-size: 1.2em;
	width: 700px;
	clear: both;
}
.toggle_container .block {
	padding: 20px; /*--Padding of Container--*/
	
	/*background: url(twitter/images/toggle_block_btm.gif) no-repeat left bottom; /*--Bottom rounded corners--*/ 
	
}

/*
         Twitter Page
		 Chris Coyier
		 http://css-tricks.com
*/

#twitter_div { 
	 
	height:360px;
	overflow:auto;
	width:376px;
	margin:50px 0 0 150px;
}

ul#twitter_update_list { 
	list-style: none; 
	font-size: 14px;
	margin-top: 25px;
}
ul#twitter_update_list li { 
	margin-bottom: 10px;
	padding: 10px;
	color: #7a8a99;
	background: url(images/transpBlue.png);
}
a { color: #96997a; }

You can download the entire package already assembled here
http://www.creativeeventsdesign.com/jquery.rar

My problem is that I can not get the image that is suppose to be displayed to show up in wordpress. It shows up on the test page in html. Not in the correct spot, but it's there. The grey one with the plus sign on it. the only thing that shows are the words.(+View My Twitter Tweets) I can not figure out why the image won't show. Please help.

chriscoyier

I'm not 100% sure, but I think the problem is in how you are doing your section comments in your CSS. That slash in the middle is ending the comment:

/*******/twitter scroll box *****/

Try this instead

/*
   Twitter Scroll Box
*/

cybershot

yep, thanks chris. Now I just got to figure out the positioning.

treehouse : what would you like to learn today?

Forums

[Solved] I can not figure this out