Platon Technologies
not logged in Login Registration
EnglishSlovak
open source software development celebrating 10 years of open source development! Friday, March 29, 2024
About Us
Magazine
Open Source
CVS
Services
Index  »  Projects  »  phpMyEdit  »  Forum  »  CSS Style

phpMyEdit Configuration     CSS Style
Post new topic   Reply to topic    
 
zucarino     Joined: 29 Dec 2005   Posts: 44   Location: Rio de Janeiro - Brazil
Post Posted: 2006-07-31 17:03
Back to top  Reply with quote     

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!

Code:
/* 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     Joined: 03 Nov 2006   Posts: 1  
Post Posted: 2006-11-03 02:06
Back to top  Reply with quote     

Thanks
but how to add this code to my php page

 
zucarino     Joined: 29 Dec 2005   Posts: 44   Location: Rio de Janeiro - Brazil
Post Posted: 2006-11-06 10:08
Back to top  Reply with quote     

mostshar wrote:
Thanks
but how to add this code to my php page


Example:

Code:
<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     Joined: 19 Jan 2007   Posts: 7  
Post Posted: 2007-02-03 21:55
Back to top  Reply with quote     

zucarino... Looks great! This example will definitely help me with my site desing! Thanks!


zucarino wrote:
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     Joined: 29 Dec 2005   Posts: 44   Location: Rio de Janeiro - Brazil
Post Posted: 2007-02-09 16:51
Back to top  Reply with quote     

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     Joined: 19 Jan 2007   Posts: 7  
Post Posted: 2007-02-10 03:13
Back to top  Reply with quote     

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     Joined: 19 Jan 2007   Posts: 7  
Post Posted: 2007-02-10 15:22
Back to top  Reply with quote     

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     Joined: 04 Nov 2007   Posts: 20  
Post Posted: 2007-11-28 09:20
Back to top  Reply with quote     

Quote:
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:

Code:
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     Joined: 29 Dec 2005   Posts: 44   Location: Rio de Janeiro - Brazil
Post Posted: 2007-11-28 10:32
Back to top  Reply with quote     

Hi Roy

Fine. Please, post an example just to help the beginners.

Thanks!

_________________
---
Victor Zucarino
vffzbr at yahoo dot com dot br
 
Topshed     Joined: 04 Nov 2007   Posts: 20  
Post Posted: 2007-11-28 21:39
Back to top  Reply with quote     

Sample CSS as mentioned above


Code:
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     Joined: 25 Sep 2008   Posts: 3  
Post Posted: 2008-10-04 14:35
Back to top  Reply with quote     

mostshar wrote:
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     Joined: 14 Jan 2008   Posts: 34  
Post Posted: 2010-12-14 05:44
Back to top  Reply with quote     

Quote:

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

Code:

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
Code:

<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     Joined: 30 Mar 2011   Posts: 4  
Post Posted: 2011-04-06 14:43
Back to top  Reply with quote     

clickbr wrote:
Thanks
Saved my day


zucarino wrote:
mostshar wrote:
Thanks
but how to add this code to my php page


Example:

Code:
<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     Joined: 29 Mar 2012   Posts: 4  
Post Posted: 2012-03-29 20:10
Back to top  Reply with quote     

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

Code:

//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     Joined: 29 Mar 2012   Posts: 4  
Post Posted: 2012-03-29 20:15
Back to top  Reply with quote     

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

Code:

//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.

 
Post new topic   Reply to topic    

Copyright © 2002-2006 Platon Group
Site powered by Metafox CMS
Go to Top · Feedback form · Application form
Report bug on PLATON.SK website · Terms of use · Privacy policy