Imagem como título em modulo

marceloc · Mensagem por **marceloc** » 15 Set 2008, 01:00

Olá a todos!

Estou desenvolvendo um template em joomla 1.5 do zero, até para melhor entender o seu funcionamento.
O que eu gostaria de saber é como faço para colocar uma imagem como título de um módulo. Sei que o ideal é chamar a imagem pelo css, até já consegui, mas não consigo posicionar a imagem acima do módulo.

Obs.: Tenho algum conhecimento em css.

Se alguém puder ajudar, agradeço.

Um abraço,
Marcelo

pchardnet · Mensagem por **pchardnet** » 15 Set 2008, 16:31

Marcelo,

você pode postar aqui o CSS que está usando?

marceloc · Mensagem por **marceloc** » 16 Set 2008, 14:53

pchardnet,

Segue o código do index.php:

Código: Selecionar todos

<!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" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
<head>
	<jdoc:include type="head" />

	<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template.css" type="text/css" />

	</head>

	<body>

<div id="wrap">
		<div id="header">			
					<jdoc:include type="modules" name="search" />
		</div>
	
					<!-- BEGIN: MAIN NAVIGATION -->
		<div id="menu">
				<jdoc:include type="modules" name="menu" />
			</div>
					<!-- END: MAIN NAVIGATION -->

		<div id="banner">	
				<jdoc:include type="modules" name="banner" style="xhtml" />
		</div>
		
		<div id="advert">
			<div id="advert1"></div>
			<div id="advert2"></div>
			<div id="advert3"></div>
		</div>

			<div id="destaques">
					<jdoc:include type="modules" name="user3" style="xhtml" />
			</div>

			<div id="servicos">
					<jdoc:include type="modules" name="user4" style="xhtml" />
			</div>
			
			<div id="botoes">
				<div id="botao1"></div>
				<div id="botao2"></div>
				<div id="botao3"></div>
				<div id="botao4"></div>
			</div>
		

		

		
		
</div>

<!--

		<div id="tit_servicos"></div>
			<div id="servicos">
					<jdoc:include type="modules" name="user4" style="xhtml" />
			</div>


		<div id="footer">
			<div class="inside">		
				<jdoc:include type="modules" name="footer" style="xhtml" />
			</div>
		</div>
		
		
		<div id="img_2"></div>
		<div id="img_3"></div>
		
		
	--	>
		<!--end of wrap-->
			
	</body>
</html>

Código CCS:

Código: Selecionar todos

/* COMMON STYLE
--------------------------------------------------------- */

html, body, form, fieldset {
	margin: 10px 10px 10px 10px;
	padding: 0;
}

body {
	font-size:	76%;
	font-family:	Verdana, Geneva, Arial, Helvetica, sans-serif;
	line-height:	1.3;
	color: #000000;
	background: #FFFFFF;
}

body#bd {
	color: #333333;
	background: #F2F2F2;
}

body.contentpane {
	width: auto; /* Printable Page */
	margin: 1em 2em;
	line-height: 1.3em;
	margin: 0px 0px 0px 0px;
	font-size: 12px;
	color: #333;
}


/*Tipografia*/

*{
	margin:		0;
	padding:	0;
}

h1,h2,h3,h4,h5,h6,p,blockquote,form,label,ul,ol,dl,fieldset,address {
	margin:		0.5em 0;
}

li,dd {
	margin-left:	1em;
}

fieldset {
	padding:	0.5em;
}

img {
border: 0 none; 
}


/* Normal link */
a {
	color: #333;
	text-decoration: none;
}

a:hover, a:active, a:focus {
	color: #800080;
	text-decoration: underline;
}

h1, componentheading{
	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
	font-size:		1.7em;
}

h2, contentheading{
	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
	font-size:		1.5em;
}

h3{
	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
	font-size:		1.3em;
}

h4{
	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
	font-size:		1.2em;
}
h5{
	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
	font-size:		1.1em;
}
h6{
	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
	font-size:		1em;
	font-weight:	bold;
}

#footer, .small, .createdate, .modifydate, .mosimage_caption, .readmore{
	font:			0.8em;
	font-family:	Verdana, Geneva, Arial, Helvetica, sans-serif;
	color:			#999;
}

.moduletable{
	margin-bottom: 	1em;
	padding:		0 10px;
}

