Discussions on the interface

Archive of notes and cross input on Dev versions of Coranto (1.25.1 and Older)

Moderators: Dale Ray, SrNupsen, Bluetooth, Jackanape

Postby Jahandar » Sun Sep 18, 2005 2:20 am

Okay, I made it a little further..

I took a somewhat different approach from before, and used anchors (<a>) and divs. The only parts I can't figure out are how to make the gray boxes on the vertical page the same width, and how to make the boxes on the horizontal page line up 2x2. Perhaps someone with more CSS experence can jump in?


Vertical
Vertical CSS

Horizontal
Horizontal CSS
Generic Editor Adaptor (GEA) - Use virtually any WYSIWYG HTML Editor in Coranto
cra_RTE - WYSIWYG HTML Editor for Coranto posts
HowTo: Fix Reply Links when using ShadowMail and Private Messenger together
Jahandar
 
Posts: 64
Joined: Mon Mar 28, 2005 1:27 am
Location: USA

Postby Parahead » Sun Sep 18, 2005 3:47 pm

Jahandar wrote:I took a somewhat different approach from before, and used anchors (<a>) and divs. The only parts I can't figure out are how to make the gray boxes on the vertical page the same width, and how to make the boxes on the horizontal page line up 2x2. Perhaps someone with more CSS experence can jump in?
Great work! :-) I used your work as a base and took it even further. Check out these links:

Vertical (Facelift) approach and the corresponding CSS.
Horizontal (Normal) approach and the corresponding CSS.

Please note that the HTML *is* the same in those two examples, it is only the CSS that is different between the two layouts! I take no responsibility about the CSS, since I am no expert in this area. Maybe someone can take this even further and verify how it looks in different browsers? The "quicklist" is built using a unsorted list (UL). Feedback on this?
Yes, I am still around...
www.parahead.com/coranto/
User avatar
Parahead
 
Posts: 4837
Joined: Fri Jan 12, 2007 8:54 pm
Location: Stockholm - Sweden

Postby muttly » Sun Sep 18, 2005 4:19 pm

Parahead wrote:Great work! :-) I used your work as a base and took it even further. Check out these links:

Please note that the HTML *is* the same in those two examples, it is only the CSS that is different between the two layouts! I take no responsibility about the CSS, since I am no expert in this area. Maybe someone can take this even further and verify how it looks in different browsers? The "quicklist" is built using a unsorted list (UL). Feedback on this?


Bzzzzzzt! wah wah wah wah....
say it with me - Explorer sucks

But hey, thanks for playing.
Welcome to the voodoo based world of stylesheets where nothing is as straightforward as it should be.

The current conventional wisdom is to develop your CSS in a less broken browser like firefox and once it works there, then go back and account for Explorer. If you are going to be doing CSS, Firefox also has a most excellent developer extention that will help alot.

The good news is, I might be making some progress on this. Overlook the aesthetics for the moment. I'm still working out a robust template and haven't done any Windows testing yet. This might even look as broken to you as yours does does from here.
Last edited by muttly on Sun Sep 18, 2005 4:33 pm, edited 1 time in total.
muttly
 
Posts: 178
Joined: Mon Jun 10, 2002 8:19 pm

Postby Parahead » Sun Sep 18, 2005 4:32 pm

muttly wrote:Bzzzzzzt! wah wah wah wah....
say it with me - Explorer sucks

But hey, thanks for playing.
Welcome to the voodoo based world of stylesheets. Where nothing is as straightforward as it should be.
Oh, my.... :oops:
Well, this is one of the reasons I haven't taken a deeper look on updating the admin interface. Anyway, this was the intended look for the horizontal and vertical pages...

muttly wrote:The current conventional wisdom is to develop your CSS in a less broken browser like firefox and once it works there, then go back and account for Explorer. If you are going to be doing CSS, Firefox also has a most excellent developer extention that will help alot.
Thanks, will look into it...

muttly wrote:The good news is, I might be making some progress on this. Overlook the aesthetics for the moment. I'm still working out a robust template and haven't done any Windows testing yet. This might even look as broken to you as yours does does from here.
Nice! And well, it does look a little broken but not nowhere near as broken as my pathetic effort looked like... ;-)
Yes, I am still around...
www.parahead.com/coranto/
User avatar
Parahead
 
Posts: 4837
Joined: Fri Jan 12, 2007 8:54 pm
Location: Stockholm - Sweden

