No replies
MyNameIsWeB
MyNameIsWeB's picture
Offline
newbie
North Carolina, USA
Last seen: 5 years 7 weeks ago
North Carolina, USA
Timezone: GMT-4
Joined: 2009-10-06
Posts: 1
Points: 1

I am having quite some trouble with my soundclick.com page. It gives you options in the design editor to go "advanced" and use CSS coding, but I am unsure of exactly what needs to be done. I am trying to add a banner to the top of my soundclick like the one seen on this page. Although you can edit the header in administration mode, it resizes it if it is too big.... so obviously that's not where I add the image at. It must be in the CSS part of the design editor, if anyone can help me add an image like the one on the link posted below, it would be greatly appreciated. I have posted the CSS coding that I already have, so that you guys may be able to assist me easier.

Many thanks, and please, if you can, help me resolve this issue soon.

/*********  SoundClick CSS Template (based on custom version Mon, Oct 05 2009)  ***********/
 
/*  general */
	body {background:#333333 url(<a href="http://cdn2.soundclick.com/20/pro/backgrounds/5/993855_0.jpg?version0" rel="nofollow">http://cdn2.soundclick.com/20/pro/backgrounds/5/993855_0.jpg?version0</a>) top center fixed no-repeat; margin:0px;}
	body,div,tr,td,select,textarea,input,option {font-family:Verdana; font-size:12px;}
	a, a:link, a:visited {color:#ececec; text-decoration:none;}
		a:hover {color:#ff0000; text-decoration:underline;}
	.pageFooter {clear:both; color:gray; padding:30px 0px 50px 20px;}
	.infoBox {width:650px; margin:50px auto; background:white; color:black; border:silver solid 1px; padding:30px; font-size:14px;}  /* hardly used, its for error messages to user */
		.infoBox .quotes {margin:20px; border:#4b4b4b dashed 1px; font-style:italic; padding:10px; background:;}
 
/*  main containers  */
	.mainTable {; color:#999999; width:990px; margin-left:auto; margin-right:auto; text-align:left;}
	.mainContent {background:url(/images/siteNav/transbgblocks/black/bg_100.png); color:#999999; width:683px; float:left; overflow:hidden; margin:10px 0px 20px 5px;} /* IE6 doesnt support our preferred overflow:visible <img src="http://csscreator.com/sites/all/modules/smileys/packs/Roving/aw.png" title="Sad" alt="Sad" class="smiley-content" /> */
 
/*  left navigation  */
	.navigation {background:url(/images/siteNav/transbgblocks/black/bg_100.png); color:#666666; width:300px; float:left; overflow:hidden; margin:10px 0px 20px 0px;}
		.navigation a:link, .navigation a:visited {color:#999999;}
		.navigation a:hover {color:#ffffff;}
	.navigationDivider {height:6px; line-height:6px; border-bottom:#232323 dashed 1px; margin-bottom:6px;}
 
/*  general elements  */
	.headline {background:#000000; color:#cccccc; font-weight:bold; border-bottom:#4b4b4b dashed 1px; border-top:#4b4b4b solid 1px; padding:3px 0px 3px 6px;}
	.headlineBig {font-size:22px; font-weight:normal;}
	.headlineSuppl {float:right; margin:10px 5px 0px 0px; color:#666666; font-size:11px; font-weight:normal;} /* for text/links on the right side of main headline (e.g. song count on main page) */
		.headlineSuppl a:link, .headlineSuppl a:visited {color:#666666; text-decoration:none;}
		.headlineSuppl a:hover {color:#ff0000; text-decoration:underline;}
	.pageturner {background:; color:#cccccc; border:#4b4b4b solid 1px; text-align:right; padding:10px; font-size:13px; font-weight:normal;} /* pages menu (previous, next..), e.g. on music page, message board */
		.pageturner .nonactive {color:#666666;}
		.pageturner a:link, .pageturner a:visited {color:#cccccc; text-decoration:none;}
		.pageturner a:hover {color:#ff0000; text-decoration:underline;}
	.listedPicsBox {border:#4b4b4b solid 1px; width:114px; height:160px; overflow:hidden; padding:2px 1px 4px 1px; margin:0px 4px 10px 4px; float:left; font-size:11px; text-align:center;}
		.listedPics {width:110px; height:125px; background-position: center center; background-repeat: no-repeat; margin:2px 0px 4px 0px; overflow:hidden}
	.breaker {height:1px; line-height:1px; clear:both}
 
/*  general color and font assets */
	.color_supplemental {color:#666666;}	/* used e.g. for song pages comments count */
	.alternateBG0 {background:none;}				/* used as background colors for comments */
	.alternateBG1 {background:none;}				/* alternate color */
 
/*  main page (the default entry page)  */
	.mainContent .contHeadline	{clear:left; font-size:14px; color:#cccccc; padding:12px 0px 2px 20px;} /* interview questions */
	.mainContent .contText {clear:left; padding-left:15px;}
	.mainContent .contInterview {clear:left; padding-left:35px;}
	.mainContent .newsBox {clear:both; background:; color:#cccccc; border:#4b4b4b solid 2px; margin:0px 20px 20px 20px; padding:20px;}
 
	/*  main page: video box (different from video page)   */	
	.videoBox_mainPage {padding:5px; margin:0px 100px 20px 100px;}
		.videoBox_mainPage .video {padding:5px; margin-bottom:10px;}
		.videoBox_mainPage .title {font-size:15px; text-align:center; margin-bottom:3px;}
		.videoBox_mainPage .shareLinks {float:right; padding:2px; border-bottom:#4b4b4b dashed 1px;}
		.videoBox_mainPage .labels {color:#666666; width:100px; padding-right:20px; text-align:right; float:left;}
		.videoBox_mainPage .info {padding-left:120px;}
		.videoBox_mainPage a:link, .videoBox_mainPage a:visited {font-size:11px; font-weight:normal; text-decoration:none;}
		.videoBox_mainPage a:hover {text-decoration:underline;}
 
	/*  main page: upcoming shows  */
	.liveshowsBox {background:#cccccc; color:#000000; width:300px; margin:15px 2px 15px 10px; float:right; clear:right;}
		.liveshowsItems {padding:4px 0px 0px 0px; font-size:11px; clear:both;}
		.liveshowsBox a:link, .liveshowsBox a:visited {color:#000000; text-decoration:none;}
		.liveshowsBox a:hover {color:#666666; text-decoration:underline; cursor:pointer;}
 
	/*  main page: standard song box on artist page (only this song box or the embedded player is used. Never both together)  */
	.playerBox {float:left; clear:left; padding-left:20px; margin:15px 0px 3px 0px;}
	.playerBox .playerHead {background:#000000; color:#cccccc; border-top:#4b4b4b solid 1px; border-bottom:#4b4b4b solid 1px; text-align:right; font-size:11px; padding:3px 5px 3px 3px;}
		.playerBox .playerHead a:link,.playerBox .playerHead a:visited {color:#666666; text-decoration:underline;}
		.playerBox .playerHead a:hover {color:#ffffff; text-decoration:underline;}
	.playerBox .songBox {background:#cccccc; border-bottom:#4b4b4b solid 1px; width:330px; padding:3px 0px 0px 1px; overflow:auto;}
	.playerBox .songBox .singleSong {color:#000000; font-size:11px; padding:1px;}
		.playerBox .songBox .singleSong:hover {background:#000000; color:#cccccc; cursor:pointer;}
 
	/*  main page: VIP embedded player (only this embedded player or the standard song box is used. Never both together) */
	.embeddedPlayer {margin:20px auto; width:620px;}
 
	/*  main page: tabbed content headers (fans,stations) */
	.tabbedCont_header li a:link, .tabbedCont_header li a:visited {background:#000000; color:#666666; text-decoration:none; margin:0px 20px 0px 0px; padding:3px 6px 3px 6px; border:#666666 solid 1px; border-bottom:none; }
		.tabbedCont_header li a:hover {color:white;}
		.tabbedCont_header li.selected a:link, .tabbedCont_header li.selected a:visited {background:#111111; color:#999999; border:#111111 solid 1px; border-top:#999999 solid 1px; font-weight:bold;}
 
	/*  main page: fans, stations (tabbed content)  */
	.fansBox {padding:30px 20px 20px 20px; clear:both;}
		.fansBox a:link, .fansBox a:visited {}
		.fansBox a:hover {}
	.fancount {background:#111111; color:#666666; text-align:right; padding:3px 5px; margin-bottom:8px; font-size:11px; font-weight:normal; border-bottom:#232323 dashed 1px; border-top:#222222 solid 1px; }
		.fancount a:link, .fancount a:visited {color:#B8B8B8; text-decoration:none;}
		.fancount a:hover {color:#E6E6E6; text-decoration:none;}
	.fansBox_content {background:url(/images/siteNav/transbgblocks/black/bg_20.png) important; background:#111111;}
	.fansBoxLastLine {background:#111111; color:#666666; clear:both; text-align:right; padding:3px 5px; margin-top:8px; font-size:11px; font-weight:normal; border-bottom:#222222 solid 1px; border-top:#232323 dashed 1px;}
		.fansBoxLastLine a:link, .fansBoxLastLine a:visited {color:#B8B8B8; text-decoration:none;}
		.fansBoxLastLine a:hover {color:#E6E6E6; text-decoration:none;}
	.stationItem {clear:both; color:black; border-bottom:#4b4b4b dashed 1px; padding:0px 1px 0px 1px;}
	.stationPicBox {float:left;}
		.stationPics {width:70px; height:70px; background-position:center center; background-repeat: no-repeat; margin:0px 0px 1px 0px; overflow:hidden}
	.stationButtonsBox {float:left; padding:2px 15px 0px 5px; height:60px;}
	.stationsText {color:#999999; height:80px; overflow:hidden;}
	.stationlink a:link, .stationlink a:visited {color:#999999; font-size:14px; text-decoration:none;}
		.stationlink a:hover {color:#ff0000; text-decoration:underline;}
 
/*  music page  */
	.songsBox {border-bottom:#4b4b4b dashed 1px; width:510px; float:left; padding-bottom:2px; margin-bottom:10px;}
		.songsBox a:link, .songsBox a:visited {text-decoration:none;}
		.songsBox a:hover {text-decoration:underline;}
	a.songtitle:link, a.songtitle:visited {color:#999999; text-decoration:none; font-size:14px; font-weight:bold;}
		a.songtitle:hover {color:#ff0000; text-decoration:underline;}
	.songsBox .actionlinks {font-size:12px;}  /* the links for full song info, add to station, rate this song... */
	.songsBox .topSong {color:#666666; float:left; text-align:left; font-size:11px;}
 
/*  comments page  */
	.commentsWelcome {background:; color:#cccccc; margin:0px 20px 20px 20px; padding:20px; border:#4b4b4b solid 1px;}
	.commentsBox {border-bottom:#4b4b4b dashed 1px; padding-top:5px;}
		.commentsBox a:link, .commentsBox a:visited {text-decoration:none;}
		.commentsBox a:hover {text-decoration:underline;}
	.commentsBox .songComment {border-bottom:#4b4b4b dashed 1px; font-size:11px; padding:1px 3px; margin-bottom:5px;}
	.commentsBox .postdate {color:#666666; font-size:11px; font-weight:normal; text-align:right; margin:0px 5px 10px 0px;}
		.commentsBox .postdate a:link, .commentsBox .postdate a:visited {text-decoration:none;} /* for delete/edit links */
		.commentsBox .postdate a:hover {text-decoration:underline;}
	.commentsBox .comment {font-size:12px; padding:0px 5px 0px 140px;}
	.commentsBox .bandSignature {border-top:#4b4b4b dashed 1px; color:#666666; width:310px; margin-top:15px; line-height:20px;}
	.commentsBox .ratingsBox {float:right; width:220px; border-left:#4b4b4b dashed 1px; margin-bottom:10px;}
			.ratingsBox .label {width:115px; text-align:right; float:left; padding-right:20px;} /* also used for .commentsPostBox .ratingsBox */
	.commentsPostBox {padding:10px; margin:20px 0px; background:#FFCC99; color:#000000; border-top:black solid 2px; border-bottom:black solid 1px;}
	.commentsPostBox .ratingsBox {background:#ECECEC; color:#000000; clear:both; padding:7px 0px; margin:0px 250px 20px 30px;}
 
/*  video page	*/
	.videoBox {background:black; color:#E0E0E0; padding:5px; line-height:22px;}
		.videoBox .video {padding:20px; margin-bottom:10px;}
		.videoBox .title {text-align:center; background:#121212; color:#F3F3F3; font-size:16px; padding:1px;}
		.videoBox .labels {color:#666666; width:200px; padding-right:20px; text-align:right; float:left;}
		.videoBox .info {float:left; width:440px;}
		.videoBox a:link, .videoBox a:visited {color:#0099CC; text-decoration:none; font-size:11px;}
		.videoBox a:hover {color:red; text-decoration:underline;}
	.videoListBox {border-top:#4b4b4b dashed 1px;}
 
/*  photo pages  */
	.photopage {background:black;}
	.selectedPhoto_box {text-align:center;}
		.selectedPhoto_box .selPhoto_title {background:#111111; color:#cccccc; border-bottom:#666666 solid 1px; font-size:15px; padding:4px;}
	.photolist {padding:10px 0px 0px 30px;}
		.photolist .photobox {background:none; float:left; width:118px; height:180px; margin:5px 0px 20px 10px; padding:5px 0px 10px 0px; overflow:hidden; cursor:pointer; text-align:center;}
			.photobox .photo {height:150px; width:118px; overflow:hidden;}
			.photobox .photoComment {color:#444444; font-size:11px;}
		.photolist .photobox_on {background:#222222; float:left; width:118px; height:180px; margin:5px 0px 20px 10px; padding:5px 0px 10px 0px; overflow:hidden; cursor:pointer; text-align:center;}
			.photobox_on .photo {height:150px; width:118px; overflow:hidden;}
			.photobox_on .photoComment {color:#999999; font-size:11px;}
 
/*  reviews page  */
	.reviewsBox {padding:10px 30px; border-bottom:#4b4b4b dashed 1px;}
	.reviewsBox .rev_headline {color:#cccccc; font-size:14px; font-weight:bold;}
	.reviewsBox .rev_text {padding:5px 5px 5px 30px; font-size:12px;}
	.reviewsBox .rev_source {text-align:right; font-size:11px; color:#666666;}
 
/*  licensing page */
	.licenseSummary {margin:0px 20px 20px 20px; padding:20px; background:; color:#cccccc; border:#4b4b4b solid 2px;}
	.licenses {margin-top:70px;}
	.licenses .headline {font-size:14px;}
	.lic_tableSongs {border:none;}
		.lic_tableSongs .columnHeaders td {border-bottom:#4b4b4b solid 1px; font-weight:bold; font-size:11px;}
		.lic_tableSongs tr td {border-bottom:#4b4b4b dashed 1px; padding:5px 0px;}
 
/*  widgets page  */
	.widgetMargin { padding:8px 0px 8px 35px;}
	.widgetSpacer {width:100; height:15px; clear:both;}
 
/* tag cloud */
	.tagCloud {padding:10px;}
	.tagCloud .cloudItem {float:left; padding:2px; white-space:nowrap; margin:0 6px 0 0;}
	.tagCloud .cloudItem:hover {background:#005782; color:white; cursor:pointer;}
	.tagCloud .cloudS10 {font-size:10px; color:#aaaaaa;}
	.tagCloud .cloudS20 {font-size:11px; color:#aaaaaa;}
	.tagCloud .cloudS30 {font-size:11px; color:#999999;}
	.tagCloud .cloudS40 {font-size:12px; color:#999999;}
	.tagCloud .cloudS50 {font-size:14px; color:#666666;}
	.tagCloud .cloudS60 {font-size:16px; color:#666666;}
	.tagCloud .cloudS70 {font-size:18px; color:#333333;}
	.tagCloud .cloudS80 {font-size:22px; color:#333333;}
	.tagCloud .cloudS90 {font-size:28px; color:#111111; }
	.tagCloud .cloudS100 {font-size:36px; color:#111111;}
	.tagCloudMore {padding:6px 0 0 0; margin:0 10px; text-align:center; border-top:#ccc solid 1px; font-size:11px;}
	.tagCloudMore a, .tagCloudMore a:link, .tagCloudMore a:visited {color:#999; text-decoration:none;}
	.tagCloudMore a:hover {color:red; text-decoration:underline; cursor:pointer;}