Olá a todos estudiosos de plantão, estamos em nossa oitava aula de como criar template para o Joomla. Estamos chegando no fim e esperam que tenham gostado. Um abraço
jan 13th by admin
Subscribe:
Blog da Empresa Estúdio Site
Comunicados, notícias, portfolios, arquivos para o joomla e muito mais.
Olá pessoal, estamos de volta agora com a 7ª aula de como criar template para o Joomla 1.5, nesta aula iremos inserir o rodapé e algumas outras informações, e o template já se encontra online para visualização: http://www.joomlarj.com.br/site
Veja os códigos até o momento do nosso projeto
Obs.: Tive que fazer algumas modificações do projeto original, pois o Internet Explorer 6 estava dando alguns erros. Mas abaixo está certinho.
************INDEX.PHP**************
<?php defined( ‘_JEXEC’ ) or die( ‘Restricted access’ ); ?>
<!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; ?>” >
<head>
<jdoc:include type=”head” />
<link rel=”stylesheet” href=”<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/reset.css” media=”all” type=”text/css” />
<link rel=”stylesheet” href=”<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/960.css” media=”all” type=”text/css” />
<link rel=”stylesheet” href=”<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css” media=”all” type=”text/css” />
<link rel=”stylesheet” href=”<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/basico_joomla.css” media=”all” type=”text/css” />
<!–Função para mudar o fundo do BODY da página–>
<?php
if($this->countModules(’banner’) == 0){
echo ‘
<style>
body {
background-image: url(http://localhost/aula_joomla/templates/aula_joomla/images/fundo_site2.jpg);
background-repeat: repeat-x;
background-position: center top;
background-color: #FFFFFF;
}
</style>’;
}
else {
echo ‘
<style>
body {
background-image: url(http://localhost/aula_joomla/templates/aula_joomla/images/fundo_site.jpg);
background-repeat: repeat-x;
background-position: center top;
background-color: #FFFFFF;
}
</style>’;
}
?>
<!–Final da Função que muda o fundo da página–>
<?php
if($this->countModules(’right’) == 0){
$grid = “grid_13″;
}
else {
$grid = “grid_9″;
}
if($this->countModules(’right’) != 0){
$grid2 = “grid_4″;
}
else {
$grid2 = “”;
}
?>
</head>
<body>
<div class=”container_16″ id=”total”>
<div id=”topo”>
<a href=”<?php echo $this->baseurl ?>” title=”Portal do Joomla Rio de Janeiro”><img src=”<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/joomla_rj_logo.jpg” class=”grid_5″ alt=”Portal do Joomla Rio de Janeiro” title=”Portal do Joomla Rio de Janeiro” /></a>
<div id=”sistema_busca” class=”grid_5 prefix_6″>
<jdoc:include type=”modules” name=”user1″ style=”xhtml” />
</div><!–final do sistema de busca–>
<div id=”menu_topo” class=”grid_10″>
<jdoc:include type=”modules” name=”user2″ style=”xhtml” />
</div><!–final do menu de topo–>
</div><!–final do topo–>
<div class=”clear”> </div><!–Separador de linha–>
<?php if($this->countModules(’banner’)) : ?>
<div id=”banner” class=”grid_16″>
<jdoc:include type=”modules” name=”banner” style=”xhtml” />
</div><!–Final do Banner–>
<?php endif; ?>
<div class=”clear”> </div><!–Separador de linha–>
<div id=”conteudo_total”>
<?php if($this->countModules(’left’)) : ?>
<div id=”esquerda” class=”grid_3″>
<jdoc:include type=”modules” name=”left” style=”xhtml” />
</div>
<?php endif; ?>
<!–Final da coluna esquerda–>
<div id=”conteudo” class=”<?php echo $grid; ?>”>
<jdoc:include type=”modules” name=”top” style=”xhtml” />
<jdoc:include type=”component” />
<jdoc:include type=”modules” name=”user3″ style=”xhtml” />
</div>
<?php if($this->countModules(’right’)) : ?>
<div id=”direita” class=”<?php echo $grid2; ?>”>
<jdoc:include type=”modules” name=”right” style=”xhtml” />
</div>
<?php endif; ?>
<div class=”clear”> </div><!–Separador de linha–>
</div><!–Final do conteudo total–>
</div><!–Final da DIV total–>
<div id=”rodape”>
<div class=”container_16″>
<div class=”grid_16″>
<jdoc:include type=”modules” name=”footer” style=”xhtml” />
</div><!–Div Grid 16–>
<div class=”clear”> </div><!–Separador de linha–>
</div><!–final do container que fixa o rodapé–>
</div><!–Final do rodapé–>
</body>
</html>
************FINAL DO INDEX.PHP*******
************TEMPLATE.CSS***********
#sistema_busca {
background-image: url(../images/fundo_sistema_busca.jpg);
background-repeat: no-repeat;
background-position: right top;
height: 55px;
}
#menu_topo {
float: right;
padding-top: 10px;
}
#menu_topo ul li{
list-style-image: none;
list-style-type: none;
display: inline;
padding-left: 30px;
}
#menu_topo ul li a{
font-family: “Myriad Pro”, Verdana, sans-serif;
font-size: 14px;
color: #ABD3E8;
text-decoration: none;
}
#menu_topo ul li a:hover{
text-decoration: underline;
color: #B92E22;
}#mod_search_searchword {
margin-top: 21px;
margin-left: 60px;
width: 200px;
background-color: transparent;
background-image: url(transparent);
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
font-family: “Myriad Pro”, Verdana, sans-serif;
font-size: 14px;
color: #B92E22;
}
#banner img {
display: block;
}
#banner img a{
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#topo {
height: 100px;
}
#rodape {
background-color: #D8DDDE;
background-image: url(../images/fundo_rodape.jpg);
background-repeat: repeat-x;
background-position: center top;
padding: 10px;
text-align: center;
}
************FINAL DO TEMPLATE.CSS***
************BASICO_JOOMLA.CSS************
/* ***************************************************************************************************** */
/* CONTENT CSS */
BODY{
font-family: “Myriad Pro”, Verdana, sans-serif;
font-size: 75.1%;
color: #454E52;
line-height: 1.9em;
}
img {
border:none;
}
P{
margin-bottom: 10px;
}
H1{
font-family: “Myriad Pro”, Verdana, sans-serif;
font-size: 32px;
color: #454E52;
font-weight: normal;
margin-bottom: 20px;
}
H2{
color: #B92E22;
font-family: “Myriad Pro”, Verdana, sans-serif;
font-weight: normal;
font-size: 22px;
margin-bottom: 15px;
}
H3{
}
a:link, a:active, a:visited{
color: #B92E22;
text-decoration: none;
}
a:hover{
}
/* ***************************************************************************************************** */
/* TEMPLATE SPECIFIC CSS CODE */
/* ***************************************************************************************************** */
/* JOOMLA SPECIFIC CSS CODE */
.article_separator{
}
.adminform{
}
.author{
}
.bannerfooter{
}
.bannergroup{
}
.bannerheader{
}
.banneritem{
}
.blog{
}
.blog_more{
}
.blogsection{
}
.breadcrumbs{
}
.button{
}
.buttonheading{
}
.clr{
clear:both
}
.componentheading, .contentheading{
}
.content_email{
}
.content_rating{
}
.content_vote{
}
.contentdecription{
}
.contentpagetitle{
}
.contentpane{
}
.contentpaneopen{
}
.contenttoc{
}
.createdate{
}
.created-date{
}
.date{
}
.input{
}
.inputbox{
}
.intro{
}
.latestnews{
}
.loclink{
}
a.mainlevel:link, a.mainlevel:active, a.mainlevel:visited{
}
a.mainlevel:hover{
}
.message{
}
.metadata{
}
.modifydate{
}
.module{
}
.moduletable{
}
.mosimage{
}
.mosimage_caption{
}
.mostread{
}
.newsfeed{
}
.outline{
}
.pagenav{
}
.pagenav_next{
}
.pagenav_prev{
}
.pagenavbar{
}
.pagenavcounter{
}
.pathway{
}
.pollstableboarder{
}
.read{
}
.search{
}
.searchintro{
}
.sections{
}
.sectiontable_footer{
}
.sectiontableentry{
}
.sectiontablefooter{
}
.sectiontableheader{
}
.small{
}.smalldark{
}
a.sublevel:link, a.sublevel:active, a.sublevel:visited{
}
a.sublevel:hover{
}
.title{
}
.wrapper{
}
************FINAL DO BASICO_JOOMLA.CSS*****
dez 08th by admin
Aprenda de forma simples e profissional a criar templates lindos para o cms Joomla! Um dos melhores gerenciadores de conteúdo em PHP. Iremos utilizar Grid 960 e muito mais.
Veja abaixo os codigos da página “index.php” e “template.css” utilizados nesta aula.
*********************INDEX.PHP**********************
<?php defined( ‘_JEXEC’ ) or die( ‘Restricted access’ ); ?>
<!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; ?>” >
<head>
<jdoc:include type=”head” />
<link rel=”stylesheet” href=”<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/960.css” media=”all” type=”text/css” />
<link rel=”stylesheet” href=”<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/reset.css” media=”all” type=”text/css” />
<link rel=”stylesheet” href=”<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css” media=”all” type=”text/css” />
<!–Função para mudar o fundo do BODY da página–>
<?php
if($this->countModules(’banner’) == 0){
echo ‘
<style>
body {
background-image: url(http://localhost/aula_joomla/templates/aula_joomla/images/fundo_site2.jpg);
background-repeat: repeat-x;
background-position: center top;
background-color: #FFFFFF;
}
</style>’;
}
else {
echo ‘
<style>
body {
background-image: url(http://localhost/aula_joomla/templates/aula_joomla/images/fundo_site.jpg);
background-repeat: repeat-x;
background-position: center top;
background-color: #FFFFFF;
}
</style>’;
}
?>
<!–Final da Função que muda o fundo da página–>
<!–Função para determinar o tamanho do conteúdo–>
<?php
if($this->countModules(’right’) == 0){
$grid = “grid_13″;
}
else {
$grid = “grid_9″;
}
if($this->countModules(’right’) != 0){
$grid2 = “grid_4″;
}
else {
$grid2 = “”;
}
?>
<!–Final da função pra determinar o tamanho do conteúdo–>
</head>
<body>
<div class=”container_16″ id=”total”>
<div id=”topo”>
<a href=”<?php echo $this->baseurl ?>” title=”Portal do Joomla Rio de Janeiro”><img src=”<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/Joomla_rj_logo.jpg” class=”grid_5″ alt=”Portal do Joomla Rio de Janeiro” title=”Portal do Joomla Rio de Janeiro” style=”float:left;” /></a>
<div id=”sistema_busca” class=”grid_5 prefix_6″>
<jdoc:include type=”modules” name=”user1″ style=”xhtml” />
</div><!–final do sistema de busca–>
<div id=”menu_topo” class=”grid_10″>
<jdoc:include type=”modules” name=”user2″ style=”xhtml” />
</div><!–final do menu de topo–>
</div><!–final do topo–>
<div class=”clear”> </div><!–Separador de linha–>
<?php if($this->countModules(’banner’)) : ?>
<div id=”banner” class=”grid_16″>
<jdoc:include type=”modules” name=”banner” style=”xhtml” />
</div><!–Final do Banner–>
<?php endif; ?>
<div class=”clear”> </div><!–Separador de linha–>
<div id=”conteudo_total”>
<?php if($this->countModules(’left’)) : ?>
<div id=”esquerda” class=”grid_3″>
<jdoc:include type=”modules” name=”left” style=”xhtml” />
</div>
<?php endif; ?>
<!–Final da coluna esquerda–>
<?php if($this->params->get(’showComponent’)) : ?>
<div id=”conteudo” class=”<?php echo $grid; ?>”>
<jdoc:include type=”modules” name=”top” style=”xhtml” />
<jdoc:include type=”component” />
<jdoc:include type=”modules” name=”user3″ style=”xhtml” />
</div>
<?php endif; ?>
<!–Final do conteúdo–>
<?php if($this->countModules(’right’)) : ?>
<div id=”direita” class=”<?php echo $grid2; ?>”>
<jdoc:include type=”modules” name=”right” style=”xhtml” />
</div>
<?php endif; ?>
</div><!–Final do conteudo total–>
<div class=”clear”> </div><!–Separador de linha–>
</div><!–Final da DIV total–>
</body>
</html>
*********************FINAL DA INDEX.PHP*********************
*************************TEMPLATE.CSS***********************
body {
}
#sistema_busca {
background-image: url(../images/fundo_sistema_busca.jpg);
background-repeat: no-repeat;
background-position: right top;
height: 55px;
}
#menu_topo {
float: right;
padding-top: 10px;
}
#menu_topo ul li{
list-style-image: none;
list-style-type: none;
display: inline;
padding-left: 30px;
}
#menu_topo ul li a{
font-family: “Myriad Pro”, Verdana, sans-serif;
font-size: 14px;
color: #ABD3E8;
text-decoration: none;
}
#menu_topo ul li a:hover{
text-decoration: underline;
color: #B92E22;
}#mod_search_searchword {
margin-top: 21px;
margin-left: 60px;
width: 200px;
background-color: transparent;
background-image: url(transparent);
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
font-family: “Myriad Pro”, Verdana, sans-serif;
font-size: 14px;
color: #B92E22;
}
#banner img {
display: block;
}
#banner img a{
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
******************FINAL DO TEMPLATE.CSS******************
dez 02nd by admin
Aprenda como desenvolver templates profissionais para o Joomla 1.5, essa é a 5ª aula de uma seqüência de vídeos. Iremos utilizar Grid 960, Dreamweaver e muito mais.
Veja abaixo os codigos da página “index.php” e “template.css” utilizados nesta aula.
*********************INDEX.PHP**********************
<?php defined( ‘_JEXEC’ ) or die( ‘Restricted access’ ); ?>
<!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; ?>” >
<head>
<jdoc:include type=”head” />
<link rel=”stylesheet” href=”<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/960.css” media=”all” type=”text/css” />
<link rel=”stylesheet” href=”<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/reset.css” media=”all” type=”text/css” />
<link rel=”stylesheet” href=”<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css” media=”all” type=”text/css” />
<!–Função para mudar o fundo do BODY da página–>
<?php
if($this->countModules(’banner’) == 0){
echo ‘
<style>
body {
background-image: url(http://localhost/aula_joomla/templates/aula_joomla/images/fundo_site2.jpg);
background-repeat: repeat-x;
background-position: center top;
background-color: #FFFFFF;
}
</style>’;
}
else {
echo ‘
<style>
body {
background-image: url(http://localhost/aula_joomla/templates/aula_joomla/images/fundo_site.jpg);
background-repeat: repeat-x;
background-position: center top;
background-color: #FFFFFF;
}
</style>’;
}
?>
<!–Final da Função que muda o fundo da página–>
</head>
<body>
<div class=”container_16″ id=”total”>
<div id=”topo”>
<a href=”<?php echo $this->baseurl ?>” title=”Portal do Joomla Rio de Janeiro”><img src=”<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/Joomla_rj_logo.jpg” class=”grid_5″ alt=”Portal do Joomla Rio de Janeiro” title=”Portal do Joomla Rio de Janeiro” style=”float:left;” /></a>
<div id=”sistema_busca” class=”grid_5 prefix_6″>
<jdoc:include type=”modules” name=”user1″ style=”xhtml” />
</div><!–final do sistema de busca–>
<div id=”menu_topo” class=”grid_10″>
<jdoc:include type=”modules” name=”user2″ style=”xhtml” />
</div><!–final do menu de topo–>
</div><!–final do topo–>
<div class=”clear”> </div><!–Separador de linha–>
<?php if($this->countModules(’banner’)) : ?>
<div id=”banner” class=”grid_16″>
<jdoc:include type=”modules” name=”banner” style=”xhtml” />
</div><!–Final do Banner–>
<?php endif; ?>
<div class=”clear”> </div><!–Separador de linha–>
</div><!–Final da DIV total–>
</body>
</html>
*********************FINAL DA INDEX.PHP*********************
*************************TEMPLATE.CSS************************
body {
}
#sistema_busca {
background-image: url(../images/fundo_sistema_busca.jpg);
background-repeat: no-repeat;
background-position: right top;
height: 55px;
}
#menu_topo {
float: right;
padding-top: 10px;
}
#menu_topo ul li{
list-style-image: none;
list-style-type: none;
display: inline;
padding-left: 30px;
}
#menu_topo ul li a{
font-family: “Myriad Pro”, Verdana, sans-serif;
font-size: 14px;
color: #ABD3E8;
text-decoration: none;
}
#menu_topo ul li a:hover{
text-decoration: underline;
color: #B92E22;
}#mod_search_searchword {
margin-top: 21px;
margin-left: 60px;
width: 200px;
background-color: transparent;
background-image: url(transparent);
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
font-family: “Myriad Pro”, Verdana, sans-serif;
font-size: 14px;
color: #B92E22;
}
#banner img {
display: block;
}
#banner img a{
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
******************FINAL DO TEMPLATE.CSS******************
dez 02nd by admin
Aprenda como desenvolver templates profissionais para o Joomla 1.5, essa é a 4ª aula de uma seqüência de vídeos. Iremos utilizar Grid 960, Dreamweaver e muito mais.
nov 26th by admin
Categorias
Posts Recentes
- Vaga para Webdesigner com conhecimentos Joomla
- A Estúdio Site e a Plataforma Moodle
- Entregue o novo Site da Gama Júnior
- Site Institucional da Infoshield
- Site Institucional Compass
- Site Intitucional Assistência 10
- Site Institucional Eleganza Eventos
- Site Intitucional Tecnoplan Engenharia
- Site Institucional DolceVita
- Site institucional do Sindicato dos Trabalhadores de Construção da região de São Gonçalo
Parceiros
Lista de Links