.moduletable h3{
	background:		#666;
	color:			#fff;
	padding:		0.25em 0;
	text-align:		center;
	font-size:		1.1em;
	margin:			0 -10px 0.5em -10px;
	
}



/* ------------------------------
PAGE STRUCTURE
------------------------------ */

/* #container has an absolute width (850 pixel) */


#wrap{

	min-width:	860px;*/
	min-width: 	860px;
	width:		auto; 		/*IE Hack*/
	width:		860px; 		/*IE Hack*/
	margin:		0 auto ; 		/*Center Hack*/
	text-align:	left;		/*Center Hack*/
	border:		1px solid #999;
	height:		1200px;
}



#header{
	margin: 10px 10px 10px 10px;
	background:		#fff url(../images/topo.png) no-repeat left;
	height:			125px;
	width:			840px;
}

#header input{
	background: #fff url(../images/icon-search.gif) no-repeat center right;
	color:			 #999999;
	border:			1px solid #C0C0C0;
	height:			12px;
	width:			140px;
	padding:		2px;
	font:			.8em Verdana, Geneva, Arial, Helvetica, sans-serif;

}

#header .search{
	float:	right;
	margin:	70px 2px 5px 0;
	overflow:		hidden;
}
	

#menu{
	width:auto;
	margin: 10px 10px 10px 10px;
	display:block;
	height:30px;
	border:		1px solid #999;
	background: #FFFF99;
	width:	840px;
}
#menu a{
	heigth:28px;
	line-height:28px;
	padding:0 8px;
	font-size:		1.3em;
	font-family:	Arial, Helvetica, sans-serif;	
	font-style:normal;
	font-weight: bold;
	font-variant:small-caps;
	display:inline;
}

#destaques{
	background:		url(../images/bg_destaques.png);
	width:		295px;
	height:		550px;
	/*margin:	10px 0 0 5px; /* for IE */
	margin:	2px 0 0 5px;
	float:left;
	border:		1px solid #666;
}

	


#servicos{
	background:		url(../images/bg_servicos.png);
	width:		295px;
	height:		550px;
	/*margin:	10px 0 0 5px; /* for IE */
	margin:	2px 0 0 5px;
	float:left;
	border:		1px solid #666;
}


#banner{
	width:600px;
	float:left;
	height:auto;
	background: #FFFF99;
}

#advert{
	background:		#ccc;
	height:			270px;
	width:			230px;
}

#advert1{
	background:		url(../images/anuncio_estudantes.png);
	height:			155px;
	width:			230px;
}

#advert2{
	background:		url(../images/anuncio_banners.png);
	height:			60px;
	width:			230px;
}

#advert3{
	background:		url(../images/anuncio_cartaovisitas.png);
	height:			55px;
	width:			230px;
}


#botoes{
	background:		#ccc;
	height:			100%;
	width:			230px;
	margin:			20px 0px 0px 10px;
}

#botao1{
	background:		url(../images/bt_msn.png);
	height:			100px;
	width:			230px;
	margin:			0 0 20px 10px;
}

#botao2{
	background:		url(../images/bt_cadastro.png);
	height:			100px;
	width:			230px;
	margin:			0 0 20px 10px;
}

#botao3{
	background:		url(../images/bt_online.png);
	height:			110px;
	width:			230px;
	margin:			0 0 20px 10px;
}

#botao4{
	background:		url(../images/bt_portfolio.png);
	height:			120px;
	width:			230px;
	margin:			0 0 20px 10px;

}

O que preciso é colocar uma imagem de título sobre os módulos "user3" e "user4", destaques e serviços, respectivamente.

É possível ver que em outros lugares do template, coloquei imagens que desejo linkar com artigos do Joomla. Seria essa a melhor maneira? Ou teria algum módulo que me permita fazer isso?

Um abraço e obrigado pela ajuda,

Marcelo

pchardnet · Mensagem por **pchardnet** » 16 Set 2008, 19:10

Eu faria da seguinte forma:
- adicionaria mais uma div exatamente acima do módulo e colocaria a imagem.

marceloc · Mensagem por **marceloc** » 17 Set 2008, 13:21

Valeu pela ajuda!

Acho que consegui alguma coisa, pelo menos no Firefox está funcionando perfeitamente. No IE6 está apresentando alguns problemas, pelo menos em relação aos links, que nenhum funciona, pelo menos quando uso uma imagem de background nas divs "User 3" e "User4". Não sei se esse problema ocorre por estar em localhost, com o VertrigoServ.