Postby muttly » Sun Sep 18, 2005 5:10 pm

Parahead wrote:Well, this is one of the reasons I haven't taken a deeper look on updating the admin interface. Anyway, this was the intended look for the horizontal and vertical pages...

Nice! And well, it does look a little broken but not nowhere near as broken as my pathetic effort looked like... ;-)


This is what I'm seeing via Safari & FF http://www.neo-meme.net/coranto312/lessbuggy.gif

At least the font sizing looks about the same, though it might look a little small to some FF users. It takes a special kind of masochism to be attempting complex CSS layouts. I can''t say I blame you for not getting involved. It's also one of the reasons I left some of the tables in my earlier shot at this.

*sigh* When I think of the hours and hours of unsatisifying and unpaid labor I have done trying to account for Explorer's flaws... I'll try to keep my ranting to a minimum, but it gets me worked up every time. Bug chasing and workarounds are not what I want to be doing with my time. That's not say FF or Safari are bug free, but theirs are much smaller failings and much easier to work around.

Parahead wrote:I am just looking at the differences between the normal layout with two columns at the admin page in Coranto and with Facelift enabled the one column "short list". It would be really neat if a new CSS approach could support both of these layouts just by changing a CSS file. I like the subheadings (Coranto Configuration/News-Building Configuration/Addons) at the Facelift main admin page, this is somthing that should be implemented regardless I think.

If there is some CSS wizard out there that could make *mockups* of the Admin page (for example) with two really different CSS layout


I also like the way Facelift adds subheads and exposes additional links. I don't think they could be suppressed using CSS for a straight swap between a bottom links list layout and a sidebar links layout. I haven't given up on this yet, but the world may not be ready for one file, 2 styles. The on-the-fly layout switching only works consistently well with very simple layouts.


Parahead wrote:OK, here are some screenshots directly from your testsite

Login Page - Don't think we should use a img/logo
Main Page - Why is the first options not in sync with the rest?
Admin Page - Why are some options "out of sync", not 50% left/right?
Manage Profiles - Rather different colors than the rest of the pages?
Modify News - The most right columns lack headings?
Settings Page - Why isn't the left and right side split 50% for every line?


Login Page - I'm not too married to the embedded logo either, as a gif, it will almost certainly be a hassle to match the aliased edge to whatever different theme variation someone chooses. I was just looking for a way to not look quite so low budget.

Main Page /Admin Page - Sr Nupsen saw some variation on this problem as well. The short answer is another curse filled rant against Explorer and it's crap implementation of the box model. The longer, more civilized response is that styles are not tables. Both of those screens still contain some minimal tables because I was afraid that going to a 100% CSS layout would interfere with way the existing code base adds new items. It appears that you have a fairly large monitor with a high resolution. If the description text were a little longer or a little larger, or the browser window narrowed, it should stretch out to it's proper length. I suppose it could also be a conflict between an addon's table setting and the style sheet. My Windows testing box is a small screen set at a low rez. I treat that combo as a worst case scenario. It looked ok on my screen so I assumed it would be ok for all.

Manage Profiles - Rather different colors than the rest of the pages?
Yes, intentional Top level screens use the burnt orange palette, configuration and input screens are khaki. Compare it to Chameleon themes picker or the User Field Name. Descriptions are always lightest panel, input is the mid tone and input titles are the darkest. Too much reddish brown seemed overwhelming, but is was pretty clear from previous design discussions that the red-orange/fall color palette was consider part of the brand ID and I was stuck with it. Personally I dislike orange and would be changing my theme first thing.

Modify News - The most right columns lack headings?
These coming are coming from the addons. The original code just painted an entire column a single color and didn't account for a <th> row or a 3rd color. One of those small addon updates that should take place, but it won't be a disaster if it doesn't.

Settings Page - Why isn't the left and right side split 50% for every line?
I just didn't define a width. A lot of times I find myself wanting more screen real estate on the right side. I don't get all that blank space on the left like you do either.

Stylesheets dev can get really ugly because of the spotty support for standards across platforms and browsers. I don't totally blame Microsoft and their lackluster efforts at updating Explorer but CSS people have to jump thru some laughably convoluted hoops to achieve a robust layout template. I can't image what the Webstandards org was thinking when they came up with the scheme for stylesheets and didn't really account for some straight forward way of defining the dozen or so basic page layouts.
muttly
 
