Como adaptar template colocando animação em flash no topo?

Discussões relativas ao desenvolvimento de templates para Joomla!
Responder
ricardo.luis.reis
Novato
Mensagens: 7
Registrado em: 08 Mar 2009, 02:35

Como adaptar template colocando animação em flash no topo?

Mensagem por ricardo.luis.reis »

Olá

Preciso adaptar um template, colocando uma aimação em flash no topo.
O layout original do template é assim:
Imagem

E a minha intenção é transforma-lo assim
Imagem

Se fosse apenas para transformar em o topo em uma imagem jpg ou gif não tem problema, eu consegui fazer...
Mas eu preciso que o topo seja um arquifo swf.

- Observem que eu preciso eliminar os espaços "TOP" e "BANNER" transformando em apenas um espaço para a animação no topo.
- Estou usando o joomla 1.0 por que o template q eu consegui era nessa versão.

alguém sabe?
Voltar ao topo
ricardo.luis.reis
Novato
Mensagens: 7
Registrado em: 08 Mar 2009, 02:35

Re: Como adaptar template colocando animação em flash no topo?

Mensagem por ricardo.luis.reis »

E ai pessoal,
poxa, minha dúvida está muito banal ou extremamente difícil?
o tópico já teve umas cinquenta visualizações e nenhuma resposta...
alguém me dê ao menos uma luz ai... por onde começar....

valeu
Voltar ao topo
ricardo.luis.reis
Novato
Mensagens: 7
Registrado em: 08 Mar 2009, 02:35

Re: Como adaptar template colocando animação em flash no topo?

Mensagem por ricardo.luis.reis »

O código do index.php do meu template é o seguinte:

Código: Selecionar todos

<?php
defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' );
require($mosConfig_absolute_path."/templates/" . $mainframe->getTemplate() . "/rt_styleswitcher.php");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php
if ( $my->id ) {
	initEditor();
}
mosShowHead();

// *************************************************
// Change this variable blow to switch color-schemes
//
// If you have any issues, check out the forum at
// http://www.rockettheme.com
//
// *************************************************

$default_style = "style1";				// custom | [style1... style10]
$primary_style = "blue";				// blue | brown | darkgrey | green | purple | red | sienna | slate | white | yellow
$secondary_style = "medium";			// light | medium | dark
$menu_style = "sienna";					// sienna | red | green | darkgrey | blue | beige | yellow | purple
$body_style = "dark";					// dark
$template_width = "975";				// width in px | fluid
$side_width = "200";						// width in px
$menu_name = "mainmenu";				// mainmenu by default, can be any Joomla menu name
$menu_type = "moomenu";					// moomenu | suckerfish | splitmenu | module
$default_font = "default";      // smaller | default | larger
$show_pathway = "true";					// true | false
$enable_rokzoom = "true";				// true | false

require($mosConfig_absolute_path."/templates/" . $mainframe->getTemplate() . "/rt_styleloader.php");

if ($tstyle != "custom") setStyles($tstyle);

$sidenav = false;
if ($mtype=="splitmenu") :
	require($mosConfig_absolute_path."/templates/" . $mainframe->getTemplate() . "/rt_splitmenu.php");
	$topnav = rtShowHorizMenu($menu_name);
	$sidenav = rtShowSubMenu($menu_name, "-hilite4");
elseif ($mtype=="moomenu" or $mtype=="suckerfish") :
	require($mosConfig_absolute_path."/templates/" . $mainframe->getTemplate() . "/rt_moomenu.php");
	$sidenav = false;
endif;

if ($template_width=="fluid") { 
	$template_width = "width: 100%;";
} else {
	$template_width = 'margin: 0 auto; width: ' . $template_width . 'px;';
}

// make sure sidenav is empty
if (strlen($sidenav) < 10) $sidenav = false;

//Are we in edit mode
$editmode = false;
if (  !empty( $_REQUEST['task'])  && $_REQUEST['task'] == 'edit'  ) :
	$editmode = true;
endif;