Index.php:

Código: Selecionar todos

<!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" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
<head>
	<jdoc:include type="head" />

	<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template.css" type="text/css" />

	</head>

	<body>

<div id="wrap">
		<div id="header">			
					<jdoc:include type="modules" name="search" />
		</div>
	
					<!-- BEGIN: MAIN NAVIGATION -->
		<div id="menu">
				<jdoc:include type="modules" name="menu" />
			</div>
					<!-- END: MAIN NAVIGATION -->

		<div id="banner">	
				<jdoc:include type="modules" name="banner" style="xhtml" />
		</div>
		
		<div id="advert">
			<div id="advert1"></div>
			<div id="advert2"></div>
			<div id="advert3"></div>
		</div>

			
			<div id="container">
				<div id="container_destaques">
				<div id=tit_destaques></div>
					<div id=user3>
						<jdoc:include type="modules" name="user3" style="xhtml" />				
					</div>
							<div id=mais_destaques></div>
				
				</div>
				
				<div id="container_servicos">
				<div id=tit_servicos></div>
					<div id=user4>
						<jdoc:include type="modules" name="user4" style="xhtml" />				
					</div>
							<div id=mais_servicos></div>
				
				</div>
				
							
			

			
				<div id="botoes">
						<div id="botao1"></div>
						<div id="botao2"></div>
						<div id="botao3"></div>
					<div id="botao4"></div>
				</div>
			</div>	
		
</div>

<!--

		<div id="tit_servicos"></div>
			<div id="servicos">
					<jdoc:include type="modules" name="user4" style="xhtml" />
			</div>


		<div id="footer">
			<div class="inside">		
				<jdoc:include type="modules" name="footer" style="xhtml" />
			</div>
		</div>
		
		
		<div id="img_2"></div>
		<div id="img_3"></div>
		
		
	--	>
		<!--end of wrap-->
			
	</body>
</html>

CSS:

Código: Selecionar todos

/* COMMON STYLE
--------------------------------------------------------- */

html, body, form, fieldset {
	margin: 10px 10px 10px 10px;
	padding: 0;
}

body {
	font-size:	76%;
	font-family:	Verdana, Geneva, Arial, Helvetica, sans-serif;
	line-height:	1.3;
	color: #000000;
	background: #FFFFFF;
}

body#bd {
	color: #333333;
	background: #F2F2F2;
}

body.contentpane {
	width: auto; /* Printable Page */
	margin: 1em 2em;
	line-height: 1.3em;
	margin: 0px 0px 0px 0px;
	font-size: 12px;
	color: #333;
}


/*Tipografia*/

*{
	margin:		0;
	padding:	0;
}

h1,h2,h3,h4,h5,h6,p,blockquote,form,label,ul,ol,dl,fieldset,address {
	margin:		0.5em 0;
}

li,dd {
	margin-left:	1em;
}

fieldset {
	padding:	0.5em;
}

img {
border: 0 none; 
}


/* Normal link */
a {
	color: #333;
	text-decoration: none;
}

a:hover, a:active, a:focus {
	color: #800080;
	text-decoration: underline;
}

h1, componentheading{
	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
	font-size:		1.7em;
}

h2, contentheading{
	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
	font-size:		1.5em;
}

h3{
	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
	font-size:		1.3em;
}

h4{
	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
	font-size:		1.2em;
}
h5{
	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
	font-size:		1.1em;
}
h6{
	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
	font-size:		1em;
	font-weight:	bold;
}

#footer, .small, .createdate, .modifydate, .mosimage_caption, .readmore{
	font:			0.8em;
	font-family:	Verdana, Geneva, Arial, Helvetica, sans-serif;
	color:			#999;
}

.moduletable{
	
	width:			auto;
	height:			auto;
}

.moduletable h3{
	background:		GREEN;
	width:			295px;
	height:			30px;
	color:			#fff;
	text-align:		left;
	font-size:		1.1em;	
}


.moduletable_destaques{
	
	width:		295px;
	height:		550px;
	/*margin:	10px 0 0 5px; /* for IE */
	margin:	2px 0 0 5px;
	float:left;
	border:		1px solid #666;

}

