PDA

Visualizza la versione completa : tabella in un contenuto di Joomla


mahagonny.red
19-02-2007, 13:56
Salve a tutti e grazie a chi vorr aiutarmi.
Il mio problema questo.
Ho creato una tabella in un contenuto di Joomla(o Mambo fa l'istesso) e vorrei formattarla utilizzando un CSS esterno creato appositamente da me.
Potreste dirmi come posso procedere in questo CMS?
:master:

var
19-02-2007, 16:03
la cosa migliore aggiungere le tue classi CSS all'interno del CSS che regola l'aspetto del tuo template corrente, tipicamente disponibile nella cartella /templates/tuotemplate/css/template_css.css.

ciao

mahagonny.red
19-02-2007, 18:36
Avevo intuito una soluzione del genere ma devo inserire il css della tabella cos com'?
Questo il CSS del mio template



/* CSS Document */

html {
height : 100%;
}
body {
line-height : 120%;
background : #f9f9f9;
color : #151515;
font-family : Verdana, Arial, Helvetica, sans-serif;
background-image : url(../images/bg.jpg);
}
.clr {
clear : both;
}
.outline {
background : #ffffff;
}
#buttons_outer {
width : 795px;
float : left;
margin-bottom : 2px;
height : 22px;
}
#buttons_inner {
height : 22px;
background-image : url(../images/menu.gif);
background-repeat : repeat-x;
}
#pathway_text {
overflow : hidden;
display : block;
height : 22px;
line-height : 22px !important;
line-height : 22px;
padding-left : 4px;
background-image : url(../images/menu.gif);
background-repeat : repeat-x;
color : #ffffff;
}
#pathway_text img {
margin-left : 5px;
margin-right : 5px;
margin-top : 6px;
}
#buttons {
float : left;
margin : 0;
padding : 0;
width : auto;
}
ul#mainlevel-nav {
list-style : none;
padding : 0;
margin : 0;
font-size : 0.8em;
}
ul#mainlevel-nav li {
background-image : none;
padding-left : 0;
padding-right : 0;
float : left;
font-size : 10px;
line-height : 22px;
white-space : nowrap;
border-right : 2px solid #ffffff;
}
ul#mainlevel-nav li a {
display : block;
padding-left : 15px;
padding-right : 15px;
text-decoration : none;
color : #f4f4f4;
background-image : url(../images/menu.gif);
background-repeat : repeat-x;
}
#buttons > ul#mainlevel-nav li a {
width : auto;
}
ul#mainlevel-nav li a:hover {
color : #fff;
background-image : url(../images/menu_x.gif);
background-repeat : repeat-x;
}
#search_outer {
float : left;
width : 185px;
height : 22px;
background-image : url(../images/search.gif);
background-repeat : no-repeat;
margin-bottom : 2px;
}
#search_inner {
height : 19px !important;
height : 20px;
overflow : hidden;
width : 140px;
margin-left : 18px;
}
#search_inner form {
padding : 2px;
margin : 2px;
}
#search_inner .inputbox {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 11px;
color : #131313;
background-color: #f9f9f9;
}
#header {
float : left;
width : 980px;
height : 120px;
background-image : url(../images/header985.jpg);
background-repeat : no-repeat;
}
#top_outer {
float : left;
width : 185px;
}
#top_inner {
padding : 2px;
height : 144px !important;
height : 150px;
overflow : hidden;
float : none !important;
float : left;
}
#left_outer {
float : left;
width : 185px;
padding-right: 2px;
}
#left_inner {
float : none !important;
float : left;
}
#content_outer {
float : left;
width : 978px;
padding-left : 2px;
}
#content_inner {
float : none !important;
float : left;
padding-top : 2px;
}
table.content_table {
width : 100%;
}
#right_outer {
margin-left : 2px;
width : 185px;
}
#right_inner {
float : none !important;
float : left;
}
.user1_inner {
float : none !important;
float : left;
}
.user2_inner {
float : none !important;
float : left;
}
.maintitle {
color : #ffffff;
font-size : 22px;
padding-left : 15px;
padding-top : 20px;
}
.error {
font-style : italic;
text-transform : uppercase;
padding : 5px;
color : #cccccc;
font-size : 14px;
font-weight : bold;
}
.back_button {
float : left;
text-align : center;
font-size : 11px;
font-weight : bold;
border : 3px double #cccccc;
width : auto;
background : url(../images/button_bg.png) repeat-x;
padding : 0 10px;
line-height : 20px;
margin : 1px;
}
.pagenav {
text-align : center;
font-size : 11px;
font-weight : bold;
border : 3px double #cccccc;
width : auto;
background : url(../images/menu.gif) repeat-x;
padding : 0 10px;
line-height : 20px;
margin : 1px;
color: #efefef;
}
.pagenavbar {
margin-right : 10px;
float : right;
}
#footer {
background-image : url(../images/footer_bw.gif);
background-repeat : no-repeat;
height : 40px;
width : 980px;
}
ul {
margin : 0;
padding : 0;
list-style : none;
}
li {
line-height : 15px;
padding-left : 15px;
padding-top : 0;
background-image : url(../images/arrow.gif);
background-repeat : no-repeat;
background-position : 0 2px;
}
td {
text-align : left;
font-size : 11px;
}
a:link, a:visited {
color : #151515;
text-decoration : none;
font-weight : bold;
}
a:hover {
color : #bababa;
text-decoration : none;
font-weight : bold;
}
table.contentpaneopen {
width : 99%;
}
table.contentpane {
width : 99%;
}
table.contentpaneopen fieldset {
border-bottom : 1px solid #eee;
}
.button {
color : #4f4f4f;
font-family : Arial, Hevlvetica, sans-serif;
text-align : center;
font-size : 11px;
font-weight : bold;
border : 3px double #cccccc;
width : auto;
background : url(../images/button_bg.png) repeat-x;
padding : 0 5px;
line-height : 18px !important;
line-height : 16px;
height : 26px !important;
height : 24px;
margin : 1px;
}
.inputbox {
padding : 2px;
border : 1px dashed #cccccc;
background-color : #f9f9f9;
}
.componentheading {
background : url(../images/subhead_bg.gif) repeat-x;
color : #151515;
text-align : left;
padding-top : 4px;
padding-left : 4px;
height : 22px;
font-weight : bold;
font-size : 10px;
text-transform : uppercase;
}
.contentcolumn {
padding-right : 5px;
}
.contentheading {
height : 24px;
color : #4f4f4f;
font-weight : bold;
font-size : 14px;
white-space : nowrap;
background-image:url(../images/contenthead.png);
background-repeat:no-repeat;
padding-left: 15px;
}
.contentpagetitle {
font-size : 13px;
font-weight : bold;
color : #f4f4f4;
text-align : left;
}
table.searchinto {
width : 100%;
}
table.searchintro td {
font-weight : bold;
}
table.moduletable {
width : 100%;
margin-bottom:15px;
padding : 0;
}
div.moduletable {
padding : 0;
margin-bottom : 2px;
}
table.moduletable th, div.moduletable h3 {
background : url(../images/menu.gif) repeat-x;
color : #efefef;
text-align : left;
padding-left : 4px;
height : 22px;
line-height : 22px;
font-weight : bold;
font-size : 10px;
text-transform : uppercase;
margin : 0 0 2px;
}
table.moduletable td {
font-size : 11px;
padding : 0;
margin : 0;
font-weight : normal;
}
table.pollstableborder td {
padding : 2px;
}
.sectiontableheader {
font-weight : bold;
background : #f0f0f0;
padding : 4px;
}
.sectiontableentry1 {
background-color : #ffffff;
}
.sectiontableentry2 {
background-color : #f9f9f9;
}
.small {
color : #999999;
font-size : 11px;
}
.createdate {
height : 15px;
padding-bottom : 10px;
color : #999999;
font-size : 11px;
}
.modifydate {
height : 15px;
padding-top : 10px;
color : #999999;
font-size : 11px;
}
#time {
padding-top : 102px;
padding-left : 798px;
color : #151515;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
}
table.contenttoc {
border : 1px solid #cccccc;
padding : 2px;
margin-left : 2px;
margin-bottom : 2px;
}
table.contenttoc td {
padding : 2px;
}
table.contenttoc th {
background : url(../images/menu.gif) repeat-x;
color : #ccc;
text-align : left;
padding-top : 2px;
padding-left : 4px;
height : 22px;
font-weight : bold;
font-size : 10px;
text-transform : uppercase;
}
a.mainlevel:link, a.mainlevel:visited {
display : block;
background : url(../images/menu_bg.png) no-repeat;
vertical-align : middle;
font-size : 10px;
font-weight : bold;
color : #151515;
text-align : left;
padding-top : 5px;
padding-left : 12px;
height : 20px !important;
height : 25px;
text-decoration : none;
}
a.mainlevel:hover {
background-position : 0 -25px;
text-decoration : none;
color : #bababa;
}
a.mainlevel#active_menu {
color : #bababa;
font-weight : bold;
background : url(../images/menu_bg_ac.png) no-repeat;
height : 20px !important;
height : 25px;
text-decoration : none;
}
a.mainlevel#active_menu:hover {
color : #ccc;
}
a.sublevel:link, a.sublevel:visited {
padding-left : 1px;
padding-top: 6px;
vertical-align : middle;
font-size : 10px;
font-weight : bold;
color : #151515;
text-align : left;
height : 20px !important;
height : 25px;
text-decoration : none;
}
a.sublevel:hover {
color : #bababa;
text-decoration : none;
}
a.sublevel#active_menu {
color : #ccc;
}
.highlight {
background-color : yellow;
color : blue;
padding : 0;
}
.code {
background-color : #ddd;
border : 1px solid #bbb;
}
form {
margin : 0;
padding : 0;
}
div.mosimage {
border : 1px solid #ccc;
}
.mosimage {
border : 1px solid #cccccc;
margin : 5px;
}
.mosimage_caption {
margin-top : 2px;
background : #efefef;
padding : 1px 2px;
color : #151515;
font-size : 10px;
border-top : 1px solid #cccccc;
}
span.article_seperator {
display : block;
height : 1.5em;
}