Posts: 178
Joined: Mon Jun 10, 2002 8:19 pm

Postby Jahandar » Sun Sep 18, 2005 6:55 pm

Actually for me Parahead's pages look great in IE but bad in Firefox and Mozilla.

IE6:
Horizontal
Vertical

Firefox v1.06 and Mozilla v1.7.11 (the pages look the same on both):
Horizontal
Vertical
Generic Editor Adaptor (GEA) - Use virtually any WYSIWYG HTML Editor in Coranto
cra_RTE - WYSIWYG HTML Editor for Coranto posts
HowTo: Fix Reply Links when using ShadowMail and Private Messenger together
Jahandar
 
Posts: 64
Joined: Mon Mar 28, 2005 1:27 am
Location: USA

Postby Parahead » Sun Sep 18, 2005 7:02 pm

muttly wrote:I also like the way Facelift adds subheads and exposes additional links. I don't think they could be suppressed using CSS for a straight swap between a bottom links list layout and a sidebar links layout. I haven't given up on this yet, but the world may not be ready for one file, 2 styles. The on-the-fly layout switching only works consistently well with very simple layouts.
Just looking at both your examples and my own, I am starting to think that we may not do this with a CSS only layout. I would like to get msbzdragn's opinion on the different layout (the normal one vs. Facelift) and maybe we could improve/change the normal one to look more like Facelift's by default. Thus, people with a sensitive graphical mind wouldn't need to install that addon first thing. If so, I would also like to have opinions about that layout, I don't use it myself, but I guess that some of you that do have suggestions on improvements?

Jahandar wrote:Actually for me Parahead's pages look great in IE but bad in Firefox and Mozilla.
Regardless, it may be too much work to get this right in all browsers. I was really discouraged when I saw both your screenshots and muttly's of my CSS, it had taken me some time to get it where I wanted in IE just to see it wracked in another browser... :-(
Yes, I am still around...
www.parahead.com/coranto/
User avatar
Parahead
 
Posts: 4837
Joined: Fri Jan 12, 2007 8:54 pm
Location: Stockholm - Sweden

Postby Jahandar » Mon Sep 19, 2005 12:23 pm

An idea occured to me last night as I was trying to fall asleep..

We already know Coranto is great is using styles and templates to display content on a page, and those pages can look like anything. Would it perhaps be feasible to extend this power to allow Coranto to build its own interface?

For instance, you could have a style that works like a headline style, for the functions you see on the main page:

<table><tr><td>[GUIField: FunctionLink]</td></tr><tr><td>[GUIField: FunctionDescription]</td></tr></table>


Or for Facelift's vertical list style:

<table><tr><td width="25%">[GUIField: FunctionLink]</td><td width="75%">[GUIField: FunctionDescription]</td></tr></table>

It would certainly offer people all the flexibility they could want, and would work on all browsers, but I'm not sure if the coding work would be feasible. Anyway, it's just an idea.
Generic Editor Adaptor (GEA) - Use virtually any WYSIWYG HTML Editor in Coranto
cra_RTE - WYSIWYG HTML Editor for Coranto posts
HowTo: Fix Reply Links when using ShadowMail and Private Messenger together
Jahandar
 
Posts: 64
Joined: Mon Mar 28, 2005 1:27 am
Location: USA

Postby Parahead » Mon Sep 19, 2005 1:59 pm

Jahandar wrote:We already know Coranto is great is using styles and templates to display content on a page, and those pages can look like anything. Would it perhaps be feasible to extend this power to allow Coranto to build its own interface?
Funny, I was actually thinking along the same line yesterday. I do like the idea, but I see some implactions when talking about addons. If we have a clean installation this might work, but the problem is when addons need to hook in an add extra information, like new columns on the Modify News Page or like the Profile Copier addon and so on.

It may be possible, but would need a little deeper investigation. Also, those styles and templates should not be mixed up with the normal styles and templates so a new routine to maintain them within the interface must be developed as well then. I will give this some more thought...
Yes, I am still around...
www.parahead.com/coranto/
User avatar
Parahead
 
Posts: 4837
Joined: Fri Jan 12, 2007 8:54 pm
Location: Stockholm - Sweden

Postby Jahandar » Mon Sep 19, 2005 3:22 pm

