Foros del Web » Creando para Internet » Sistemas de gestión de contenidos » Joomla »

Modificar plantilla joomla

Estas en el tema de Modificar plantilla joomla en el foro de Joomla en Foros del Web. Hola me gustaria que me ayudaran hacer una pequeña modificacion en mi plantilla joomla. Resulta que quiero que la columna izquierda sea un poco mas ...
  #1 (permalink)  
Antiguo 25/05/2010, 12:47
Avatar de neon261979  
Fecha de Ingreso: octubre-2009
Ubicación: Barcelona
Mensajes: 195
Antigüedad: 17 años
Puntos: 0
Modificar plantilla joomla

Hola me gustaria que me ayudaran hacer una pequeña modificacion en mi plantilla joomla.
Resulta que quiero que la columna izquierda sea un poco mas ancha que la derecha, pero claro si modifico la izquierda luego la derecha no se me va abajo ,
No se si me explico.
Yo tengo modulos a la izquierda y a la derecha los de la izquierda se me quedan encima del texto a la izquierda, los modulos de la derecha se me van abajo a la derecha.
COmo puedo hacer esa modificacion sin que se trastoque tanto la pagina?
Os pongo el css template.
Código PHP:
html {
  
height: 100%;
  
margin-bottom: 0px;
}

form {
  
margin: 0;
  
padding: 0;
}

img,table {
    
border:none;
}

body {
    
font-family: Helvetica,Arial,sans-serif;
    
line-height: 1.3em;
    
margin: 0px 0px 0px 0px;
    
font-size: 12px;
    
color: #333;
}

a:link, a:visited {
    
text-decoration: none;
    
font-weight: normal;
}

a:hover {
    
text-decoration: underline;
    
font-weight: normal;
}

input.button {
 
cursor: pointer;
 
background:none;
}

p {
  
margin-top: 0;
  
margin-bottom: 5px;
}

/*****************************************/
/*** Template specific layout elements ***/
/*****************************************/
#page_bg {
    
padding: 0;
    
margin-bottom: 1px;
}

div.center {
  
text-align: center;
}

div#wrapper {
    
margin-left: auto;
    
margin-right: auto;
}

body.width_medium div#wrapper {
    
width: 950px;
}

body.width_small div#wrapper {
    
width: 773px;
}

body.width_fmax div#wrapper {
    
min-width: 750px;
    
max-width: 1050px;
}


div#header_r {
    
padding:0px 25px;
    
text-align: left;
}

#logo {
    
padding: 0px;
    
text-align: left;
    
height:85px;
}

#logo a, #logo a:link, #logo a:hover {
    
font-weight: bold;
    
font-family: Helvetica,Arial,sans-serif;
    
font-size: 4em;
    
padding:0;
    
margin:0;
    
line-height:1.4em;
    
color:#fefefe;
    
text-decoration:none;
}

div#newsflash {
    
width: auto;
    
margin-left: 350px;
    
margin-right: 30px;
    
border: 1px solid #00f;
}

div#tabarea {
    
background: url(../images/top_menu_bg.jpg) top left repeat-x;
    
margin: 0 6px;
}

div#footer_r {
    
padding-top: 10px;
    
height: 47px;
    
overflow: hidden;
}

div#footer_r div {
    
text-align: center;
    
font-size: .90em;
    
color: #aaa;
}

div#footer_r a:link, div#footer_r a:visited  {
    
color: #999;
}

#pathway {
    
padding: 0px 10px 8px;
    
width: auto;
    
margin-right: 250px;
    
text-align: left;
}

#search {
    
float: right;
    
width:320px;
    
margin-top: -20px;
    
margin-right: 20px;
    
height: 40px;
    
overflow: hidden;
    
text-align:right;
}

#area {
    
padding: 0;
    
width:100%;
}

#whitebox {
    
margin: 0;
    
width: auto;
}

#whitebox div {
    
text-align: left;
}

