zucarino
Založený: 29.12.2005
Príspevky: 44
Bydlisko: Rio de Janeiro - Brazil
Zaslal: 2006-07-31 17:03
Návrat hore
Odpovedať s citátom
|
Hi all,
I've made this CSS style to my PME standard pages. Excellent result with simple colors. All can copy and share. Any improvements please post here. Thanks, bye!
Kód: |
/* CSS by Victor Zucarino (vffzbr@yahoo.com.br) to PHPMyEdit v5.5
Last update: 2006 Jul 31
*/
body { font: 8pt Verdana,Sans; link: #000066; alink: #000066; vlink: #000066; style: color:#000066; text-decoration: none; }
a { text-decoration:none; color:#000066; }
a:hover { text-decoration:underline; color:#000066; }
table.pme-main { border:#c0c0c0 1px solid; border-collapse: collapse; padding: 1px; border-spacing: 1px; font: 8pt Verdana,Sans; }
th.pme-main { border:#c0c0c0 1px solid; border-collapse: collapse; padding: 1px; border-spacing: 1px; font: 8pt Verdana,Sans; -moz-border-radius: 9px }
td.pme-main { border:#c0c0c0 1px solid; border-collapse: collapse; padding: 1px; border-spacing: 1px; font: 8pt Verdana,Sans; -moz-border-radius: 9px }
th.pme-header { border:#c0c0c0 1px solid; padding: 2px; background: #d4d4d4; font: 8pt Verdana,Sans; text-align: center; font-weight: bold; }
td.pme-filter,
.pme-filter,
.pme-filter-right-align { border:1px #c0c0c0 solid; background:#e6e6e6; color: #000066; font: 8pt Verdana,Sans; text-align: center; }
.pme-sortinfo,
.pme-queryinfo { border:0px #c0c0c0 solid; background:#fffff; color: #000066; font: 8pt Verdana,Sans; text-align: center; }
input.pme-filter,
input.pme-filter-right-align { border:#c0c0c0 1px solid; background:#FFFFFF; color: #000066; font: 8pt Verdana,Sans; text-align: center; }
input.pme-input-0,
input.pme-input-1 { border:#c0c0c0 0px solid; background:#FFFFFF; border:1px #dcdcdc solid; color: #000000; font: 8pt Verdana,Sans; }
textarea.pme-input-0,
textarea.pme-input-1 { border:#c0c0c0 0px solid; background:#FFFFFF; border:1px #dcdcdc solid; color: #000000; font: 8pt Verdana,Sans; }
select.pme-input-0,
select.pme-input-1 { border:#c0c0c0 0px solid; background:#FFFFFF; border:1px #dcdcdc solid; color: #000000; font: 8pt Verdana,Sans; }
table.pme-navigation { border:#c0c0c0 0px solid; background:#FFFFFF; border:0px; padding: 1px; border-spacing: 1px; font: 8pt Verdana,Sans; }
tr.pme-navigation { border:#c0c0c0 0px solid; background:#FFFFFF; border:0px; padding: 1px; border-spacing: 0px; font: 8pt Verdana,Sans; }
a.pme-navigation-0,
a.pme-navigation-0:hover,
td.pme-navigation-0 { border:#c0c0c0 0px solid; background:#e4e4e4; font: 8pt Verdana,Sans; text-align: center; }
a.pme-navigation-1,
a.pme-navigation-1:hover,
td.pme-navigation-1 { border:#c0c0c0 0px solid; background:#e9e9e9; font: 8pt Verdana,Sans; text-align: center; }
td.pme-cell-0 { border:#c0c0c0 0px solid; background:#f5f5f5; font: 8pt Verdana,Sans; }
td.pme-cell-1 { border:#c0c0c0 0px solid; background:#fafafa; font: 8pt Verdana,Sans; }
td.pme-key-0 { border:#c0c0c0 0px solid; background:#e4e4e4; font: 8pt Verdana,Sans; font-weight: bold; text-align: left; }
td.pme-key-1 { border:#c0c0c0 0px solid; background:#e9e9e9; font: 8pt Verdana,Sans; font-weight: bold; text-align: left; }
td.pme-value-0-right-align,
td.pme-value-0 { border:#c0c0c0 0px solid; background:#f5f5f5; font: 8pt Verdana,Sans; text-align: left; }
td.pme-value-1-right-align,
td.pme-value-1 { border:#c0c0c0 0px solid; background:#fafafa; font: 8pt Verdana,Sans; text-align: left; }
td.pme-help-0-right-align,
td.pme-help-0 { border:#c0c0c0 0px solid; background:#e4e4e4; font: 8pt Verdana,Sans; font-weight: bold; text-align: left; }
td.pme-help-1-right-align,
td.pme-help-1 { border:#c0c0c0 0px solid; background:#e9e9e9; font: 8pt Verdana,Sans; font-weight: bold; text-align: left; }
.pme-add,
.pme-change,
.pme-save,
.pme-copy,
.pme-delete,
.pme-cancel,
.pme-view,
.pme-more,
.pme-query,
.pme-hide,
.pme-search,
.pme-goto,
.pme-first,
.pme-prev,
.pme-next,
.pme-clear,
.pme-last { font: 8pt Verdana,Sans; text-align: center; }
td.pme-buttons { border:#c0c0c0 0px solid; background:#FFFFFF; color: #000066; font: 8pt Verdana,Sans; text-align: left; }
td.pme-message { text-align: center; font: 8pt Verdana,Sans; }
td.pme-stats { text-align: right; font: 8pt Verdana,Sans; }
hr.pme-hr { border: 1 solid #C0C0C0 } |
|
mostshar
Založený: 03.11.2006
Príspevky: 1
Zaslal: 2006-11-03 02:06
Návrat hore
Odpovedať s citátom
|
Thanks
but how to add this code to my php page
|
zucarino
Založený: 29.12.2005
Príspevky: 44
Bydlisko: Rio de Janeiro - Brazil
Zaslal: 2006-11-06 10:08
Návrat hore
Odpovedať s citátom
|
mostshar Napísal: |
Thanks
but how to add this code to my php page |
Example:
Kód: |
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>MY_PAGE</title>
<style type="text/css"> @import url("MY_STYLE.css"); </style>
</head>
<body>
<?php
YOUR PHP CODE...
?>
</body>
</html> |
Bye!
_________________ ---
Victor Zucarino
vffzbr at yahoo dot com dot br
|
techno_blaster
Založený: 19.01.2007
Príspevky: 7
Zaslal: 2007-02-03 21:55
Návrat hore
Odpovedať s citátom
|
zucarino... Looks great! This example will definitely help me with my site desing! Thanks!
zucarino Napísal: |
Hi all,
I've made this CSS style to my PME standard pages. Excellent result with simple colors. All can copy and share. Any improvements please post here. Thanks, bye!
|
|
zucarino
Založený: 29.12.2005
Príspevky: 44
Bydlisko: Rio de Janeiro - Brazil
Zaslal: 2007-02-09 16:51
Návrat hore
Odpovedať s citátom
|
Hi Doug
It really happens... thank you. I consider excellent the visual for your project, the gradient looks great! We must continue sharing styles to make our pages more pleasant and show how powerful PME is.
Best regards,
_________________ ---
Victor Zucarino
vffzbr at yahoo dot com dot br
|
techno_blaster
Založený: 19.01.2007
Príspevky: 7
Zaslal: 2007-02-10 03:13
Návrat hore
Odpovedať s citátom
|
When I select the filter, the main table expands beyond the width=800 I have set for the main table.
Any idea how to control the size of the table when Filter mode is selected?
|
techno_blaster
Založený: 19.01.2007
Príspevky: 7
Zaslal: 2007-02-10 15:22
Návrat hore
Odpovedať s citátom
|
Thanks Doug,
I considered the INPUT boxes as one possibility since I couldn't find any table settings specific to just the filter table. Maybe I'll disable some column filters that really aren't necessary and see if it helps maintain the width... thanks again!
|
Topshed
Založený: 04.11.2007
Príspevky: 20
Zaslal: 2007-11-28 09:20
Návrat hore
Odpovedať s citátom
|
Citácia: |
When I select the filter, the main table expands beyond the width=800 I have set for the main table.
Any idea how to control the size of the table when Filter mode is selected? |
I had the same problem, rather than fiddle with the CSS in the main file I have a small CSS file I apply after the main one
Simply put:
Kód: |
div {
margin-left: auto;
margin-right: auto;
width: 800px;
text-align: center;
} |
I then enclose my whole script from <body> to </body in a plain DIV
This even controls the <HR> element
The text-align center's the whole page it you want it to, the margin calls are for IE's foibles
I have 4 of these with 800, 1024, 1260 and 99(for 99%) in the.titles, I just use the one that fits the table best.
I also find it simple to change the foreground and background colors and <td> backgrounds and other odd stuff
If anyone want the full scrip I will post one
Regards
Roy..
[/code]
|
zucarino
Založený: 29.12.2005
Príspevky: 44
Bydlisko: Rio de Janeiro - Brazil
Zaslal: 2007-11-28 10:32
Návrat hore
Odpovedať s citátom
|
Hi Roy
Fine. Please, post an example just to help the beginners.
Thanks!
_________________ ---
Victor Zucarino
vffzbr at yahoo dot com dot br
|
Topshed
Založený: 04.11.2007
Príspevky: 20
Zaslal: 2007-11-28 21:39
Návrat hore
Odpovedať s citátom
|
Sample CSS as mentioned above
Kód: |
body { /* Set body style outside of the table */
background: Green;
color: #fff;
font: 14px Comic-Sans-MS, Arial, Helvetica, sans-serif; /* these fonts will be inherited for all that follows*/
}
br {
clear: left;
}
div { /* To contain width of disply */
margin-left: auto;
margin-right: auto;
width: 800px; /* or whatever*/
/*width: 1024px; */
/*width: 1280px; */
/*width: 99%; /* full width */
text-align: center;
}
h1, h2.h3. h4. h5. h6 { /* Match with body color*/
background-color: #FF0000;
color: white;
font-weight: bold;
}
h5 {
text-align: left /* if you need to align one differant */
}
table, td{ /* table text color which otherwise would inhert white from the body */
color: Black;
text-align: left; /* may as well set alingmnet as well */
}
#footcontain { /* if you need a separate DIV footer outside the main Div*/
text-align: center;
width: 100%;
}
#footer {
clear: both; /* if you need a separate DIV footer outside the main Div*/
margin-left: auto;
margin-right: auto;
text-align: center;
}
|
Roy...
|
mbinder
Založený: 25.09.2008
Príspevky: 3
Zaslal: 2008-10-04 14:35
Návrat hore
Odpovedať s citátom
|
mostshar Napísal: |
Thanks
but how to add this code to my php page |
hello i got troubles with attributes in style sheet. in want record-0 and record-1 colors different but it seems like all numberic fields do not get it.
i tried your css and also here...does not work propperly...
do you see anyhting else that is not working about your styles...cant believe this is your final style...somehow
but mainly this color problem...hmm just for some rows...can anybody help?
http://www.binder.li/whiskey4/mfg571/output/my_wstock.php
|
Topshed9
Založený: 14.01.2008
Príspevky: 34
Zaslal: 2010-12-14 05:44
Návrat hore
Odpovedať s citátom
|
Citácia: |
i tried your css and also here...does not work propperly...
do you see anyhting else that is not working about your styles...cant believe this is your final style...somehow
|
I never said it my main style sheet just and add on as a quick fix till I got time to attack the real beast
Below is the line in the main file that makes use all the pme codes which are extremely powerful but can be tricky to work out as there is a lot of inheritance
Kód: |
CSS
tr.pme-row-0{
background: #C4C4C4;
color: #ffffff;
}
tr.pme-row-1{
background: #8C8C8C;
color: #ffffff;
}
|
OR you can put an inline style declaration at the end of your header
Kód: |
<style type="text/css" media="screen" lang="en">
<!--
tr.pme-row-0{
background-color: #ffffff;
color: #000000;
}
tr.pme-row-1{
background-color: #f0f0f0;
color: #000000;
}
-->
|
Regards
Topshed
|
clickbr
Založený: 30.03.2011
Príspevky: 4
Zaslal: 2011-04-06 14:43
Návrat hore
Odpovedať s citátom
|
clickbr Napísal: |
Thanks
Saved my day |
zucarino Napísal: |
mostshar Napísal: |
Thanks
but how to add this code to my php page |
Example:
Kód: |
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>MY_PAGE</title>
<style type="text/css"> @import url("MY_STYLE.css"); </style>
</head>
<body>
<?php
YOUR PHP CODE...
?>
</body>
</html> |
Bye! |
|
gutenzwerg
Založený: 29.03.2012
Príspevky: 4
Zaslal: 2012-03-29 20:10
Návrat hore
Odpovedať s citátom
|
Often Input-Fields contain information which, is disabled to cange, for instance "ID"-fields or changing-date-fields.
For the users it's easier if these kinds of fields are grayed out. You can adress these fields by
Kód: |
//here the style for normal fields
input.pme-input-0,
input.pme-input-1
{
background:#FFFFFF;
border:1px #dcdcdc solid;
color: #000000; font: 9pt Arial,Verdana,Sans;
}
//here the style for disabled fields
input.pme-input-0[disabled],
input.pme-input-1[disabled]
{
background:#efefef;
border:1px #dcdcdc solid;
color: #888888; font: 9pt Arial,Verdana,Sans;
} |
I think it would be helful to take over this kind of code to the code in the main-topic, took me a while to find out.
|
gutenzwerg
Založený: 29.03.2012
Príspevky: 4
Zaslal: 2012-03-29 20:15
Návrat hore
Odpovedať s citátom
|
Often Input-Fields contain information which, is disabled to cange, for instance "ID"-fields or changing-date-fields.
For the users it's easier if these kinds of fields are grayed out. You can adress these fields by
Kód: |
//here the style for normal fields
input.pme-input-0,
input.pme-input-1
{
background:#FFFFFF;
border:1px #dcdcdc solid;
color: #000000; font: 9pt Arial,Verdana,Sans;
}
//here the style for disabled fields
input.pme-input-0[disabled],
input.pme-input-1[disabled]
{
background:#efefef;
border:1px #dcdcdc solid;
color: #888888; font: 9pt Arial,Verdana,Sans;
} |
I think it would be helful to take over this kind of code to the code in the main-topic, took me a while to find out.
|
Odoslať novú tému
Odpovedať na tému
|