animation in header- solved
animation in header- solved
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.
Last edited by jwozni2 on Sun Feb 19, 2012 2:51 am, edited 1 time in total.
Re: animation in header
For swf type objects in header or any where in page you need to add it to the template not the style sheet...
Re: animation in header
Thanks for your help.
I am running SMSMS 1.10.3
Object V 0.2
I am still cannot get it to come up. I did not modify my CSS files. Here is my header code:
{* Start Header, with logo image that links to the default start page. Logo image is changed in the stylesheet "Layout: Left sidebar + 1 column" *}
<div id="header">
{* this holds the name of the site on the right side *}
<h2 class="headright">{sitename}</h2>
{object src='uploads/virtualdentalcenter.swf' width='650' height='84' class='flashplayer'}
{* a link back to home page and the header left image/logo, text is hidden using CSS *}
<h1>{cms_selflink dir="start" text="$sitename"}</h1>
<hr class="accessibility" />
</div>
{* End Header *}
Any help would be appreciated.
I am running SMSMS 1.10.3
Object V 0.2
I am still cannot get it to come up. I did not modify my CSS files. Here is my header code:
{* Start Header, with logo image that links to the default start page. Logo image is changed in the stylesheet "Layout: Left sidebar + 1 column" *}
<div id="header">
{* this holds the name of the site on the right side *}
<h2 class="headright">{sitename}</h2>
{object src='uploads/virtualdentalcenter.swf' width='650' height='84' class='flashplayer'}
{* a link back to home page and the header left image/logo, text is hidden using CSS *}
<h1>{cms_selflink dir="start" text="$sitename"}</h1>
<hr class="accessibility" />
</div>
{* End Header *}
Any help would be appreciated.
Re: animation in header
A link to the site would really help...
Re: animation in header
The site is virtualdentalcenter.net.
It is the logo in the header. I have tried different variations of the code and I still cannot get it. Thanks again for taking the time to help me with this issue.
It is the logo in the header. I have tried different variations of the code and I still cannot get it. Thanks again for taking the time to help me with this issue.
Last edited by jwozni2 on Sun Feb 19, 2012 2:54 am, edited 1 time in total.
Re: animation in header
You are getting an error on the path to the swf file
virtualdentalcenter.net/uploads/virtualdentalcenter.swf...
You may want to look at your config.php, root URL...
<base href="virtualdentalcenter.net//" />
Note the // after .net...
virtualdentalcenter.net/uploads/virtualdentalcenter.swf...
You may want to look at your config.php, root URL...
<base href="virtualdentalcenter.net//" />
Note the // after .net...
Re: animation in header
Thank you sir, it works.
Re: animation in header
Please add [solved] to the first post subject...
You still need to clean up the HTML, you have the same menu called twice, on the left and in the footer, neither one will work in ie6 when you have 2 of them...
You still need to clean up the HTML, you have the same menu called twice, on the left and in the footer, neither one will work in ie6 when you have 2 of them...
Re: animation in header- solved
Which part of the code are you referring to? Which menu should I be using. Again you have been a wealth of information. 

Re: animation in header- solved
The original has {menu template='cssmenu.tpl'} for the left menu and {menu} for the footer menu which in default install is using simple_navigation.tpl as the default menu template...
Using the cssmenu.tpl in 2 places gives an HTML error because it has
<div id="menuwrapper">
<ul id="primary-nav">
and IDs have to be unique(only used once) unlike a class which can be used many times...
Do you really want drop downs in the footer?...
Using the cssmenu.tpl in 2 places gives an HTML error because it has
<div id="menuwrapper">
<ul id="primary-nav">
and IDs have to be unique(only used once) unlike a class which can be used many times...
Do you really want drop downs in the footer?...
Re: animation in header- solved
How do I get rid of the drop down menus in the footer without effecting the rest of the page?
Also I am trying to change the color of the disappearing border around the general menu as well as the page. On the home page this is the area where you can see our mission. I have changed the color in the css menu vertical which does not do anything on the page.
Please be patient with me. I have no page making experience.
Thanks again.
Also I am trying to change the color of the disappearing border around the general menu as well as the page. On the home page this is the area where you can see our mission. I have changed the color in the css menu vertical which does not do anything on the page.
Please be patient with me. I have no page making experience.
Thanks again.
Re: animation in header- solved
Those aren't borders they are images, look in the CSS for background: url( )...
This is from the menu side...
virtualdentalcenter.net/uploads/ngrey/mainrtup.gif
The footer menu call that was there in the default is {menu} which uses whatever menu template is chosen as default, on a normal install that is the simple_navigation.tpl, check menu manager or just use {menu template='simple_navigation.tpl} in the footer...
This is from the menu side...
virtualdentalcenter.net/uploads/ngrey/mainrtup.gif
The footer menu call that was there in the default is {menu} which uses whatever menu template is chosen as default, on a normal install that is the simple_navigation.tpl, check menu manager or just use {menu template='simple_navigation.tpl} in the footer...
Re: animation in header- solved
Thank you for all your help. I could not have done a lot of the mods without your help.
I have another question.
I have changed the background of the home page. It appears that the top portion of the background is an image. How can I eliminate this image and make the background consistent with the bottom portion?
Here is an example:
virtualdentalcenter.net
Thanks again.
I have another question.
I have changed the background of the home page. It appears that the top portion of the background is an image. How can I eliminate this image and make the background consistent with the bottom portion?
Here is an example:
virtualdentalcenter.net
Thanks again.
Re: animation in header- solved
that template takes 4 images to make the top and bottom of the Main content look that way, they are the background for these 4 divs...
<div class="back1">
<div class="back2">
<div class="back3">
<div id="main">
The left side has background images for these 2...
<div id="sidebar">
<div id="sidebara">
<div class="back1">
<div class="back2">
<div class="back3">
<div id="main">
The left side has background images for these 2...
<div id="sidebar">
<div id="sidebara">
Re: animation in header- solved
I have tried modifying these files and I am not getting any changes. I am probably not doing the right thing. As you can see on the home page I am also trying to eliminate the image in the lower portion of the css nav menu. I would like the menu background to be completely blue. I know which file it is. Would this work if I deleted the file? I have tried changing the background color which probably doesn't do anything because the image is still here.
I appreciate you taking the time to help me though this. As I mentioned I have zero programming experience. I have learned a lot just by trial and error with your suggestions.
I appreciate you taking the time to help me though this. As I mentioned I have zero programming experience. I have learned a lot just by trial and error with your suggestions.