#whitebox_t {
    
background: #ebebeb url(../images/header_top_middle.jpg) 0 0 repeat-x;
}

#whitebox_tl {
    
background: url(../images/header_top_left.jpg) 0 0 no-repeat;
}

#whitebox_tr {
    
height: 16px;
    
overflow: hidden;
    
background: url(../images/header_top_right.jpg) 100% 0 no-repeat;
}

#whitebox_m {
    
width: auto;
    
padding: 10px 10px;
    
margin:0 6px;
    
background: url(../images/left_bg.jpg) 100% 100% repeat;
}


#whitebox_br {
    
height: 13px;
    
background: url(../images/mw_content_b_r.png) 100% 100% no-repeat;
}

/* horizontal pill menu */
table.pill {
  
margin-left: auto;
  
margin-right: auto;
  
padding: 0;
}

td.pill_m {
  
padding: 0;
  
margin: 0;
  
width: auto;
}

td.pill_l {
  
width:  2px;
  
height: 28px;
  
background: url(../images/top_menu_separator.jpg) top right no-repeat;
}

#pillmenu {
  
white-space: nowrap;
  
height: 28px;
  
float: left;
}

#pillmenu ul {
  
margin: 0;
  
padding: 0;
  list-
style:none;
}

#pillmenu li {
    
float: left;
    
margin: 0;
    
padding: 0;
    
background: url(../images/top_menu_separator.jpg) top right no-repeat;
}

#pillmenu a {
  
font-family: Arial, Helvetica, sans-serif;
  
font-size: 11px;
  
font-weight: normal;
    
float:left;
  
display:block;
  
height: 22px;
  
line-height: 24px;
  
padding: 3px 20px;
  
color: #fefefe;
  
text-decoration: none;
}

#pillmenu a:hover {
  
color: #96abbe;
}

#pillmenu a#active_menu-nav {
    
height: 28px;
    
line-height: 21px;
}

#leftcolumn ,#rightcolumn {
    
margin: 0;
    
width: 16%;
    
float:left; 
  #2 (permalink)  
Antiguo 25/05/2010, 12:49
Avatar de neon261979  
Fecha de Ingreso: octubre-2009
Ubicación: Barcelona
Mensajes: 195
Antigüedad: 17 años
Puntos: 0
Respuesta: Modificar plantilla joomla

Yo lo que hago para cambiar la columna de la izquierda es
#leftcolumn ,#rightcolumn {
margin: 0;
width: 16%;
float:left;


Pongo el width:20% y asi se hace más grande el lado izquierdo pero entonces se descuadra todo.

Como lo puedo hacer?
  #3 (permalink)  
Antiguo 25/05/2010, 12:51
Avatar de neon261979  
Fecha de Ingreso: octubre-2009
Ubicación: Barcelona
Mensajes: 195
Antigüedad: 17 años
Puntos: 0
Respuesta: Modificar plantilla joomla

Esta es la otra parte de plantilla que le sique a la que hay arriba.

Código PHP:
div#maincolumn {
padding:0 10px;
float:left;
width: 65%;
}
div#maincolumn_full {
padding:0 10px;
width: 80%;
float:left;
}

div.nopad {
    
padding: 0;
}

td.middle_pad {
    
width: 20px;
}

/*****************************************/
/*** Joomla! specific content elements ***/
/*****************************************/

div.offline {
    
background: #fffebb;
    
width: 100%;
    
position: absolute;
    
top: 0;
    
left: 0;
    
font-size: 1.2em;
    
padding: 5px;
}

span.pathway {
  
display: block;
  
margin: 0 20px;
  
height: 16px;
  
line-height: 16px;
  
overflow: hidden;
}

/* headers */
div.componentheading {
  
padding-left: 0px;
}

h1 {
    
padding: 0;
    
font-family:Helvetica ,Arial,sans-serif;
    
font-size: 1.3em;
    
font-weight: bold;
    
vertical-align: bottom;
    
color: #666;
    
text-align: left;
    
width: 100%;
}