?>
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<link rel="shortcut icon" href="<?php echo $mosConfig_live_site;?>/images/favicon.ico" />
<?php if($mtype=="moomenu" or $mtype=="suckerfish") :?>
<link href="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/css/rokmoomenu.css" rel="stylesheet" type="text/css" />
<?php endif; ?>
<link href="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/css/template_css.css" rel="stylesheet" type="text/css" />
<link href="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/css/secondary-<?php echo $secondary_style; ?>.css" rel="stylesheet" type="text/css" />
<link href="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/css/primary-<?php echo $primary_style; ?>.css" rel="stylesheet" type="text/css" />
<link href="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/css/menu-<?php echo $menu_style; ?>.css" rel="stylesheet" type="text/css" />
<link href="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/css/body-<?php echo $body_style; ?>.css" rel="stylesheet" type="text/css" />
<link href="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/css/rokslidestrip.css" rel="stylesheet" type="text/css" />
<?php if($enable_rokzoom=="true") :?>
<link href="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/rokzoom/rokzoom.css" rel="stylesheet" type="text/css" />
<?php endif; ?>
<!--[if lte IE 6]>
<link href="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/css/template_ie6.css" rel="stylesheet" type="text/css" />
<style type="text/css">
img { behavior: url(<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/css/iepngfix.htc); }
.alpha-shadow div { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/rokzoom/shadow2.png', sizingMethod='crop'); background: none; }
</style>
<![endif]-->
<style type="text/css">
	div.wrapper { <?php echo $template_width; ?>}
	td.sidenav { width:<?php echo $side_width; ?>px;}
</style>
<script type="text/javascript" src="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/js/mootools-release-1.11.js"></script>
<?php if($enable_rokzoom=="true") :?>
<script type="text/javascript" src="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/rokzoom/rokzoom.js"></script>
<?php endif; ?>
<?php if($mtype=="moomenu") :?>
<script type="text/javascript" src="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/js/mootools.bgiframe.js"></script>
<script type="text/javascript" src="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/js/rokmoomenu.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
	new Rokmoomenu($E('ul.nav'), {
		bgiframe: false,
		delay: 500,
		animate: {
			props: ['opacity', 'width', 'height'],
			opts: {
				duration:400,
				fps: 100,
				transition: Fx.Transitions.Cubic.easeOut
				}
			}
		});
	});
</script>
<?php endif; ?>
<?php if($enable_rokzoom=="true") :?>
	<script type="text/javascript">
		window.addEvent('load', function() {
			RokZoom.init({
				imageDir: 'templates/<?php echo $mainframe->getTemplate(); ?>/rokzoom/images/',
				resizeFX: {
					duration: 700,
					transition: Fx.Transitions.Cubic.easeOut,
					wait: true
				},
				opacityFX: {
					duration: 500,
					wait: false	
				}
			});
		});
	</script>
<?php endif; ?>
<?php if($mtype=="suckerfish") :
  echo "<!--[if IE]>\n";
 	 include_once( "$mosConfig_absolute_path/templates/" . $mainframe->getTemplate() . "/js/ie_suckerfish.js" );
  echo "<![endif]-->\n";
