animation in header- solved
Posted: Mon Feb 13, 2012 10:59 pm
I am trying to add animation in the header. Specifically, replace the cms made simple logo with my site animation logo (swf). I have downloaded both the object tag and the swfobject tag as recommended. I have tried different codes that I found from previous posts without any luck. I have read through some previous posts, however I cannot get it to work. I am using trial and error since I am new at this. I have very little experience with website building. Any help would be greatly appreciated.
Below is the standard CSS code for layout Layout: Left sidebar + 1 column:
/* begin Header */
div.Header
{
margin: 0 auto;
position: relative;
z-index:0;
width: 880px;
height: 175px;
}
/* end Header */
/* border just the bottom */
border-bottom: 1px solid #D9E2E6;
}
div#header h1 a {
/* you can set your own image here */
background: url([[root_url]]/uploads/ngrey/logoCMS.png) no-repeat left top;
/* this will make the "a" link a solid shape */
display: block;
/* adjust according your image size */
height: 100px;
/* this hides the text */
text-indent: -999em;
/* old firefox would have shown underline for the link, this explicitly hides it */
text-decoration: none;
}
div#header h1 {
margin: 0;
padding: 0;
/*these keep IE6 from pushing the header to more than the set size*/
line-height: 0;
font-size: 0;
/* this will keep IE6 from flickering on hover */
background: url([[root_url]]/uploads/ngrey/logoCMS.png) no-repeat left top;
}
div#header h2 {
/* this is where the site name is */
float: right;
line-height: 1.2em;
/* this keeps IE6 from not showing the whole text */
font-size: 1.5em;
/* keeps the size uniform */
margin: 35px 65px 0px 0px;
/* adjust according your text size */
color: #f4f4f4;
}
div.crbk {
/* sets all to 0 */
margin: 0;
padding: 0;
/* you can set your own image here */
background: url([[root_url]]/uploads/ngrey/mainrtup.gif) no-repeat right bottom;
}
div.breadcrumbs {
/* CSS short hand rule first value is top then right, bottom and left */
padding: 1em 0em 1em 1em;
/* its good to set font sizes to be relative, this way viewer can change his/her font size */
font-size: 90%;
/* css shorthand rule will be opened to be "0px 0px 0px 0px" */
margin: 0px;
/* you can set your own image here */
background: url([[root_url]]/uploads/ngrey/mainleftup.gif) no-repeat left bottom;
}
div.breadcrumbs span.lastitem {
font-weight: bold;
Which part do I need to modify and with what. Again any help would be appreciated.
Below is the standard CSS code for layout Layout: Left sidebar + 1 column:
/* begin Header */
div.Header
{
margin: 0 auto;
position: relative;
z-index:0;
width: 880px;
height: 175px;
}
/* end Header */
/* border just the bottom */
border-bottom: 1px solid #D9E2E6;
}
div#header h1 a {
/* you can set your own image here */
background: url([[root_url]]/uploads/ngrey/logoCMS.png) no-repeat left top;
/* this will make the "a" link a solid shape */
display: block;
/* adjust according your image size */
height: 100px;
/* this hides the text */
text-indent: -999em;
/* old firefox would have shown underline for the link, this explicitly hides it */
text-decoration: none;
}
div#header h1 {
margin: 0;
padding: 0;
/*these keep IE6 from pushing the header to more than the set size*/
line-height: 0;
font-size: 0;
/* this will keep IE6 from flickering on hover */
background: url([[root_url]]/uploads/ngrey/logoCMS.png) no-repeat left top;
}
div#header h2 {
/* this is where the site name is */
float: right;
line-height: 1.2em;
/* this keeps IE6 from not showing the whole text */
font-size: 1.5em;
/* keeps the size uniform */
margin: 35px 65px 0px 0px;
/* adjust according your text size */
color: #f4f4f4;
}
div.crbk {
/* sets all to 0 */
margin: 0;
padding: 0;
/* you can set your own image here */
background: url([[root_url]]/uploads/ngrey/mainrtup.gif) no-repeat right bottom;
}
div.breadcrumbs {
/* CSS short hand rule first value is top then right, bottom and left */
padding: 1em 0em 1em 1em;
/* its good to set font sizes to be relative, this way viewer can change his/her font size */
font-size: 90%;
/* css shorthand rule will be opened to be "0px 0px 0px 0px" */
margin: 0px;
/* you can set your own image here */
background: url([[root_url]]/uploads/ngrey/mainleftup.gif) no-repeat left bottom;
}
div.breadcrumbs span.lastitem {
font-weight: bold;
Which part do I need to modify and with what. Again any help would be appreciated.