h2, .contentheading {
    
padding: 0;
    
font-family: Tahoma, Helvetica,sans-serif;
    
font-size: 12px;
    
font-weight: bold;
    
vertical-align: bottom;
    
color: #06569d;
    
text-align: left;
    
width: 100%;
}

table.contentpaneopen h3 {
    
margin-top: 25px;
}

h4 {
    
font-family: Arial, Helvetica, sans-serif;
    
color: #333;
}

h3, .componentheading, table.moduletable th, legend {
  
margin: 0;
  
font-weight: bold;
  
font-family: Tahoma,Helvetica,Arial,sans-serif;
  
color:#06569d;
  
font-size: 1.4em;
  
padding-left: 0px;
    
margin-bottom: 10px;
    
text-align: left;
}

/* small text */
.small {
    
font-size: .90em;
    
color: #999;
    
font-weight: normal;
    
text-align: left;
}

.
modifydate {
  
height: 20px;
  
vertical-align: bottom;
    
font-size: .90em;
    
color: #999;
    
font-weight: normal;
    
text-align: left;
}

.
createdate {
    
height: 20px;
    
vertical-align: top;
    
font-size: .90em;
    
color: #999;
    
font-weight: normal;
    
vertical-align: top;
    
padding-bottom: 5px;
    
padding-top: 0px;

}

a.readon {
    
margin-top: 10px;
    
display: block;
    
float: left;
    
background: url(../images/mw_readon.png) top right no-repeat;
    
padding-right: 20px;
    
line-height: 14px;
    
height: 16px;
}

/* form validation */
.invalid { border-color: #ff0000; }
label.invalid { color: #ff0000; }


/** overlib **/

.ol-foreground {
    
background-color: #f6f6f6;
}

.
ol-background {
    
background-color: #666;
}

.
ol-textfont {
    
font-family: Arial, Helvetica, sans-serif;
    
font-size: 10px;
}

.
ol-captionfont {
    
font-family: Arial, Helvetica, sans-serif;
    
font-size: 12px;
    
color: #f6f6f6;
    
font-weight: bold;
}
.
ol-captionfont a {
    
color: #0B55C4;
    
text-decoration: none;
    
font-size: 12px;
}

.
ol-closefont {}

/* menu links */
a.mainlevel:link, a.mainlevel:visited {
    
padding-left: 5px;
}

a.mainlevel:hover {

}

/* spacers */
span.article_separator {
    
display: block;
    
height: 20px;
}

.
article_column {
    
padding-right: 5px;
}

.
column_separator {
    
border-left: 1px dashed #e0e0e0;
    
padding-left: 10px;
}

td.buttonheading {

}

.
clr {
    
clear: both;
}


div#maindivider {
  
border-top: 1px solid #ddd;
  
margin-bottom: 10px;
  
overflow: hidden;
  
height: 1px;
}

table.blog span.article_separator {
    
display: block;
    
height: 20px;
}

/* table of contents */
table.contenttoc {
  
margin: 5px;
  
border: 1px solid #ccc;
  
padding: 5px;
}

table.contenttoc td {
  
padding: 0 5px;
}


/* content tables */
td.sectiontableheader {
  
background: #efefef;
  
color: #333;
  
font-weight: bold;
  
padding: 4px;
  
border-right: 1px solid #fff;
}

tr.sectiontableentry0 td,
tr.sectiontableentry1 td,
tr.sectiontableentry2 td {
  
padding: 4px;
}

td.sectiontableentry0,
td.sectiontableentry1,
td.sectiontableentry2 {
  
padding: 3px;
}


/* content styles */
table.contentpaneopen, table.contentpane {
    
margin: 0;
    
padding: 0;
    
width: auto;
}

table.contentpaneopen li {
    
margin-bottom: 5px;
}

table.contentpaneopen fieldset {
    
border: 0;
    
border-top: 1px solid #ddd;
}

table.contentpaneopen h3 {
    
margin-top: 25px;
}

table.contentpaneopen h4 {
    
font-family: Arial, Helvetica, sans-serif;
    
color: #333;
}

.
highlight {
    
background-color: #fffebb;
}

/* module control elements */
table.user1user2 div.moduletable {
    
margin-bottom: 0px;
}

div.moduletable, div.module {
  
margin-bottom: 25px;
}

div.module_menu {
    
margin: 0;
    
padding: 0;
    
margin-bottom: 15px;
}

div.module_menu div div div {
    
padding: 0px;
    
padding-top: 30px;
    
padding-bottom: 10px;
    
width: auto;
}

div.module_menu div div div div {
    
background: none;
    
padding: 0;
}

div.module_menu ul {
    
margin: 10px 0;
    
padding-left: 10px;
    list-
style:none;
}

div.module_menu ul li {
    
margin: 0;
    
padding: 0;
}

div.module_menu ul li a:link, div.module_menu ul li a:visited {
    
font-weight: bold;
    
background:transparent url(../images/blue/bullet2.jpg) top left no-repeat;
    
padding:2px 0 2px 25px;
    
line-height:24px;
    
}

#leftcolumn div.module table ,#rightcolumn div.module table {
    
width: auto;
}