Parahead wrote:Funny, I was actually thinking along the same line yesterday. I do like the idea, but I see some implactions when talking about addons. If we have a clean installation this might work, but the problem is when addons need to hook in an add extra information, like new columns on the Modify News Page or like the Profile Copier addon and so on.


Yes, I also see how addons could cause trouble, but it seems some addons will have to be upgraded either way, due to the new folder structure. You guys were saying earlier how it may be necessary to break a few eggs.

Profile copier doesn't look too bad though, l0rdphi1 uses Coranto's predefined output functions everwhere except for line 18 where he appends [Copy Profile] to $actions. Unless I've overlooked something..?

Back to addons that don't work, though. Best case is they work. Next, they require some changes, the author updates, all is good. Next, is the author is gone, but the license permits updates, so all is good. Worst case is, author is gone and we have no permission to update. For these remaining addons, we can either render them obsolete (implement feature into core) or...

Would it be possible to use the implant hook technique (I couldn't find the thread that tells how to do this, but I know I've seen it) to "fix" certain addons without actually modfying them? If so, is this legal/ethical? Sorry, that may be getting a bit off-topic.

Also, those styles and templates should not be mixed up with the normal styles and templates so a new routine to maintain them within the interface must be developed as well then. I will give this some more thought...


Most definitely. Styles and Templates are just the way to think of them because Coranto users are familiar with these concepts, but "styles" and "templates" for the interface (if added) should not be mixed with those for the content. In fact, that's the rule I'm following as I work on the next version of GEA, which has profile and template support.
Generic Editor Adaptor (GEA) - Use virtually any WYSIWYG HTML Editor in Coranto
cra_RTE - WYSIWYG HTML Editor for Coranto posts
HowTo: Fix Reply Links when using ShadowMail and Private Messenger together
Jahandar
 
Posts: 64
Joined: Mon Mar 28, 2005 1:27 am
Location: USA

Postby Parahead » Mon Sep 19, 2005 5:58 pm

Jahandar wrote:
Parahead wrote:Funny, I was actually thinking along the same line yesterday. I do like the idea, but I see some implactions when talking about addons. If we have a clean installation this might work, but the problem is when addons need to hook in an add extra information, like new columns on the Modify News Page or like the Profile Copier addon and so on.
Yes, I also see how addons could cause trouble, but it seems some addons will have to be upgraded either way, due to the new folder structure. You guys were saying earlier how it may be necessary to break a few eggs.
Yes, of course addons need to be updated one way or the other, we are agreed on that one. I am more talking about *how* this technique should work together with addons regardless of the "permission" issue. The new technique must support the same level of integration as the current one. Basically, how would an addon hook in its information and where. If the design is flexible, the insertion technique need to be that too.

Take an example with the "quicklinks" at the bottom of the normal interface (without Facelift enabled!). How to create a style that allows addons to add extra options and make it possible to present some sort of delimiter between each option?

Jahandar wrote:Profile copier doesn't look too bad though, l0rdphi1 uses Coranto's predefined output functions everwhere except for line 18 where he appends [Copy Profile] to $actions. Unless I've overlooked something..?
Correct, but follow my line of thinking from above. Now the layout is "[Copy Profile]" but if you would like to change the style to look like "=>Copy Profile<=" instead?

