How easy is to modify CSS from a dynamic PHP file?

Forum Moderators: not2easy

Message Too Old, No Replies

How easy is to modify CSS from a dynamic PHP file?

make the php look pretty by using CSS

JPcinemamaster

5:42 pm on Jun 26, 2010 (gmt 0)

Hello,
I know that I cannot post links here (I wish I could to show you this example), but a client of mine is thinking about changing the look of a dynamic PHP calendar that uses a bad choice of table settings and colors. I am pretty good with CSS but very little PHP. Is it difficult to change the CSS look of a dynamic PHP page?
Thank you

mihai2u

6:42 pm on Jun 26, 2010 (gmt 0)

Hi,

It doesn't matter what technology powers the page you are trying to style -> they all export HTML, so you should be able to style it like any other HTML page... as long as you're happy with the mark-up :)
If you want to add classes and such, you will need to dig through a beginners PHP tutorial.

Hope the advice will help you.

max4

4:40 pm on Jun 27, 2010 (gmt 0)

Hi JPcinemamaster,

What you are attempting to do is actually very simple. Do the following in your html file:


<head>
<link rel="stylesheet" type="text/css" href="/s.php?get=x" />
</head>

And that will enable you to write php directly into your css file.

rocknbil

8:51 pm on Jun 28, 2010 (gmt 0)

changing the look of a dynamic PHP calendar that uses a bad choice of table settings and colors.

It depends. When you view source of the calendar, what do you see?

<td style="day-style">

or

<td background="#c0c0c0">
or alternatively,
<td style="background:#c0c0c0">

In the first case, as mentioned, you only need to locate the style sheet for the PHP script and modify accordingly, in the second two, not so easy (for an inexperienced coder.)

You'll need to modify the script to swap out or just REMOVE all inline CSS for the calendar. I say remove because the most graceful solution would be the least markup possible, shifting the weight of presentation on your CSS. Let me give you one example, say, for a month display.


<table> 
<tr> 
 <th background="#256329" color="#fff" align="center"><strong>Sunday</strong></th> 
 <th background="#256329" color="#fff" align="center"><strong>Monday</strong></th> 
 <!-- etc., for all days --> 
</tr> 
<tr> 
 <td background="#00ff99">1</td> 
 <td background="#00ff99">2</td> 
 <!-- etc --> 
</tr> 
</table>

Even if you could apply CSS to this table, the nature of cascading style sheets is such the the inline elements will always take precedence over styles declared above them in the cascade (though you could try !important, but if defined in a higher selector, the inline style will probably take precedence.)

Now remove all the styling, but only id the table


<table id="month-display"> 
<tr> 
 <th>Sunday</th> 
 <th>Monday</th> 
 <!-- etc., for all days --> 
</tr> 
<tr> 
 <td>1</td> 
 <td>1</td> 
 <!-- etc --> 
</tr> 
</table>

... and you can now have complete control over this display with the CSS, leaving all the output clean

#month-display th {
background:#7a6230;
color: #fff;
font-weight: bold;
text-align:center;
}

#month-display td {
background: #fcf8e9;
}

The CSS would be a little more complex for a nice look, but you get the idea, you should be able to control all the children in #month-display by only the id selector on the table, with the exception of valign="top".

So if this calendar is using inline styles you'll have to modify the way it outputs html.

JPcinemamaster

3:38 pm on Jun 30, 2010 (gmt 0)

thank you guys for all the info! this table is dynamic but it really looks horrible :D