endif; ?>
</head>
<body id="page_bg" class="<?php echo $fontstyle; ?>">

	<div id="header">
		<div class="wrapper">
			<div class="shadow-l">
				<div class="shadow-r">
					<a href="<?php echo $mosConfig_live_site;?>" class="nounder"><img src="<?php echo $mosConfig_live_site;?>/images/blank.png" alt="" id="logo" /></a>
					<div id="topblock">
						<?php mosLoadModules('top', -1); ?>
					</div>
					<div id="banner">
						<div class="padding">
							<?php mosLoadModules('banner', -1); ?>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>	
	<div id="horiz-menu">
		<div class="wrapper">
			<div class="shadow-l">
				<div class="shadow-r">
				<?php if($mtype == "splitmenu") : ?>
					<?php echo $topnav; ?>
				<?php elseif($mtype=="moomenu" or $mtype=="suckerfish") : ?>
					<?php mosShowListMenu($menu_name);	?>
				<?php else: ?>
	      	<?php mosLoadModules('toolbar',-1); ?>
		    <?php endif; ?>				
				</div>
			</div>
		</div>
	</div>
	<div id="divider">
		<div class="wrapper">
			<div class="shadow-l">
				<div class="shadow-r">
				</div>
			</div>
		</div>
	</div>	
	<div id="mainbody">
		<div class="wrapper">
			<div class="shadow-l">
				<div class="shadow-r">
					<table class="mainbody" cellspacing="0" cellpadding="0">
						<tr valign="top">
							<td class="mainbody<?php if (!mosCountModules('user6') and (!mosCountModules('right'))) : ?> empty<?php endif; ?>">
								<div class="padding">
									<?php if (mosCountModules('advert1')) : ?>
									<div class="topadvert">
										<?php mosLoadModules('advert1', -2); ?>
									</div>
									<?php endif; ?>
									<?php if ($show_pathway == "true") : ?>
									<div id="pathway">
										<?php mosPathway(); ?>
									</div>
									<?php endif; ?>
									<table class="subbody" cellspacing="0" cellpadding="0">
										<tr valign="top">
											<?php if(!$editmode and (mosCountModules('left') or ($sidenav))) : ?>
											<td class="sidenav left">
												<?php if($sidenav) : ?>
												<div id="vert-menu">
													<?php echo $sidenav; ?>
												</div>
												<?php endif; ?>
												<?php mosLoadModules('left', -3); ?>												
											</td>
											<?php endif; ?>
											<td class="subbody">
												<?php mosLoadModules('user1', -2); ?>	
												<?php mosMainbody(); ?>
												<?php mosLoadModules('user2', -2); ?>	
											</td>
											<?php if(!$editmode and mosCountModules('inset')) : ?>
											<td class="inset">
												<?php mosLoadModules('inset', -2); ?>												
											</td>
											<?php endif; ?>
										</tr>
									</table>
								</div>
							</td>
							<?php if (mosCountModules('user6') or (mosCountModules('right'))) : ?>
							<td class="sidebar">
								<div class="padding">
									<?php mosLoadModules('right', -2); ?>	
								</div>
								<br />
								<img src="<?php echo $mosConfig_live_site;?>/images/blank.png" alt="" width="180" height="1" />
							</td>
							<?php endif; ?>
						</tr>
					</table>
				</div>
			</div>
		</div>
	</div>
	<div id="bottom">
		<div class="wrapper">
			<div class="shadow-l">
				<div class="shadow-r">
					<div class="shadow-l2">
						<div class="shadow-r2">
							<table class="bottom" cellspacing="0" cellpadding="0">
								<tr valign="top">
									<td class="mainbottom<?php if (!mosCountModules('user6') and (!mosCountModules('right'))) : ?> empty<?php endif; ?>">
										<div class="padding">
											<?php $section1count = mosCountModules('user3') + mosCountModules('user4') + mosCountModules('user5'); ?>
											<?php if($section1count) : ?>
											<?php $section1width = 'w' . floor(99 / $section1count); ?>
											<table class="sections" cellspacing="0" cellpadding="0">
												<tr valign="top">
													<?php if(mosCountModules('user3')) : ?>
													<td class="section <?php echo $section1width ?>">
														<?php mosLoadModules('user3', -2); ?>
													</td>
													<?php endif; ?>
													<?php if(mosCountModules('user4')) : ?>
													<td class="section <?php echo $section1width; ?>">
														<?php mosLoadModules('user4', -2); ?>
													</td>
													<?php endif; ?>
													<?php if(mosCountModules('user5')) : ?>
													<td class="section <?php echo $section1width; ?>">
														<?php mosLoadModules('user5', -2); ?>
													</td>
													<?php endif; ?>
												</tr>
											</table>
											<?php endif; ?>
											
										</div>
										&nbsp;
									</td>
									<?php if (mosCountModules('user6') or (mosCountModules('right'))) : ?>
									<td class="sidebar">
										<div class="padding">
											<?php mosLoadModules('user6', -2); ?>
										</div>
										<br />
										<img src="<?php echo $mosConfig_live_site;?>/images/blank.png" alt="" width="180" height="1" />
									</td>
									<?php endif; ?>
								</tr>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>		
	<div id="footer">
		<div class="wrapper">
			<div class="shadow-l">
				<div class="shadow-r">
						<table class="footer" cellspacing="0" cellpadding="0">
							<tr valign="top">
								<td class="mainfooter<?php if (!mosCountModules('user6') and (!mosCountModules('right'))) : ?> empty<?php endif; ?>">
									<a href="http://www.rockettheme.com/" title="RocketTheme Joomla Template Club" class="nounder"><img src="<?php echo $mosConfig_live_site;?>/images/blank.png" style="border:0;" alt="RocketTheme Joomla Templates" id="rocket" /></a>
								</td>
								<?php if (mosCountModules('user6') or (mosCountModules('right'))) : ?>
								<td class="sidebar">&nbsp;
									
								</td>
								<?php endif; ?>
							</tr>
						</table>			
				</div>
			</div>
		</div>
	</div>	


