Joomla: versão: 1.5.5
Idioma: Portugues Br / PT / English
Instalado: Conteudo de exemplo durante a instalação.
Template: Ja hedera versão 1.5 - fabricante: Joomlart
Servidor: cpanel e localhost + wamp server com apache
Bom pessoal.. vamos lá ...
Depois de ter perdido horas procurando um template que faz paginação de conteudo.. encontrei esse que é bastante interessante.
Site oficial do template:
http://template.joomlart.com/ja_hedera/index.php
Instalei o template.. tudo ok. mas notei um erro critico nas imagens do menu left 1.. o primeiro menu horizontal... do template...
Perdi novamente horas procurando o erro do template.... no painel de controle e não encontrei nada que configura-se a posição do menu, pensei que era a ordem dos menus causando problema, inverti a posiçao do Default J! Menu com last products, não funcionou...
Pensei então que o problema era na construção do template e comecei a decifrar o seu codigo de construção e a entende-lo, notei que poderia ser nas tabelas dos arquivos .css que fazem a construção dos menus suspensos chamados float em linguagem de style sheets, bom de fato nesses arquivos estao toda a configuraçao de como vai ficar as "tabelas" do site, a posição x e y na tela, borda, sombra, etc.
Então o caminho para o estudo desses elementos é:
Local onde o joomla está instalado exemplo dentro da pasta: joomla
joomla/templates/ja_headera1.5/css/
ajudando a entender; O joomla trabalha com templates, todos os templates são guardados dentro de uma pasta chamada obviamente templates, lá você encontra os templates padrões instalados e você pode instalar o seu adicional que no caso foi instalado o ja_hadera1.5, nesse local você pode mudar seus templates e ver a configuração e construção dos mesmos.
Como instalar templates no joomla ?
Simples, baixe seu template, tira do arquivo .zip e joga a pasta dentro da pasta templates...
acesse o painel de controle do joomla, se estiver instalado em localhost... acesse assim:
acesse o painel do administrador com a senha que vc gerou durante a instalação do joomla
vá na guia Extensions e depois click em Template manager ( gerenciador de template) marque com uma bolinha qual template quer parcar como padrão.. ele ficará com uma estrilinha, salve. e veja que foi instalado o template, agora para instalar os mudulos adicionais do template, como slide de imagens, etc. va na mesma guia e utilize o install module, carregue somente o arquivo do modulo .zip e click em instalar...
Bom, trabalhei em procura do erro do .css
primeiramente trabalhei como template.css que é responsavel pelas configurações de apresentação do template...
segue o codigo desse arquivo.. com algumas informações postas por mim...
crie um arquivo template.txt e cole esse codigo dentro... depois renomeie o arquivo .txt para trocar a extensão para .css ficando assim: template.css
agora você conseguirá visualizar melhor o codigo. ou opte por um programa muito interessante da http://www.bradsoft.com/ que se chama topstyle , esse programa é especifico para editar arquivos .css muito legal. com certeza você vai ver melhor usando esse programa e principalmente os comentários que fiz....
/*------------------------------------------------------------------------
# JA Hedera 1.0 - Oct, 2007
# ------------------------------------------------------------------------
# Copyright (C) 2004-2006 J.O.O.M Solutions Co., Ltd. All Rights Reserved.
# @license - Copyrighted Commercial Software
# Author: J.O.O.M Solutions Co., Ltd
# Websites: http://www.joomlart.com - http://www.joomlancers.com
-------------------------------------------------------------------------*/
/* COMMON STYLE
--------------------------------------------------------- */
html, body, form, fieldset {
margin: 0;
padding: 0;
}
body {
color: #000000;
background: #FFFFFF;
font-family: Tahoma, Arial, Helvetica, sans-serif;
line-height: 150%;
}
body#bd {
color: #666666;
background: #E6E6E6;
}
body.contentpane {
width: auto; /* Printable Page */
margin: 1em 2em;
background: #FFFFFF;
color: #000000;
font-size: 12pt;
font-family: serif;
line-height: 140%;
}
body.fs1 {
font-size: 9px;
}
body.fs2{
font-size: 10px;
}
body.fs3{
font-size: 11px;
}
body.fs4{
font-size: 12px;
}
body.fs5{
font-size: 13px;
}
body.fs6{
font-size: 14px;
}
/* Normal link */
a {
color: #3172B4;
text-decoration: none;
}
a:hover, a:active, a:focus {
color: #3172B4;
text-decoration: underline;
}
/* Title text */
.contentheading, .componentheading, .blog_more strong, h1, h2, h3 {
font-family: "Segoe UI", "Trebuchet MS", Tahoma, Arial, Helvetica, sans-serif;
font-weight: normal;
}
/* Small text */
small, .small, .smalldark, .mosimage_caption {
color: #999999;
font-size: 100%;
}
/* Heading */
h1 {
font-size: 180%;
}
h2 {
font-size: 155%;
}
h3 {
font-size: 125%;
font-weight: bold;
}
h4 {
font-size: 100%;
text-transform: uppercase;
}
p, pre, blockquote, ul, ol, h1, h2, h3, h4, h5, h6 {
margin: 10px 0;
padding: 0;
}
ul {
list-style: none;
}
ul li {
padding-left: 33px;
background: url(../images/arrow.png) no-repeat 18px 5px;
line-height: 180%;
}
ol li {
margin-left: 35px;
line-height: 180%;
}
th {
padding: 5px;
font-weight: bold;
text-align: left;
}
fieldset {
border: none;
}
fieldset a {
font-weight: bold;
}
hr {
border-top: 1px solid #DDDDDD;
border-right: 0;
border-left: 0;
border-bottom: 0;
height: 1px;
}
a img {
border: none;
}
td, div {
font-size: 100%;
}
/* FORM
--------------------------------------------------------- */
form {
margin: 0;
padding: 0;
}
form label {
cursor: pointer;
}
input, select, textarea, .inputbox {
padding: 1px;
font-family: Tahoma, Arial, sans-serif;
font-size: 100%;
}
select, textarea, .inputbox {
background: #FFFFFF;
color: #666666;
}
.button {
padding: 2px 5px;
border: 1px solid #6E9DCD;
color: #FFFFFF;
background: url(../images/but-bg.gif) repeat-x center #6E9DCD;
}
* html .button, *+html .button {
padding: 2px 3px !important;
border: 1px solid #FFFFFF;
}
.inputbox {
margin-bottom: 1px;
padding: 3px 2px;
border: 1px solid #DDDDDD;
background: #FFFFFF;
}
.inputbox:hover, .inputbox:focus {
}
/* BONUS TYPOGRAPHY STYLES
--------------------------------------------------------- */
pre, .code {
padding: 10px 15px;
margin: 5px 0 15px;
border-left: 5px solid #999999;
background: #F0F5FB;
}
blockquote {
padding: 1em 40px 1em 15px;
}
blockquote span.open {
padding: 0 0 0 20px;
background: url(../images/so-q.gif) no-repeat left top;
}
blockquote span.close {
padding: 0 20px 0 0;
background: url(../images/sc-q.gif) no-repeat bottom right;
}
/* Small quote */
.small-quote {
margin: 0;
padding: 0;
background: none;
}
.small-quote span.open-quote {
margin: 0;
padding-left: 20px;
background: url(../images/so-q.gif) no-repeat center left;
}
.small-quote span.close-quote {
margin: 0;
padding-right: 20px;
background: url(../images/sc-q.gif) no-repeat center right;
}
.small-quote span.author {
padding: 2px 5px 2px 20px;
border-top: 1px solid #DDDDDD;
margin: 0.5em 0 0;
display: block;
background: url(../images/author.gif) no-repeat 5px 4px #DDDDDD;
font-size: 90%;
text-transform: uppercase;
}
/* Dropcap */
.dropcap {
float: left;
padding: 4px 8px 0 0;
display: block;
color: #3172B4;
font: 50px/40px Georgia, Times, serif;
}
/* Tips, Error, Message, Hightlight*/
.error {
padding-left: 25px;
color: #CC0000;
background: url(../images/bullet-error.gif) no-repeat top left;
}
.message {
padding-left: 25px;
color: #FF7705;
background: url(../images/bullet-info.gif) no-repeat top left;
}
.tips {
padding-left: 25px;
color: #3172B4;
background: url(../images/bullet-tips.gif) no-repeat top left;
}
.highlight {
padding: 1px 5px;
background: #F0F5FB;
font-weight: bold;
}
/* Note Style */
p.stickynote {
padding: 10px 0px 10px 50px;
border: 1px solid #DDDDDD;
background: url(../images/sticky-bg.gif) no-repeat 5px 10px #FFFFFF;
}
p.download {
padding: 10px 0px 10px 50px;
border: 1px solid #DDDDDD;
background: url(../images/download-bg.gif) no-repeat 5px 10px #FFFFFF;
}
.blocknumber {
clear: both;
padding: 5px 15px 10px;
position: relative;
}
/* Check list */
ul.checklist {
list-style: none;
}
ul.checklist li {
margin-left: 15px;
padding: 0 0 5px 20px;
background: url(../images/checklist-bg.gif) no-repeat 0 3px;
}
/* Check list */
ul.stars {
list-style: none;
}
ul.stars li {
margin-left: 15px;
padding: 0px 0 5px 20px;
background: url(../images/star-bg.gif) no-repeat 0 3px;
}
/* Smallnumber */
ol.smallnumber {
margin: 0;
padding: 0;
list-style: none;
}
ol.smallnumber li {
margin: 10px 0 10px 30px;
padding: 3px 0 5px 30px;
line-height: 150%;
}
ol.smallnumber li.number-1 {
background: url(../images/n-1.gif) no-repeat left top;
}
ol.smallnumber li.number-2 {
background: url(../images/n-2.gif) no-repeat left top;
}
ol.smallnumber li.number-3 {
background: url(../images/n-3.gif) no-repeat left top;
}
ol.smallnumber li.number-4 {
background: url(../images/n-4.gif) no-repeat left top;
}
ol.smallnumber li.number-5 {
background: url(../images/n-5.gif) no-repeat left top;
}
ol.smallnumber li.number-6 {
background: url(../images/n-6.gif) no-repeat left top;
}
ol.smallnumber li.number-7 {
background: url(../images/n-7.gif) no-repeat left top;
}
ol.smallnumber li.number-8 {
background: url(../images/n-8.gif) no-repeat left top;
}
ol.smallnumber li.number-9 {
background: url(../images/n-9.gif) no-repeat left top;
}
/* Bignumber */
.bignumber {
float: left;
margin-right: 8px;
padding: 6px 7px;
display: block;
color: #FFFFFF;
background: url(../images/ol-bg.gif) no-repeat top left;
font: 20px/normal Arial, sans-serif;
font-weight: bold;
}
/* Talking box. Thinking box. */
div.bubble1, div.bubble2, div.bubble3, div.bubble4 {
margin: 15px 0;
}
div.bubble1 span.author,
div.bubble2 span.author,
div.bubble3 span.author,
div.bubble4 span.author {
padding-left: 15px;
margin-left: 15px;
background: url(../images/author.gif) no-repeat center left;
font-weight: bold;
}
div.bubble1 div {
margin: 0;
width: 100%;
background: url(../images/bub1-br.gif) no-repeat bottom right;
}
div.bubble1 div div {
background: url(../images/bub1-bl.gif) no-repeat bottom left;
}
div.bubble1 div div div {
background: url(../images/bub1-tr.gif) no-repeat top right;
}
div.bubble1 div div div div {
background: url(../images/bub1-tl.gif) no-repeat top left;
}
div.bubble1 div div div div div {
margin: 0;
padding: 15px 15px 30px 15px;
width: auto;
}
div.bubble2 div {
margin: 0;
width: 100%;
background: url(../images/bub2-br.gif) no-repeat bottom right;
}
div.bubble2 div div {
background: url(../images/bub2-bl.gif) no-repeat bottom left;
}
div.bubble2 div div div {
background: url(../images/bub2-tr.gif) no-repeat top right;
}
div.bubble2 div div div div {
background: url(../images/bub2-tl.gif) no-repeat top left;
}
div.bubble2 div div div div div {
margin: 0;
padding: 15px 15px 35px 15px;
width: auto;
}
div.bubble3 div {
margin: 0;
width: 100%;
background: url(../images/bub3-br.gif) no-repeat bottom right;
}
div.bubble3 div div {
background: url(../images/bub3-bl.gif) no-repeat bottom left;
}
div.bubble3 div div div {
background: url(../images/bub3-tr.gif) no-repeat top right;
}
div.bubble3 div div div div {
background: url(../images/bub3-tl.gif) no-repeat top left;
}
div.bubble3 div div div div div {
margin: 0;
padding: 15px 15px 50px 15px;
width: auto;
}
div.bubble4 div {
margin: 0;
width: 100%;
background: url(../images/bub4-br.gif) no-repeat bottom right;
}
div.bubble4 div div {
background: url(../images/bub4-bl.gif) no-repeat bottom left;
}
div.bubble4 div div div {
background: url(../images/bub4-tr.gif) no-repeat top right;
}
div.bubble4 div div div div {
background: url(../images/bub4-tl.gif) no-repeat top left;
}
div.bubble4 div div div div div {
margin: 0;
padding: 15px 15px 55px 15px;
width: auto;
}
/* Rating */
.rating {
width: 66px;
float: left;
margin: 10px 10px 0 0;
background: url(../images/rating-bg.gif) no-repeat top left;
height: 65px;
}
div.rate-1 {
font-size: 11px;
text-align: center;
line-height: 20px;
height: 20px;
}
div.rate-2 {
color: #CC0000;
font-size: 200%;
font-weight: bold;
text-align: center;
}
div.rate-3 {
font-size: 11px;
text-align: center;
}
/* JOOMLA STYLE
--------------------------------------------------------- */
table.blog {
}
.article_seperator {
display: block;
background: url(../images/sep.gif) no-repeat center bottom;
height: 50px;
}
#ja-col1 .article_seperator, #ja-col2 .article_seperator {
display: none;
}
table.contentpane {
border: none;
width: 100%;
}
table.contentpaneopen {
border: none;
border-collapse: collapse;
border-spacing: 0;
}
table.contenttoc {
margin: 0 0 10px 10px;
padding: 0;
width: 35%;
border: 1px solid #EFEFEF;
}
table.contenttoc a {
}
table.contenttoc td {
padding: 3px 5px 3px 25px;
background: url(../images/arrow.png) no-repeat 10px 7px;
}
table.contenttoc th {
padding: 5px;
background: url(../images/grad2.gif) repeat-x center #EFEFEF;
text-indent: 5px;
}
table.poll {
padding: 0;
width: 100%;
border-collapse: collapse;
}
table.pollstableborder {
padding: 0;
width: 100%;
border: none;
text-align: left;
}
table.pollstableborder .sectiontableheader {
padding: 8px 5px !important;
}
table.pollstableborder img {
vertical-align: baseline;
}
/* esse troço aqui define os espacos entre a os itens da enquete */
table.pollstableborder td {
padding: 2px!important;
border-collapse: collapse;
border-spacing: 0;
}
/* define o fundo do resultado da enquete exemplo tantos porcento voto em itens da enquete */
table.pollstableborder tr.sectiontableentry1 td {
border: none;
background: #F7F7F7;
}
table.pollstableborder tr.sectiontableentry2 td {
border: none;
}
/* isso aqui define o tamanho da tabela que vai constar os resultados da pesquisa */
table.searchintro {
padding: 10px 0;
width: 100%;
}
/* ainda dentro do campo busca define o espaco entre a palavra que vc digitou na busca e os resultados encontrados
nao interfere nos espacos dos links que serao apresentados como resultado da busca */
table.searchintro td {
padding: 5px!important;
}
/*Control the Frontend Editor area width*/
table.adminform {
width: 400px!important; /*Control the Frontend Editor area width*/
}
.adminform .inputbox {
}
.blog_more {
margin: 10px 0;
}
.blog_more strong {
margin: 0 0 5px;
display: block;
background: url(../images/h3-bg.gif) no-repeat center left;
font-size: 150%;
line-height: 30px;
text-indent: 10px;
}
.blog_more ul {
margin: 0;
padding: 0;
}
.blog_more ul li {
margin: 0;
padding: 0 0 0 24px;
background: url(../images/arrow.png) no-repeat 10px 6px;
}
td.buttonheading {
padding: 0 0 0 8px!important;
text-align: center;
}
.category {
font-weight: bold;
}
.clr {
clear: both;
}
/* isso aqui define o tamanho do titulo do primeiro anuncio da pagina - bem vindo ao site publico */
.componentheading {
padding: 0 0 15px 0;
margin-bottom: 20px;
border-bottom: 1px solid #DDDDDD;
font-size: 250%;
}
.contentdescription {
padding-bottom: 30px;
}
/* isso aqui define o tamanho da titulo de cada noticia postada pagina inicial*/
table.blog .contentheading {
font-size: 170%;
}
/* isso aqui define o tamanho da titulo de cada noticia postada dos menus do topo*/
.contentheading {
padding-bottom: 5px;
font-size: 200%;
}
a.contentpagetitle,
a.contentpagetitle:hover,
a.contentpagetitle:active,
a.contentpagetitle:focus {
}
/* isso aqui define o tamanho lagura tipo e espaco do botao leia mais ou read more que aparece em cada
noticia.l*/
a.readon {
float: left;
width: 120px;
display: block; /* a opcao display mostra ou nao os botoes leia mais read more das noticias setar block para aparecer*/
background: url(../images/readon.gif) no-repeat top left;
font-size: 11px;
line-height: 20px;
text-indent: 27px;
height: 20px;
}
/* isso aqui define o tamanho lagura tipo e espaco do botao leia mais ou read more que aparece em cada
noticia.l em on mouse ouver */
a.readon:hover, a.readon:active, a.readon:focus {
background: url(../images/readon.gif) no-repeat bottom left;
color: #666666;
text-decoration: none;
}
table.contentpaneopen td, table.contentpane td {
}
/* isso aqui define o tamanho lagura do espaco da tabela de noticias da pagina incial , tabela esquerda noticia.l*/
table.contentpaneopen, table.contentpane, table.blog {
width: 100%;
}
/* isso aqui define o tamanho e espaco entre tabelas entre noticias .. tabelas horizontais*/
.createdate {
padding: 2px;
color: #999999;
}
/* isso aqui define a cor da data de modificacao da noticia e seu espaco para iniciar a mesma*/
.modifydate {
padding-top: 15px;
color: #999999;
height: 15px;
}
.moduletable {
padding: 0;
}
.mosimage {
margin: 15px 10px 10px 0;
padding: 0 0 5px;
}
* html .mosimage {
padding: 5px 0 !important; /*IE 6*/
margin: 15px 10px 10px 0;
}
*+html .mosimage {
padding: 5px 0 !important; /*IE 7*/
}
.mosimage img {
padding: 0 !important;
margin: 0 !important;
}
.mosimage_caption {
margin-top: 5px;
padding: 1px 2px;
color: #999999;
}
.pagenav,
.pagenav_prev,
.pagenav_next,
.pagenavbar {
padding: 0 2px;
}
a.pagenav,
.pagenav_prev a,
.pagenav_next a,
.pagenavbar a {
}
a.pagenav:hover, a.pagenav:active, a.pagenav:focus,
.pagenav_prev a:hover, .pagenav_prev a:active, .pagenav_prev a:focus,
.pagenav_next a:hover, .pagenav_next a:active, .pagenav_next a:focus,
.pagenavbar a:hover, .pagenavbar a:active, .pagenavbar a:focus {
}
.pagenavbar {
padding-left: 14px;
background: url(../images/pages.gif) no-repeat center left;
}
.pagenavcounter {
padding: 8px 14px 0 14px;
background: url(../images/pages.gif) no-repeat 0 11px;
}
.sectiontableheader {
padding: 7px 5px;
border-top: 1px solid #EFEFEF;
border-bottom: 1px solid #EFEFEF;
background: url(../images/grad2.gif) repeat-x center #F7F7F7;
font-weight: bold;
}
tr.sectiontableentry1 td {
padding: 7px 5px;
background: url(../images/dot.gif) repeat-x bottom;
}
tr.sectiontableentry2 td {
padding: 7px 5px;
background: url(../images/dot.gif) repeat-x bottom;
}
tr.sectiontableentry1:hover td,
tr.sectiontableentry2:hover td {
background: url(../images/dot.gif) repeat-x bottom #F0F5FB;
}
.smalldark {
text-align: left;
}
div.syndicate div {
text-align: center;
}
.pollstableborder tr.sectiontableentry1 td,
.pollstableborder tr.sectiontableentry2 td {
background: none;
}
/* MAIN LAYOUT DIVS
--------------------------------------------------------- */
#ja-wrapper {
}
/* isso aqui define o tamanho largura da pagina como um todo... eu opto por 760.. mais nao da..*/
#ja-header, ja-topslwrap, #ja-container, #ja-footer {
width: 980px;
margin: 0 auto;
clear: both;
}
.narrow #ja-header, .narrow ja-topslwrap, .narrow #ja-container, .narrow #ja-footer {
width: 770px;
margin: 0 auto;
clear: both;
}
#ja-containerwrap {
}
/* isso aqui define a imagem do topo que e cinza degrade da tabela abaixo do topo pega de fora a fora
sendo com que a cor que vai influenciar no fundo de traz do meio*/
#ja-container {
background: url(../images/grad1.gif) repeat-x top #FFFFFF;
}
/* isso define a sobra nas linhas laterais da pagina ... essa no caso lateral direita*/
div.shadow1 {
padding-right: 20px;
background: url(../images/shadow-right.gif) repeat-y top right;
overflow: hidden;
}
/* isso define a sobra nas linhas laterais da pagina ... essa no caso lateral esquerda*/
div.shadow2 {
padding-left: 20px;
background: url(../images/shadow-left.gif) repeat-y top left;
overflow: hidden;
}
/* isso define a posicao fo float menu left .. isso aqui empurra o menu pra posicao horizontal
pra esquerda ou pra direita, se empurrar pra direita de mais ele empurra o menu right */
#ja-mainbody, #ja-mainbody-fl {
float: left;
width: 78%;
}
/* quando se quer usar centimetros .. por exempl 7,1 cm pode se usar ponto na porcentagem no
caso 69.9% quase 70.. isso aqui define o tamanho do float ou tabela esquerda.. empurra o
primeiro menu ate desaparecer... tamanho maximo 71 % para desaparecer..*/
#ja-mainbody #ja-contentwrap {
float: left;
width: 69.9%;
}
#ja-mainbody-fr {
float: left;
width: 100%;
}
/* isso define a float ou tabela esquerda .. largura, porem nao é da pagina inicial.. quando
vc clicka pra ver uma noticia ela abre.. no float da esquerda e na direita o menu 1, se vc colocar
mais que 70% acaba sumindo com o menu da direita...*/
#ja-mainbody-fr #ja-contentwrap {
float: left;
width: 75%;
background: none;
}
#ja-mainbody-fr #ja-col1 {
float: right;
width: 24%;
}
#ja-mainbody-f {
float: none;
width: 100%;
}
/* isso define a distancia do conteudo do meio para a borda do site, para o topo, para a direita so
setar essas configuracoes em padding*/
#ja-content {
padding: 25px 10px 10px 20px;
margin: 0;
clear: both;
display: block;
}
#ja-mainbody-f #ja-content, #ja-mainbody-fl #ja-content {
padding: 25px 20px 10px;
}
/* HEADER
--------------------------------------------------------- */
/* esse define que a float do meio passe por baixo do float topico */
#ja-headerwrap {
background: #999999;
line-height: normal;
height: 110px;
}
/* esse define a altura do float do topo, a parte azul e os botoes do menu topo */
#ja-header {
background: url(../images/header-bg.jpg) no-repeat #3172B4;
height: 110px;
position: relative;
z-index: 10;
}
/* esse define o fundo do float do topo, a parte azul e os botoes do menu topo */
.narrow #ja-header {
background: url(../images/header-narrow-bg.jpg) no-repeat #3172B4;
}
/* esse define a posicao da logomarca no topo da pagina */
h1.logo {
margin: 0;
padding: 0;
width: 262px;
font-size: 300%;
position: absolute;
top: 0;
left: 30px;
height: 60px;
}
/* esse define a logo no topo da pagina */
h1.logo a {
width: 262px;
float: left;
display: block;
background: url(../images/logo.png) no-repeat;
text-transform: uppercase;
text-indent: -5000px;
height: 80px;
outline: none;
}
/* esse define um subtitulo ou posiçao atual de link que você esta em uma pagina
exemplo - index - japathway, dai define a cor do japathway*/
#ja-pathway {
padding: 0 3px 5px;
display: block;
color: #999999;
}
/* esse define a altura do quadradinho cinza que divide a posicao do links de origem
e de posicao atual. */
#ja-pathway img {
margin: 1px 5px 0;
}
/* esse define a posicao para negrito.. */
#ja-pathway a {
font-weight: bold;
}
/* MAIN NAVIGATION
--------------------------------------------------------- */
/* esse a posicao do menu topo esquerda direita.. etc. ..*/
#ja-mainnav {
position: absolute;
bottom: 0;
left: 30px;
}
/* fonte do menu topo... todas vao usar tal fonte.*/
#ja-mainnav a,
#ja-mainnav a:hover,
#ja-mainnav a:active,
#ja-mainnav a:focus,
#ja-subnav a,
#ja-subnav a:hover,
#ja-subnav a:active,
#ja-subnav a:focus {
font-family: "Segoe UI", Tahoma, Arial, Helvetica, sans-serif;
outline: none;
}
/* Default Joomla! Menu */
ul.menu li{
background: none!important;
}
/* esse define a cor dos itens do menu topo e tambem o quadradinho que acompanha o menu...
cor cinza*/
ul.menu a {
padding: 5px 0 5px 18px;
width: 90%;
border-top: 1px solid #EFEFEF;
display: block;
color: #666666;
background: url(../images/arrow.png) no-repeat 3px 9px;
}
/* esse define a cor dos itens do menu topo e tambem o quadradinho que acompanha o menu...
para cor amarelo */
ul.menu a:hover,
ul.menu a:active,
ul.menu a:focus {
color: #3172B4;
background: url(../images/arrow2.png) no-repeat 3px 9px;
text-decoration: none;
}
ul.menu a#active_menu {
color: #666666;
background: url(../images/arrow2.png) no-repeat 3px 9px #EFEFEF;
font-weight: bold;
}
/* esse define a altura de espaco do item de menu left da primeira coluna... */
li.parent a {
padding: 5px 4px 5px 15px;
display: block;
}
li.parent a:hover,
li.parent a:active,
li.parent a:focus {
}
li.active a{
color: #3172B4;
font-weight: bold;
}
li.active li a {
font-weight: normal;
}
/* Default Joomla! Menu */
a.mainlevel {
padding: 500px 0 500px 180px;
width: 10%;
border-top: 100px solid #EFEFEF;
display: block;
color: Fuchsia;
background: url(../images/arrow.png) no-repeat 3px 9px;
}
a.mainlevel:hover,
a.mainlevel:active,
a.mainlevel:focus {
color: #3172B4;
background: url(../images/arrow2.png) no-repeat 3px 9px;
text-decoration: none;
}
a.mainlevel#active_menu {
color: #666666;
background: url(../images/arrow2.png) no-repeat 3px 9px #EFEFEF;
font-weight: bold;
}
a.sublevel {
padding: 5px 4px 5px 15px;
display: block;
}
a.sublevel:hover,
a.sublevel:active,
a.sublevel:focus {
}
#active_menu {
color: #3172B4;
font-weight: bold;
}
/* MODULE - POSICAO DO MODULO OU --------------------------------------------------------- */
div.moduletable_menu h3,
div.moduletable h3 {
padding: 0 2px 10px;
margin: 0 -2px 10px;
font-size: 70%;
font-weight: bold;
}
div.moduletable_menu,
div.moduletable {
padding: 170 201px 201px;
margin-bottom: 101px;
}
/* ISSO define o espaço lateral das tabelas, corrige parcialmente o probelma
isso no menu left 1 --------------------------------------------------------- */
#ja-col1 div.moduletable_menu,
#ja-col1 div.moduletable {
padding: 0 25px; /* isso aqui corrige parcialmente o problema... mudando ali de 0 para 1 etc.. porem nao funciona.... corretamente, ou seja, o problema do menu esta em outro lugar e nao é nesse arquivo */
margin-bottom: 10px; /* isso aqui define o espaço logo de baixo de cada menu, acaba um, espaço em branco começa o topico do outro */
}
#ja-col1 div.moduletable_menu h3,
#ja-col1 div.moduletable h3 {
margin: 0 -12px 10px;
padding: 7px 15px;
border-top: 1px solid #EFEFEF;
border-bottom: 1px solid #EFEFEF;
background: url(../images/grad2.gif) repeat-x center #F7F7F7;
font-size: 125%;
}
.narrow #ja-col1 div.moduletable_menu h3,
.narrow #ja-col1 div.moduletable h3 {
margin: 0 -14px 10px;
}
#ja-col2 div.moduletable_menu,
#ja-col2 div.moduletable {
padding-right: 0;
margin-bottom: 15px;
}
#ja-col2 div.moduletable_menu h3,
#ja-col2 div.moduletable h3 {
margin: 0 -10px 10px;
padding: 0 10px;
background: url(../images/h3-bg.gif) repeat-y center left;
font-size: 125%;
line-height: 30px;
}
/* SPOTLIGHT
--------------------------------------------------------- */
/* Spotlight Box Style */
.ja-box-left, .ja-box-center, .ja-box-right {
float: left;
overflow: hidden;
}
.ja-box-full {
float: none;
overflow: hidden;
}
.ja-box-left div.moduletable {
padding: 0 15px 0 0;
}
.ja-box-right div.moduletable {
padding: 0 0 0 15px;
}
.ja-box-center div.moduletable {
padding: 0 15px;
}
/* Bottom Spotlight */
#ja-botsl {
width: 100%;
clear: both;
margin-top: 15px;
border-top: 2px solid #EFEFEF;
background: url(../images/grad5.gif) repeat-x top;
}
#ja-botsl div.moduletable {
padding: 10px 15px;
margin: 0;
background: none;
}
#ja-botsl div.ja-box-left,
#ja-botsl div.ja-box-center {
background: url(../images/vdot2.gif) repeat-y right;
}
#ja-botsl h3 {
margin: 0 0 5px;
padding: 3px 0;
font-size: 125%;
}
#ja-botsl ul {
margin: 0;
padding: 0;
}
#ja-botsl li {
padding-left: 17px;
margin: 0;
background: url(../images/arrow.png) no-repeat 2px 6px;
}
#ja-botsl td {
padding: 0;
}
#ja-botsl .article_seperator {
display: none;
}
#ja-botsl table {
border-collapse: collapse;
border-spacing: 0;
}
/* LEFT COLUMN + RIGHT COLUMN
--------------------------------------------------------- */
#ja-col1 {
float: left;
width: 30%;
padding: 0;
background: url(../images/col1-center-bg.gif) repeat-y center bottom;
overflow: hidden;
}
.narrow #ja-col1 {
background: url(../images/col1-center-narrow-bg.gif) repeat-y center bottom;
}
#ja-col1 div.shadow1 {
padding: 0;
background: url(../images/col1-bot-bg.gif) no-repeat center bottom;
}
.narrow #ja-col1 div.shadow1 {
background: url(../images/col1-bot-narrow-bg.gif) no-repeat center bottom;
}
#ja-col1 div.shadow2 {
padding: 0;
background: url(../images/col1-top-bg.gif) no-repeat center top;
}
.narrow #ja-col1 div.shadow2 {
background: url(../images/col1-top-narrow-bg.gif) no-repeat center top;
}
#ja-col1 div.ja-innerpad {
padding: 25px 0 10px;
}
#ja-mainbody-fr #ja-col1 div.ja-innerpad {
padding: 25px 3px 10px;
}
#ja-col2 {
float: right;
width: 22%;
overflow: hidden;
}
#ja-col2 div.ja-innerpad {
padding: 25px 20px 10px 0;
}
#ja-col1 table,
#ja-col2 table {
border-collapse: collapse;
border-spacing: 0;
}
#ja-col1 ul li,
#ja-col2 ul li {
padding-left: 15px;
margin: 0;
background: url(../images/arrow.png) no-repeat 3px 9px;
}
#ja-col1 ul,
#ja-col2 ul {
margin: 0;
}
/* USER TOOLS
--------------------------------------------------------- */
#ja-usercolorswrap {
font-size: 11px;
position: absolute;
top: 20px;
right: 15px;
}
#ja-usertoolswrap {
font-size: 11px;
position: absolute;
top: 28px;
right: 230px;
}
#ja-usertools {
margin: 0;
padding: 10px 0 4px 0;
float: left;
}
#ja-usercolors ul,
#ja-usertools ul {
margin: 0;
padding: 0 0 0 10px;
float: left;
}
#ja-usercolors ul li,
#ja-usertools ul li {
margin: 0;
padding: 0;
list-style: none;
display: inline;
background: none;
}
#ja-usercolors img,
#ja-usertools img {
padding: 0;
margin: 0;
}
#ja-usercolors {
float: left;
padding: 10px 5px 4px;
}
/* FOOTER
--------------------------------------------------------- */
#ja-footerwrap {
clear: both;
}
#ja-footer {
color: #AAAAAA;
background: url(../images/footer-bg.gif) repeat-x top #666666;
position: relative;
}
#ja-footer div.shadow2 {
padding: 30px 0 25px 20px;
}
#ja-footer h1.logo {
margin: 0;
padding: 0;
width: 175px;
font-size: 200%;
position: absolute;
top: 0;
left: 30px;
height: 69px;
}
#ja-footer h1.logo a {
width: 175px;
float: left;
display: block;
background: url(../images/logo-footer.gif) no-repeat;
text-transform: uppercase;
text-indent: -5000px;
height: 69px;
outline: none;
}
#ja-footer small, #ja-footer address,
#ja-footer div.powerby {
padding: 0 0 0 200px;
float: left;
display: block;
color: #AAAAAA;
font-style: normal;
}
#ja-footer a {
color: #E6E6E6;
}
#ja-footer a:hover, #ja-footer a:active, #ja-footer a:focus {
color: #FFFFFF;
}
#ja-footer ul {
margin: 0 0 5px 200px;
padding: 0;
}
#ja-footer li {
margin: 0;
padding: 0;
display: inline;
background: none;
}
#ja-footer li a {
padding: 0 20px 0 0;
display: inline;
font-weight: bold;
line-height: normal;
}
/* Search */
#ja-search {
width: 162px;
background: url(../images/search-bg.gif) no-repeat;
position: absolute;
bottom: 45px;
right: 50px;
height: 29px;
}
#ja-search .inputbox {
width: 130px;
padding: 3px 5px 0;
border: none;
margin-left: 2px;
color: #3172B4;
background: #FFFFFF;
}
/* MISCELLANOUS
----------------------------------------------------------- */
ul.accessibility {
position: absolute;
top: -100%;
}
#ja-banner {
text-align: center;
}
div.back_button a,
div.back_button a:hover,
div.back_button a:active {
margin: 10px 0;
display: block;
}
#mod_login_password, #mod_login_username {
width: 80%;
}
#mod_login_remember {
border: none;
background: none;
}
#form-login-username, #form-login-password {
padding: 0;
margin: 0;
}
/* Clearfix */
.clearfix:after {
clear: both;
display: block;
content: ".";
height: 0;
visibility: hidden;
}
* html > body .clearfix {
width: 100%;
display: block;
}
* html .clearfix {
height: 1%;
}
/* Firefox Scrollbar Hack - Do not remove */
html {
margin-bottom: 1px;
height: 100%!important;
height: auto;
}
/*------------------------------------------------------------------------
# JA News 1.1.3 - June, 2007
# ------------------------------------------------------------------------
# Copyright (C) 2004-2007 J.O.O.M Solutions Co., Ltd. All Rights Reserved.
# @license - Copyrighted Commercial Software
# Author: J.O.O.M Solutions Co., Ltd
# Websites: http://www.joomlart.com - http://www.joomlancers.com
-------------------------------------------------------------------------*/
.ja-newsblock {
margin: 0;
display: block;
padding: 8px 0;
}
.ja-newsitem,
.ja-newsitem-left,
.ja-newsitem-right,
.ja-newsitem-center {
float: left;
padding: 0;
text-align: center;
}
.ja-newsitem-left,
.ja-newsitem-center {
background: url(v-seperator.gif) repeat-y top right;
}
.ja-newsitem-left div.ja-newsitem-inner,
.ja-newsitem-center div.ja-newsitem-inner,
.ja-newsitem-right div.ja-newsitem-inner,
.ja-newsitem div.ja-newsitem-inner {
text-align: left;
float: left;
}
.ja-newsitem-center div.ja-newsitem-inner {
float: none;
margin: 0 auto;
}
.ja-newsitem-right div.ja-newsitem-inner {
float: right;
}
.ja-newscat {
color: #333333;
display: block;
font-weight: bold;
font-size: 100%;
text-decoration: none;
margin: 0 0 10px;
position: relative;
background: url(ci-right.gif) no-repeat top right;
text-transform: uppercase;
height: 32px;
line-height: 32px;
}
.ja-newscat:hover, .ja-newscat:active, .ja-newscat:focus {
text-decoration: none;
outline: none;
}
.ja-newscat span {
display: block;
font-weight: bold;
padding: 0 5px 0 30px;
background: url(ci-left.gif) no-repeat top left;
color: #403C3A;
height: 32px;
line-height: 34px;
}
.ja-newstitle {
display: block;
font-size: 100%;
font-weight: bold;
text-decoration: none;
margin-bottom: 2px;
}
.ja-newscontent {
padding: 0;
}
.ja-newscontent img {
margin: 5px 10px 10px 0;
padding: 0;
}
.ja-newscontent p {
margin: 5px 0;
}
-------------------------------------------------------------------------------------------
A parte de vermelho é o unico lugar do codigo que muda aquela area do menu.. mas mesmo assim não arruma a tabela distorcida...
Instalei outras versões do Ja Headera.. dai constatei que em uma delas não tinha o problema... o que eu fiz ? Falei, esse problema é no banco de dados, tem alguma configuração especifica no
banco de dados que não foi passada em forma de atualização do desenvolvedor ...
Instalei o joomla.. em duas pastas diferentes.. o primeiro na pasta chamado
joomla1
com a versão com erro
com a versão com erro
e instalei o outro corrigido na pasta
joomla2
o que eu fiz ?! peguei um programa especifico pra acessar banco de dados mysql...
chama mysql front, instalei.. fui la e fiz backup do banco de dados joomla2 que nao tava com erro.. exportei para o arquivo joomla2.sql dai eu apaguei o banco de dados joomla1 usando o programa.. depois criei um novo banco de dados em branco chamado joomla1 e abri o codigo do arquivo joomla2.sql e copiei pro programa, selecionei o banco de dados joomla1 no menu esquerdo do programa e na janela direita colei o script... e mandei rodar .. dai criou o banco de dados.. ok ...
fui em localhost pra ver o site... BINGO !! funcionou... o erro está no banco de dados...
dai fui utilizando o metodo de comparação entre os dois bancos de dados até achar a linha que tava com erro....
fica dentro da tabela:
table jos_modules
table jos_modules
Na linha 31 ...
Para ver essa linha, exporte seu banco de dados .sql e abra ele com o notepad .. procure a linha. subistitua a linha pela certa e salve... mande importar o banco de dados novamente para o programa... há metodos de atualizaçao usando o modo de executar script dentro do musqlfront ... se vc ja entende mais sobre o programa...
Essa aqui é a linha com erro:
INSERT INTO `jos_modules` VALUES (31,'Menu extra','',2,'left',0,'0000-00-00 00:00:00',1,'mod_mainmenu',0,0,1,'menutype=othermenu\nmenu_style=list\nstartLevel=0\nendLevel=0\nshowAllChildren=0\nwindow_open=\nshow_whitespace=0\ncache=1\ntag_id=\nclass_sfx=\nmoduleclass_sfx=_menu\nmaxdepth=10\nmenu_images=0\nmenu_images_align=0\nexpand_menu=0\nactivate_parent=0\nfull_active_id=0\nindent_image=0\nindent_image1=\nindent_image2=\nindent_image3=\nindent_image4=\nindent_image5=\nindent_image6=\nspacer=\nend_spacer=\n\n',0,0,'');
Subistituir a linha acima com erro por essa abaixo ..
Essa é a linha correta:
INSERT INTO `jos_modules` VALUES (31,'Banners','',1,'banner',0,'0000-00-00 00:00:00',1,'mod_banners',0,0,0,'banner_cids=\nmoduleclass_sfx=',1,0,'');
Salve suas mudançar e pronto. use normalmente....
-----------------------------------------------------------------------------------------------
Bom pessoal isso ae. grato... aproveitem...
FIM.
Palavras relacionadas a esse conteudo para meta tag.
Erro jomla ja hedera joomlart joomla art erro na tabela nas imagens configuração do menu joomla
Error jomla ja hedera joomlart joomla art error table error div error image , distortion, menu
Mantenha os creditos.
Tom Costa. 2008
Nenhum comentário:
Postar um comentário