#leftcolumn h3, #rightcolumn h3 {
    
margin: 0;
    
color:#fefefe;
    
font-weight: bold;
    
font-family: Helvetica,Arial,sans-serif;
    
font-size: 1.1em;
    
background:#eeeeee;
    
padding:2px 0 2px 10px;
    
line-height:20px;
    
text-align: left;
    
background:transparent url(../images/menu_t.jpg) top left repeat-x;
    
}


#leftcolumn .moduletable_menu, #leftcolumn .moduletable, #leftcolumn .moduletable_text, #leftcolumn .c, 
#rightcolumn .moduletable_menu, #rightcolumn .moduletable, #rightcolumn .moduletable_text, #rightcolumn .c {
    
margin:0 0 20px 0;
    
padding: 3px;
    
border:1px solid #ccc;
    
background:#fefefe;    
}

#leftcolumn ul.menu, #rightcolumn ul.menu {
    
margin:0;
    
padding:0;
    list-
style:none;
    
border:1px solid #ccc;
    
border-top:none;
}

#leftcolumn ul.menu li, #rightcolumn ul.menu li {
    
margin:0;
    
padding:0;
    
background: #f5f5f5;
}

#leftcolumn ul.menu li a, #leftcolumn ul.menu li a:link,
#rightcolumn ul.menu li a, #rightcolumn ul.menu li a:link {
    
display:block;
    
line-height:20px;
    
background:#f5f5f5 url(../images/menu_link_bg.gif) left no-repeat;
    
padding:2px 20px;
    
border-top:1px solid #dddddd;
    
text-decoration:none;
    
color:#06569d;
}

#leftcolumn ul.menu li a:hover, #rightcolumn ul.menu li a:hover {
    
background:#eeeeee url(../images/menu_link_bg.gif) left no-repeat;
    
color:#666666;
}

/* ****** left col current menu ****** */
#leftcolumn ul.menu li#current a, #leftcolumn ul.menu li#current a:link, 
#rightcolumn ul.menu li#current a, #rightcolumn ul.menu li#current a:link {
    
display:block;
    
line-height:20px;
    
background:#f5f5f5 url(../images/menu_curren_link_bg.gif) left no-repeat;
    
padding:2px 20px;
    
border-top:1px solid #dddddd;
    
text-decoration:none;
    
color:#ff8800;
}

#leftcolumn ul.menu li#current a:hover, #rightcolumn ul.menu li#current a:hover {
    
background:#eeeeee url(../images/menu_curren_link_bg.gif) left no-repeat;
    
color:#666666;
}