</body>
</html>
Voltar ao topo
ricardo.luis.reis
Novato
Mensagens: 7
Registrado em: 08 Mar 2009, 02:35

Re: Como adaptar template colocando animação em flash no topo?

Mensagem por ricardo.luis.reis »

Consegui, após inúmeras tentativas fazer minha animação aparecer...
Inseri os códigos dentro do index.php do meu template, mas tem 2 problemas:
- Não estou conseguindo ajustar o posicionamento da animação. Devo fazer isso usando os outros arquivos CSS desse demplate?
- No FIREFOX a animação aparece exatamente em cima do layout original, isso é, não houve um deslocamento de linhas para baixo, a animação está escondendo partes fundamentais como o menu e conteúdo. No I.Explorer o a animação aparece e felizmente, as partes do site (menu e conteúdo) se deslocam para baixo, deixando o layout mais ou menos como eu quero.

Quais as dicas para eu acertar o posicionamento correto da animação?
Voltar ao topo
pchardnet
Site Admin
Mensagens: 747
Registrado em: 14 Jul 2008, 14:14
Localização: Belo Horizonte - MG
Contato:
Contato pchardnet

Re: Como adaptar template colocando animação em flash no topo?

Mensagem por pchardnet »

Ricardo,

o seu template é do rockettheme, correto?
Sugiro então que busque suporte com o desenvolvedor do template, pois se pagou tem pleno direito a suporte.
Certamente irão lhe ajudar resolver este problema.
http://www.hostphi.com- Hospedagem de sites e prestação de serviços em Joomla!

http://www.joomlaminas.org - meu blog sobre o Joomla!



---
Não tiro dúvidas por MP
Voltar ao topo
ricardo.luis.reis
Novato
Mensagens: 7
Registrado em: 08 Mar 2009, 02:35

Re: Como adaptar template colocando animação em flash no topo?

Mensagem por ricardo.luis.reis »

Correto pchardnet

Eu paguei ao Rocket Teme para baixar os templates e utiliza-los conforme são fornecidos. Me dão suporte para problemas como, instalação, personalização (alterar cores, logotipo), gerenciamento do conteúdo através através do administrador, módulos...
Mas mudanças mais complexas eles não dão acessoria, somente direto com o desenvolvedor e isso se torna um serviço a parte, gerando mais custos.
Esse template não foi desenvolvido para possuir um flash no topo e nem para serem excluídos os espaços pré definidos no layout. Portanto meu objetivo é fazer uma adapatação que extrapola os serviços de suporte do Rocket Theme, cujo já paguei e eu tinha conciência disso.
Portanto contino solicitando a ajuda dos amigos desse forum.
Se alguém puder me ajudar, fico agradecido.

Obrigado
Voltar ao topo
pchardnet
Site Admin
Mensagens: 747
Registrado em: 14 Jul 2008, 14:14
Localização: Belo Horizonte - MG
Contato:
Contato pchardnet

Re: Como adaptar template colocando animação em flash no topo?

Mensagem por pchardnet »

Ricardo,
para quem desenvolveu não é nada complexo mudar o que deseja. E fico surpreso com a posição do pessoal da RT em relação ao suporte.

Quanto ao seu problema vou chutar aqui

Mude este bloco

