Matching visuals to CSS

[harveyk]

Hello, I just installed EasyPHP and would like to customize it somewhat. Nothing major, but colors, fonts, spacing, etc. Your comments in the main CSS file are pretty good, but it's still confusing trying to match up each style in the CSS file to the ouitputted page. Would it be possible to create a few base pages that have the CSS style names printed on them? For instance, I would be looking at the main calendar page just as it is now, see the blue row color, and also see some kind of text with arrow pointing to the row and saying ".TableRow" or something like that? Then I could easily just find .TableRow in the CSS file and change the color. Maybe there's some utility that I don't know about that already does something like that? Thanks! :clap:

[ve9gra]

Actually there is :) If you're using Firefox, make sure to check out the Web Developer Toolbar (http://chrispederick.com/work/webdeveloper/) and under the CSS button, enable "View Style Information" and then hover over the items you want information on (you can also click on the items to get the actual part of the CSS that affects it).

[harveyk]

Hey, thanks, I knew there must be something! That toolbar thingie helps a lot. One quirky thing in the calendar design: if you look at http://amsterdambilliards.com/calendar you can see that I changed the rows to a maroon kind of color. It was blue, and that blue seems to be "hard coded" into the design? It's not a CSS thing? Anyway, I still think that a simpler to use kind of Wysiwyg design templater tool would be great! Thanks...
:banana:

[ve9gra]

I'm not sure exactly where you're having an issue.. if you take a screenshot and point an arrow to what you want to change, we can point you in the right direction. Note that the listing module uses templates which are located in /templates and the CSS is built into the .php files themselves whereas the calendar uses themes which are in /theme. Themes are .css files only, the TOC part being at the top of the file, and the normal calendar's section being in the bottom part of the file (both sections are seperated by a significant number of blank lines).

The image with all parts of the calendar exploded showing what style affects it is something that I have on my To-Do list for the EPCTutorials site. I'm sure that it will be of help to many clients.

[Brian]

There are no "hard coded" colors designed into the calendar output. Although I'm not sure what you're having problems changing since you did change the color? :confused4

[harveyk]

Thanks for the reply. The postings by ve9gra helped a lot too. I don't see any mention of /templates in the 'customizing' page of your http://docs.easyphpcalendar.com/ site, but maybe I missed it. The 'hard coded' thing I was referring to was this line: "<table width="100%" border="0" cellpadding="1" cellspacing="0" bgcolor="#663300" class="tableListings">". I changed it to 663300, but I thought all that was done with CSS. Anyway, there really aren't all that many styles I guess, so I'm sure I'll figure it all out, especially with that toolbar that ve9gra suggested. But that exploded diagram would be great. Also, check this out: http://www.jsand.net/spinkbb/?lang=en It allows you to easily generate new css files for punbb by with a simple web interface. It's debatable how nice the designs end up being, but it's a pretty good idea. Better would be a simple form with dropdowns for font, row colors, highlight colors, etc. But I'm sure that must be a lot of work to do. Thanks for your help.
:)

[Brian]

We have grand plans for making these type of changes in Version 7 much more intuitive. ;)

[ve9gra]

Well, I got it... there's now a Calendar CSS Map (http://www.epctutorials.com/index.php?option=com_content&task=view&id=13&Itemid=26). There will be more maps coming up as well as tutorials on integration into existing sites.

[Brian]

Great job ve9gra!

You may want to put this in a new topic and make it a sticky!