dove va inserita la mia classe css.
Confesso che ci sto sbattendo la testa.
Con una soluzione del genere sospetto che tutte le tabelle saranno formattate allo stesso modo?

var
19-02-2007, 18:46
ti basta aggiungere al file CSS questo codice:



.classetabella{
...
}

e poi nella tua tabella metti:


<table class="classetabella" ...>

ciao

mahagonny.red
19-02-2007, 19:09
scusa ancora cosa va al posto dei puntini di sospensione?
Voglio dire nel css del template inserico tutto il css della tabella?
nella tabella?
Grazie per la pazienza

var
19-02-2007, 20:41
.classetabella{

}

per la tabella ti basta un:


<table class="classetabella">

ciao

mahagonny.red
20-02-2007, 10:08
Cos per la tabella?

<table class="classetabella">
<tr>
<td width="25%"></td>
<td width="25%"></td>
<td width="25%"></td>
<td width="25%"></td>
</tr>

</table>


Cos per il css



parte omessa del css del template

.classetabella {


table {
border: 1px solid #6699CC;
width: 100%;
}

caption {
background-image:url('images/top_texture.gif');
color:#ffffff;
height: 45px; text-align:left; font-style:normal; font-variant:normal; font-weight:700; font-size:15px; font-family:Tahoma, Verdana, Arial, sans-serif; padding-left:1.4em; padding-right:0; padding-top:0.5em; padding-bottom:0
}

thead th{
background-image:url('images/head_texture.gif');
color:#112553; height: 30px; font-style:normal; font-variant:normal; font-weight:700; font-size:13px; font-family:Tahoma, Verdana, Arial, sans-serif
}

tr { background-color:#E4E4E4;}

.odd { background:#D6DBE4;}

th, td {
font: 11px normal Tahoma, Verdana, Arial, sans-serif; color:#003366;
padding-left: 10px; padding-right: 10px; height:60px;
}

a {text-align:center;}

th a:link {
color:#000066;
display:block; background:url('images/a_texture.gif');; font-style:normal; font-variant:normal; font-weight:700; font-size:10px; font-family:Tahoma, Verdana, Arial, sans-serif; padding-left:0; padding-right:0; padding-top:5px; padding-bottom:5px
}

th a:visited {
color:#000033;
display:block; background:url('images/a_texture.gif');; font-style:normal; font-variant:normal; font-weight:700; font-size:10px; font-family:Tahoma, Verdana, Arial, sans-serif; padding-left:0; padding-right:0; padding-top:5px; padding-bottom:5px
}

th a:hover {
display:block; background:url('images/a_texture2.gif');
color:#003399; font-style:normal; font-variant:normal; font-weight:700; font-size:10px; font-family:Tahoma, Verdana, Arial, sans-serif; padding-left:0; padding-right:0; padding-top:5px; padding-bottom:5px
}


td a:link {
color:#000066; text-decoration:none;
display:block; background:url('images/a_texture.gif');; font-style:normal; font-variant:normal; font-weight:normal; font-size:10px; font-family:Tahoma, Verdana, Arial, sans-serif; padding-left:0; padding-right:0; padding-top:5px; padding-bottom:5px
}

td a:visited {
color:#000033; text-decoration:none;
display:block; background:url('images/a_texture.gif');; font-style:normal; font-variant:normal; font-weight:normal; font-size:10px; font-family:Tahoma, Verdana, Arial, sans-serif; padding-left:0; padding-right:0; padding-top:5px; padding-bottom:5px
}

td a:hover {
display:block; background:url('images/a_texture2.gif');
color:#003399; text-decoration:underline; font-style:normal; font-variant:normal; font-weight:normal; font-size:10px; font-family:Tahoma, Verdana, Arial, sans-serif; padding-left:0; padding-right:0; padding-top:5px; padding-bottom:5px
}


tfoot {
background-image:url('images/top_texture.gif');
}

tfoot>tr th {

background-image:url('images/top_texture.gif');
}
tfoot>tr td {

background-image:url('images/top_texture.gif');
}


tfoot tr th {
font: 700 15px Tahoma, Verdana, Arial, sans-serif;
color:#ffffff;
}

tfoot tr td {
font: 700 15px Tahoma, Verdana, Arial, sans-serif;
color:#ffffff;
}


insomma non funge.

:dh: :dh: :dh: :dh: :dh:

ringo_mato
20-02-2007, 12:43
Originariamente inviato da mahagonny.red
Cos per la tabella?


Cos per il css



insomma non funge.

:dh: :dh: :dh: :dh: :dh:

mi sa che hai un p di confusione con i CSS



.classetabella {


non pu funzionare mancano le definizioni degli attributi del css

mahagonny.red
20-02-2007, 18:46
Per tornare a bomba alla mia domanda iniziale: possibile associare ad un contenuto un css diverso da quello del template? e se si in quale modo?.
Grazie per la pazienza.

Loading