idea for newbies and web pros

I get a 404 ?
But if there is something, shoot!
I know it can be disheartening to see a post you make go unanswered, but that’s just because it may only be answerable by one or 2 people, and until they check the forum, the rest of us maybe be clueless.
But answers are given, so do post ??

Southsou, I for one think it’s a great idea. NuclearMoose already has an excellent annotated wp-layout.css on his site, but it’d be awesome to see it made ‘visual’.

Ah! ??
Okay .. first thoughts – no problem. I could do one of those.
Second thoughts – although using graphical balloons would be a start point, the WP user would also have to be prepared to read all the guidelines that accompany the CSS, and (for me at least) be prepared to break and subsequently mend the page at times on their journey to make it better.
If it would be useful I’ll start on one tomorrow (it’s 22:52 here now).

Cena: Yes, I did look at the annotated layout on NuclearMoose’s site. It was very helpful.
podz: Thanks for looking again. I certainly agree that we newbies have to read and be prepared for failure. Is there a Bible (other than the docs) to swear on, to say that we will read in addition to looking at pictures? ??

LOL !
The only swearing you need will come naturally as you break it ??
I’ll do a default install of WP tomorrow, then see what I can do.

podz: Fantastic!! I’ll check in to see. Get some sleep.

Actually, what I think might be beneficial is an image (or set of images) that show (on the left) the default WP site, and (on the right) the CSS contents, with arrows, that show “this CSS block goes with this content piece”…..
TG

Well, another way to show some of that is to take two images of a webpage, one in full color on the left, one grayscale-watermarked on the right with ‘overlays’ on each section giving a pointer to the CSS and index.php sections that refer to it.
-d
https://www.chait.net

LOL thats a lot of information to fit on one screen and constantly scrolling will only make it harder.
What about a flash template? You see an area, click it, and up pops a title with explanation and css rules. Combine that with a “slide show” mode where people can just cycle through the layout, and we have a great tool to teach people not only wordpress, but also css!

I’m aware that too much scrolling would be annoying, so what I was thinking of doing was a screenshot of a default WP install, and then having numbered balloons pointing to the various sections:
header div
header text
p text
.feedback
menu div etc
This screenshot would be opened in a separate window, and in the original window would be a list of the numbers along with an explanation of the CSS involved.
The user has then just to flick between the two screens – a hassle yes, but we are talking about a huge amount of in formation.
For instance, if bubble 5 pointed at text, then it would look like:
——–
5. The way your entered text displays is controlled by this statement in the css:
p, li, .feedback {
font: 90%/175% ‘Lucida Grande’, ‘Lucida Sans Unicode’, Verdana, sans-serif;
letter-spacing: -1px;
}
Changing the 90% will change the text size, while changing the 175% will change the text spacing.
If you want to change the font, alter the 4 font names to your desired choice.
Letter-spacing is self-explanatory, but try changing the value there just so you can see it’s effect.
———-
I think some of the above suggestions are excellent, but I’m afraid they are probably beyond my capabilities.
Worth me going with my idea ?

Okay.. had a bit of a go
https://www.tamba2.org.uk/css/
It’s basic, very unfinished and the layout could do with help (I’ve got a bad cold today – my excuse ?? )
While I think something similar would do for some elements, when it comes to the actual layout, a single screenshot would get way too confusing. Maybe have one for text elements, one for layout elements ?
Thoughts so far ?

podz:
Good morning (I’m in Seattle). Thank you for your effort. That’s what I had in mind. It’s clear that one screenshot would be confusing. I think something like this would be extremely helpful and I’ll bet it would cut down the number of annoying posts from people like me by quite a bit.
If you continue with this, where will you put the results for us to see/comment on/laugh at/try out/cry over ?
Thanks once more.
— southsou

Evening – It’s 18:02 here ??
I’ll host the files as I’m not sure if the wiki can or does. I already have some ftp guides on my site.
After starting that, I’m trying to figure out a logical sequence in how to complete the task, and my initial thoughts are this;
– 1 image for #content elements
– 1 image for #menu elements
– 1 image for overall layout divs.
Once I’m clear about how it should go in my head, I’ll get the work done. Mind, if this cold I’ve got would go, I’m sure my ability to think better would improve !

Podz, great job so far.
I just wonder if it wouldn’t be simpler to have a ‘hover balloon’ over each element that contains the appropriate .css selector. That would be easier than having 2 (or more) windows open and having to flip through them each time. Just a thought.
Either way, it’s already been a great help to me. ??

Would a hover balloon need javascript ?
One reason why I’d not choose that would be if that people are confused, then having to flip between what they may be trying to do and another screen, then positioning the mouse to see the hover info could get annoying ?
I’ve not used that technique for text though, so I’d be happy to give it a whirl and see how it turns out ?