.moduletable_destaques h3{
	background:		url(../images/tit_destaques.png);
	width:			295px;
	height:			30px;
	color:			transparent;
}

#mais_destaques{
	background:		url(../images/tit_destaques.png);
	width:			295px;
	height:			20px;
}


/* ------------------------------
PAGE STRUCTURE
------------------------------ */

/* #container has an absolute width (850 pixel) */


#wrap{

	min-width:	860px;*/
	min-width: 	860px;
	width:		auto; 		/*IE Hack*/
	width:		860px; 		/*IE Hack*/
	margin:		0 auto ; 		/*Center Hack*/
	text-align:	left;		/*Center Hack*/
	border:		1px solid #999;
	height:		1200px;
}



#header{
	margin: 10px 10px 10px 10px;
	background:		#fff url(../images/topo.png) no-repeat left;
	height:			125px;
	width:			840px;
}

#header input{
	background: #fff url(../images/icon-search.gif) no-repeat center right;
	color:			 #999999;
	border:			1px solid #C0C0C0;
	height:			12px;
	width:			140px;
	padding:		2px;
	font:			.8em Verdana, Geneva, Arial, Helvetica, sans-serif;

}

#header .search{
	float:	right;
	margin:	70px 2px 5px 0;
	overflow:		hidden;
}
	

#menu{
	width:auto;
	margin: 10px 10px 10px 10px;
	display:block;
	height:30px;
	border:		1px solid #999;
	background: #FFFF99;
	width:	840px;
}
#menu a{
	heigth:28px;
	line-height:28px;
	padding:0 8px;
	font-size:		1.3em;
	font-family:	Arial, Helvetica, sans-serif;	
	font-style:normal;
	font-weight: bold;
	font-variant:small-caps;
	display:inline;
}

	
#container{
	width:		840px;
	height:		650px;
	/*margin:	10px 0 0 5px; /* for IE */
	margin:	10px 0 0 10px;
	float:left;
	overflow:		hidden;
}

#container_destaques{
	background:	none;
	width:		295px;
	height:		580px;
	float:		left;
	margin:		0;
}

#tit_destaques{
	background:	url(../images/tit_destaques.png);
	width:		295px;
	height:		30px;
	float:		left;
	margin:		0;
}
#user3{
	width:			295px;
	height:			540px;
	background:		url(../images/bg_destaques.png);
	margin:			30px 0 0 0px;
}

#mais_destaques{
	background:		url(../images/veja_destaques.png);
	width:			295px;
	height:			20px;
	float:			left;
}


#container_servicos{
	width:		295px;
	height:		580px;
	/*margin:	10px 0 0 5px; /* for IE */
	margin:		0 0 0 10px;
	float:		left;
}

#tit_servicos{
	background:		url(../images/tit_servicos.png);
	width:		295px;
	height:		30px;
	float:		left;
	margin:		0;
}
#user4{
	width:			295px;
	height:			540px;
	background:		url(../images/bg_servicos.png);
	margin:			30px 0 0 0px;
}

#mais_servicos{
	background:		url(../images/veja_servicos.png);
	width:		295px;
	height:		20px;
}

#banner{
	width:600px;
	float:left;
	height:auto;
	background: none;
	margin:	0 0 0 10px;
}

#advert{
	background:		none;
	height:			270px;
	width:			230px;
	margin:			0 0 0 620px;
}

#advert1{
	background:		url(../images/anuncio_estudantes.png);
	height:			155px;
	width:			230px;
}

#advert2{
	background:		url(../images/anuncio_banners.png);
	height:			60px;
	width:			230px;
}

#advert3{
	background:		url(../images/anuncio_cartaovisitas.png);
	height:			55px;
	width:			230px;
}


#botoes{
	width:		230px;
	height:		auto;
	margin:		50px 0 0 0;
	float:		right;
}

#botao1{
	background:		url(../images/bt_msn.png);
	height:			100px;
	width:			230px;
	margin:			0 0 20px 0px;
}

#botao2{
	background:		url(../images/bt_cadastro.png);
	height:			100px;
	width:			230px;
	margin:			0 0 20px 0px;
}

#botao3{
	background:		url(../images/bt_online.png);
	height:			110px;
	width:			230px;
	margin:			0 0 20px 0px;
}

#botao4{
	background:		url(../images/bt_portfolio.png);
	height:			120px;
	width:			230px;
	margin:			0 0 20px 0px;

}