Código: Selecionar todos

   <div id="header">
      <div class="wrapper">
         <div class="shadow-l">
            <div class="shadow-r">
               <a href="<?php echo $mosConfig_live_site;?>" class="nounder"><img src="<?php echo $mosConfig_live_site;?>/images/blank.png" alt="" id="logo" /></a>
               <div id="topblock">
                  <?php mosLoadModules('top', -1); ?>
               </div>
               <div id="banner">
                  <div class="padding">
                     <?php mosLoadModules('banner', -1); ?>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
Para isso

Código: Selecionar todos

   <div id="header">
      <div class="wrapper">
         <div class="shadow-l">
            <div class="shadow-r">
              <?php mosLoadModules('top', -1); ?>
            </div>
         </div>
      </div>
   </div>


E publique o módulo que carregará seu flahs na posição TOP
http://www.hostphi.com- Hospedagem de sites e prestação de serviços em Joomla!

http://www.joomlaminas.org - meu blog sobre o Joomla!



---
Não tiro dúvidas por MP
Voltar ao topo
ricardo.luis.reis
Novato
Mensagens: 7
Registrado em: 08 Mar 2009, 02:35

Re: Como adaptar template colocando animação em flash no topo?

Mensagem por ricardo.luis.reis »

Obrigado pelo chute, vou tentar agora e ver se me ajuda.
Qnto ao suporte, apenas para exclarecer, ele não foi negado não, mas fica restrito ao que eu comentei anteriormente. Para fazer as minhas alterações seria um serviço a parte, o valor pago é referente a mensalidade que dá direito aos downloads e ao suporte padrão.

Por enquanto valeu... e eu vou ao trabalho, vamos ver se resolve.
Voltar ao topo
ricardo.luis.reis
Novato
Mensagens: 7
Registrado em: 08 Mar 2009, 02:35

Re: Como adaptar template colocando animação em flash no topo?

Mensagem por ricardo.luis.reis »

beleza funcionou...
Mas no firefox o flash continua escondendo, por cima do menu e conteúdo. No internet explorer está legal, o flash entra e o menu e conteudo são deslocados para baixo.
como resolver o problema no firefox??
Voltar ao topo
benito
Novato
Mensagens: 6
Registrado em: 17 Mar 2009, 07:07

Re: Como adaptar template colocando animação em flash no topo?

Mensagem por benito »

Ola Ricardo qual é o nome do seu site

Benito
Voltar ao topo
pchardnet
Site Admin
Mensagens: 747
Registrado em: 14 Jul 2008, 14:14
Localização: Belo Horizonte - MG
Contato:
Contato pchardnet

Re: Como adaptar template colocando animação em flash no topo?

Mensagem por pchardnet »

ricardo,

existe um parametro chamado WMODE que aceitar alguns valores, como: transparent, opaque, etc... (pesquise)

Creio que a inserção deste parametro no <embeb> resolverá seu problema.
http://www.hostphi.com- Hospedagem de sites e prestação de serviços em Joomla!

http://www.joomlaminas.org - meu blog sobre o Joomla!



---
Não tiro dúvidas por MP
Voltar ao topo
Avatar do usuário
Bruno Mendes
Novato
Mensagens: 27
Registrado em: 18 Mar 2009, 14:00
Localização: São Paulo
Contato:
Contato Bruno Mendes

Re: Como adaptar template colocando animação em flash no topo?

Mensagem por Bruno Mendes »

Bom.. nao sei se já foi resolvido, man.. traquilao... o q vc vai fazer é o seguinte:

No Administrator, Extenções/ Administrar modulos, crie um módulo HTML

Coloquei um título qualquer, pode ser Banner Flash, deixa para nao exibir título, escolha a posição de Exibição no Banner (posição que está no topo da página de acordo aonde vc qr colocar o flash)

No campo de texto do módulo (um pouco mais abixo) coloque para aparecer modulo HTML(exibir/ocultar) coloque o código html do seu banner em flash. Clique em Salvar e pronto!

Caso seja necessário, faça as atualizações como alinhamento etc, tudo pelo css, provavelmente estará no arquivo template.css

Blz?

É simples.. qualquer dúvida entre em contato

Abs,
Bruno Mendes,

Twitter
brunomp87
Voltar ao topo
Responder

Voltar para “Templates”