Jahandar wrote:Back to addons that don't work, though. Best case is they work. Next, they require some changes, the author updates, all is good. Next, is the author is gone, but the license permits updates, so all is good. Worst case is, author is gone and we have no permission to update. For these remaining addons, we can either render them obsolete (implement feature into core) or...
Yes, the chain of reasoning is good, except for the last one, in general I do not think addons should go into the core. And this may be easy to say, but to put such a burden (which they hasn't asked for) on addon developers is risky. And someone has to create new addons for the ones that may be obsolete (no author/license problem), lets say it is maybe 5 "important" ones, who should do those updates/new addons? You, me? Regardless of the new presentation technique, it should try not to impact on addons to much.

Jahandar wrote:Would it be possible to use the implant hook technique (I couldn't find the thread that tells how to do this, but I know I've seen it) to "fix" certain addons without actually modfying them? If so, is this legal/ethical? Sorry, that may be getting a bit off-topic.
Maybe, really depends if that could be done or not. Lets come up with a style/template technique first and see if that could work before getting into this discussion...
Yes, I am still around...
www.parahead.com/coranto/
User avatar
Parahead
 
Posts: 4837
Joined: Fri Jan 12, 2007 8:54 pm
Location: Stockholm - Sweden

Postby Jahandar » Tue Sep 20, 2005 1:47 am

lol, we just keep running into brick walls, don't we? :) Personally, I don't really mind the current interface, and I don't even use FaceLift or Chameleon. I can change the CSS with the CSS Editor addon, and that's good enough for me.

Anyway, if people really want a more customizeable interface, it may just have to come down to some sort of compromise in order to limit the number of addons effected. For instance it might be possible to control the overall "flow" of the pages, but not change little things like making [ Edit ] into -> Edit <-
Generic Editor Adaptor (GEA) - Use virtually any WYSIWYG HTML Editor in Coranto
cra_RTE - WYSIWYG HTML Editor for Coranto posts
HowTo: Fix Reply Links when using ShadowMail and Private Messenger together
Jahandar
 
Posts: 64
Joined: Mon Mar 28, 2005 1:27 am
Location: USA

Postby Psykosys » Tue Sep 20, 2005 5:18 am

Jahandar wrote:For instance it might be possible to control the overall "flow" of the pages, but not change little things like making [ Edit ] into -> Edit <-
What if options such as the latter were part of the core but could be enabled/disabled under Administration, depending on the user's compatibility needs? That is, there would essentially be a "Coranto Classic" option, that retained integrated CSS, old style "[xxxx]" bracket-encased links, etc. I'm not sure whether this would be overly complicated to actually implement or not (or would make the script too bloated), but I'm just throwing this out there as a possibility.
Psykosys
 
Posts: 252
Joined: Tue Apr 15, 2003 10:37 pm
Location: Ithaca, NY

Postby Jahandar » Tue Sep 20, 2005 3:04 pm

Psykosys wrote:
Jahandar wrote:For instance it might be possible to control the overall "flow" of the pages, but not change little things like making [ Edit ] into -> Edit <-
What if options such as the latter were part of the core but could be enabled/disabled under Administration, depending on the user's compatibility needs? That is, there would essentially be a "Coranto Classic" option, that retained integrated CSS, old style "[xxxx]" bracket-encased links, etc. I'm not sure whether this would be overly complicated to actually implement or not (or would make the script too bloated), but I'm just throwing this out there as a possibility.


That is certainly a possibility, but first it has to be determined if customizing the interface is even feasible at all. This topic nearing the limits of my current level of experience with large modular projects like this, and it seems we're all a bit rough around the edges in some areas, like CSS. Perhaps that's why I'm interested, even though I'm fine with the current interface. It's a good chance to learn more.
Generic Editor Adaptor (GEA) - Use virtually any WYSIWYG HTML Editor in Coranto
cra_RTE - WYSIWYG HTML Editor for Coranto posts
HowTo: Fix Reply Links when using ShadowMail and Private Messenger together
Jahandar
 
Posts: 64
Joined: Mon Mar 28, 2005 1:27 am
Location: USA

Postby Parahead » Tue Sep 20, 2005 6:20 pm

Jahandar wrote:
Psykosys wrote:
Jahandar wrote:For instance it might be possible to control the overall "flow" of the pages, but not change little things like making [ Edit ] into -> Edit <-
What if options such as the latter were part of the core but could be enabled/disabled under Administration, depending on the user's compatibility needs? That is, there would essentially be a "Coranto Classic" option, that retained integrated CSS, old style "[xxxx]" bracket-encased links, etc. I'm not sure whether this would be overly complicated to actually implement or not (or would make the script too bloated), but I'm just throwing this out there as a possibility.
That is certainly a possibility, but first it has to be determined if customizing the interface is even feasible at all. This topic nearing the limits of my current level of experience with large modular projects like this, and it seems we're all a bit rough around the edges in some areas, like CSS. Perhaps that's why I'm interested, even though I'm fine with the current interface. It's a good chance to learn more.

I am thinking along the lines of maybe update the interface to look something more like Facelift but "lock it" at that and not be able to "fool around" with it so much as we are trying to do now. It seems that it is too much work to make that happen...
Yes, I am still around...
www.parahead.com/coranto/
User avatar
Parahead
 
Posts: 4837
Joined: Fri Jan 12, 2007 8:54 pm
Location: Stockholm - Sweden

PreviousNext

Return to Coranto Development Archives -- 1.25.1 and Older

Who is online

Users browsing this forum: No registered users and 1 guest

cron