/* ****** left col sub menu ****** */
#leftcolumn ul.menu li ul, #rightcolumn ul.menu li ul {
    
margin:0;
    
padding:0 0 0 0px;
    list-
style:none;
}

#leftcolumn ul.menu li#current ul li a, #leftcolumn ul.menu li#current ul li a:link,
#rightcolumn ul.menu li#current ul li a, #rightcolumn ul.menu li#current ul li a:link {
    
background:#f5f5f5 url(../images/menu_sub_link_bg.gif) left no-repeat;
    
text-decoration:none;
    
color:#06569d;
    
padding:2px 25px;
}

#leftcolumn ul.menu li#current ul li a:hover, #rightcolumn ul.menu li#current ul li a:hover {
    
background:#f5f5f5 url(../images/menu_sub_link_bg.gif) left no-repeat;
    
color:#666666;
}

/* forms */
#leftcolumn .moduletable ul, #rightcolumn .moduletable ul {
    
margin:6px 0;
    
padding:0;
    list-
style:none;
}

#leftcolumn .moduletable ul li, #rightcolumn .moduletable ul li {
    
margin:0;
    
padding:0 2px;
}

table.adminform textarea {
  
width: 540px;
  
height: 400px;
  
font-size: 1em;
  
color: #000099;
}

div.search input {
    
width: 145px;
    
border: 1px solid #ccc;
    
margin: 15px 0 10px 0;
}

form#form-login fieldset { border: 0 none; margin: 0em; padding: 0.2em;}
form#form-login ul { padding-left: 20px; }

/* thumbnails */
div.mosimage         {  margin: 5px; }
div.mosimage_caption {  font-size: .90em; color: #666; }

div.caption       { padding: 0 10px 0 10px; }
div.caption img   { border: 1px solid #CCC; }
div.caption p     { font-size: .90em; color: #666; text-align: center; }

/* Parameter Table */
table.paramlist {
    
margin-top: 5px;
}

table.paramlist td.paramlist_key {
    
width: 128px;
    
text-align: left;
    
height: 30px;
}

table.paramlist td.paramlist_value {
}

div.message {
    
font-family : "Trebuchet MS", Arial, Helvetica, sans-serif;
    
font-weight: bold;
    
font-size : 14px;
    
color : #c30;
    
text-align: center;
    
width: auto;
    
background-color: #f9f9f9;
    
border: solid 1px #d5d5d5;
    
margin: 3px 0px 10px;
    
padding: 3px 20px;
}

/* Banners module */

/* Default skyscraper style */
.bannergroup {
}

.
banneritem {
}

/* Text advert style */

.banneritem_text {
    
padding: 4px;
    
font-size: 11px;
}

.
bannerfooter_text {
    
padding: 4px;
    
font-size: 11px;
    
background-color: #F7F7F7;
    
text-align: right;
}

/* System Messages */
/* see system general.css */

.pagination span { padding: 2px; }
.
pagination a    { padding: 2px; }

/* Polls */
.pollstableborder td {
    
text-align: left;
}

/* Frontend Editing*/
fieldset {
    
border: 1px solid #ccc;
    
margin-top: 15px;
    
padding: 15px;
}

legend {
    
margin: 0;
    
padding: 0 10px;
}

td.key {
    
border-bottom:1px solid #eee;
    
color: #666;
}

/* Tooltips */
.tool-tip {
    
float: left;
    
background: #ffc;
    
border: 1px solid #D4D5AA;
    
padding: 5px;
    
max-width: 200px;
} 
  #4 (permalink)  
Antiguo 26/05/2010, 08:35
Avatar de neon261979  
Fecha de Ingreso: octubre-2009
Ubicación: Barcelona
Mensajes: 195
Antigüedad: 17 años
Puntos: 0
Respuesta: Modificar plantilla joomla

Nadie sabe como se puede hacer?

Un saludo.

Etiquetas: modificar, plantillas
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 00:23.