Ainda tenho que ver como fazer links com as imagens, efeitos rollover, etc. Você acha que devo fazer esses links e efeitos às imagens diretamente pelo css?

Um abraço e obrigado pela ajuda.

Marcelo

pchardnet · Mensagem por **pchardnet** » 17 Set 2008, 14:39

Link via CSS? Isso é possível? Creio que não.

Eu não sei exatamente onde quer chegar, mas pelo que entendi vc está tentando fazer tudo pelo caminho mais difícil.

Uma imagem como título do módulo pode ser feita da forma que expliquei anteriormente.
Já colocar efeito é melhor ter esta imagem dentro de um módulo do tipo HTML.

Sinceramente, eu não copiei seu código para minha máquina, pois as imagens faltariam e eu não teria como ver nada.

marceloc · Mensagem por **marceloc** » 17 Set 2008, 15:55

Pois é...acho que estou meio que me complicando.

Sempre desenvolvi sites com tabelas e com um editor visual (Namo WebEditor, similar ao Dreamweaver), mas como sei que se eu utilizar padrões web, meu site ficará melhor estruturado e de mais fácil navegabilidade. Por isso, estou usando esse projeto para poder aprender sobre essa técnica.

Só que é claro qua acabm surgundo diversas dúvidas e a que tenho nesse momento é que eu tenho muitas imagens no site e essas imagens acessarão conteúdo (chamei essas imagens de botões e advert).
Também, gostaria de que ao passar o cursor por essas imagens, elas mudassem de cor (efeito rollover).

Pra ficar melhor o entendimento, vou colocar a imagem da layout do site.

Imagem Site:
Imagem

Se tiver alguma sugestão para melhor desenvolver esse trabalho, agradeço.

Um abraço,
Marcelo

luizchiaradia · Mensagem por **luizchiaradia** » 10 Out 2008, 13:18

Uma coisa importante que você deve pensar quando esta construindo um template para o joomla é que ele possui um padrão, uma estrutura que você deve conhecer a fundo. Conhecendo esta estrutura você poderá pensar seu layout já levando em consideração estes atributos do joomla. Com isto você evita cair em situações complicadas. Um exemplo:

Quero que o título dos meu módulos sejam imagens:

O joomla a princípio não trata o título dos módulos como imagens. Você poderá personaliza-lo colocando imagens de fundo, icones na frente, tudo isto através do css, mas o título em si é apresentado como texto. Você tem a possibilidade de utilizar sufixo nos módulos e criar estilos para cada um no css, o que aumenta o grau de personalização de cada módulo.

A solução que você utilizou para o titulo não é a melhor pois você limitou o seu template a uma estrutura fixa em relação a posição (ex. USER4) e aparência (ex. <div id=tit_servicos></div>) dos módulos. Deste jeito todo módulo que for setado para aparecer na área USER4 aparecerá com o título pricipal setado no tit_serviços.

Neste caso eu criaria, no css, estilos para os vários modulos utilizando sufixo.

.module-servicos h3, .module-destaques h3

Desta forma você poderá personalizar o título de cada um colocando uma imagem e setando para não mostrar o titulo do módulo. Desta forma somente a imagem aparecerá e o texto do titulo não será mostrado pelo joomla.

marceloc · Mensagem por **marceloc** » 14 Nov 2008, 16:08

Muito obrigado pela ajuda,

fiz uma pesquisa a fundo sobre o css do joomla (css guide) e consegui entender bem a sua estrutura.

Mas tem uma coisa que seria interessante que ainda não encontrei.
Seria um módulo (assim posso colocar em qualquer DIV) de imagem, com ligação para um link no site. Acho até que algum módulo de banner serviria, mas o que seria perfeito é se eu pudesse adicionar um efeito do tipo "hover", ou seja ao passar o cursor sobre a imagem, ela trocasse por outra.

Um abraço,
Marcelo

Fóruns do Joomla.com.br e JoomlaBrasil.org

Imagem como título em modulo

Imagem como título em modulo

Re: Imagem como título em modulo

Re: Imagem como título em modulo

Re: Imagem como título em modulo

Re: Imagem como título em modulo

Re: Imagem como título em modulo

Re: Imagem como título em modulo

Re: Imagem como título em modulo

Re: Imagem como título em modulo