Platon Technologies
neprihlásený Prihlásiť Registrácia
SlovakEnglish
open source software development oslavujeme 10 rokov vývoja otvoreného softvéru! Utorok, 17. september 2024
O nás
Magazín
Otvorený softvér
CVS
Služby
Index  »  Projekty  »  phpMyEdit  »  Fórum  »  CSS Style

phpMyEdit Configuration     CSS Style
Odoslať novú tému   Odpovedať na tému    
 
zucarino     Založený: 29.12.2005   Príspevky: 44   Bydlisko: Rio de Janeiro - Brazil
Príspevok 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  
Príspevok 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
Príspevok 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  
Príspevok 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
Príspevok 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  
Príspevok 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  
Príspevok 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  
Príspevok 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
Príspevok 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  
Príspevok 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  
Príspevok 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  
Príspevok 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  
Príspevok 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  
Príspevok 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  
Príspevok 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    

Copyright © 2002-2006 Platon Group
Stránka používa redakčný systém Metafox
Na začiatok · Odkazový formulár · Prihláška
Upozorniť na chybu na PLATON.SK webstránke · Podmienky použitia · Ochrana osobných údajov