sNews Forum

Website Talk => Site showcase => Topic started by: pearjam on August 23, 2010, 02:55:25 pm

Title: fearelise.com - a constant work in progress :)
Post by: pearjam on August 23, 2010, 02:55:25 pm
This is my sNews Powered site!

http://fearelise.com/


(I'm forever messing with it, so it may not always look good... :)  )


Title: Re: fearelise.com - a constant work in progress :)
Post by: pearjam on August 23, 2010, 06:37:37 pm
Seems like I just posted this a little while ago  - but I've already had hits from:

Canada
Sweden
United States
Switzerland
Netherlands

They all came from this post - thanks guys!!
Title: Re: fearelise.com - a constant work in progress :)
Post by: Keyrocks on August 23, 2010, 06:57:34 pm
Seems like I just posted this a little while ago  - but I've already had hits from:

Canada - Sweden - United States - Switzerland - Netherlands

They all came from this post - thanks guys!!

yeah... nice site Pear-jammer.  :)
Me, from Canada and (just a guess) Patric from Sweden, Nukpana or Bakercad from the U.S., and Brauk from the Netherlands.
Title: Re: fearelise.com - a constant work in progress :)
Post by: pearjam on August 23, 2010, 08:19:00 pm
Well awesome!

Keyrocks - did you see the gallery working? (You helped me with it in a different thread.)

You might take a look in a day or two - that's when I'll have the Moab / SLC galleries up....but other galleries are there now.
Title: Re: fearelise.com - a constant work in progress :)
Post by: Keyrocks on August 24, 2010, 04:54:15 am

1)   Keyrocks - did you see the gallery working? (You helped me with it in a different thread.)

2)   You might take a look in a day or two - that's when I'll have the Moab / SLC galleries up....but other galleries are there now.

1) Yes, I did. I checked out your Jeep pics... hadn't looked at a 2005 before... that's nice... and the chick in the Jeep's nice too.  ;D
    I have a 1998 black Cherokee Sport... straight 4.0L 6-banger... getting a bit old now...
    ... the rocker panels are perforated with rust...
    ... the front drive axle U-joints are shot again (just changed 'em two eyars ago)...
    ... loose baffles in the muffler are rattling a bit loud... rusty brake lines... etc... but still a strong workhorse and easy to fix at home.

2) Let us know when you have the other galleries up.
Title: Re: fearelise.com - a constant work in progress :)
Post by: pearjam on August 27, 2010, 12:02:51 am
Hey thanks! I know what you mean, I've had to replace one u-joint, but they do run strong..   :)

Ok, three new galleries are up from the vacation, and they seemed to turn out pretty good!

http://fearelise.com/ (http://fearelise.com/)

There's a few other minor changes too.

Well, let me know what you think.., I need to post the finished gallery code as a add-on or something.

Title: Re: fearelise.com - a constant work in progress :)
Post by: Fred K on August 27, 2010, 03:42:41 am
I like the header image ... a very David Lynch feel to it... ;)
Galleries seems to be working nicely. Feels like the overall site design needs a bit of work though (of course, taste is a personal thing, so take that comment fwiw.)
Title: Re: fearelise.com - a constant work in progress :)
Post by: pearjam on August 27, 2010, 03:48:55 pm
 ;D

Wow! The David Lynch thing is a great compliment!! Nice!

You might be talking about the dark image ('Me In Statues'). The header images rotate randomly, so each refresh of the page should give you a new image (unless the next image is randomly the same). All of the photos on the site were taken by me or someone else with my camera.

The design is purposefully lightweight (I'm a minimalist). I do plan to add thumb type images to articles and a few other minor design additions (going to experiment with the site title / tag line above the header image to free up one spot on the menu) - all of  which will add a little flare.. just haven't gotten around to it yet (I do all the coding by hand).

The overall design goal is 'modern, optimized, lightweight, elegance', and has been for a long time.. One of the reasons I like sNews - it fits into my overall goals. (The OS, site, pictures, CMS, statistics, firewall, database and everything on my server is only 329MB.) I may be putting my music up at which point the lights in the site will be darks.

Anywho - thank you for the great compliment!  ;D  I'm using your (FredK) no breadcrumbs on home mod too!! (Just as a side note, I'm adding credits to the about page soon, until a short while ago, I didn't have any other credits to put on there, and the page has been the same for a long time...  :) )



Title: Re: fearelise.com - a constant work in progress :)
Post by: Fred K on August 27, 2010, 10:24:28 pm
Heh- no, I was referring to the auto dealer/repair shop sign. Reminded me of "Paris Texas", a juvenile favourite of mine. 8)
Thanks for the (coming) cred. Always glad to help.
Title: Re: fearelise.com - a constant work in progress :)
Post by: pearjam on September 04, 2010, 08:10:10 pm
ahhh yes - the old Western Auto bldg in downtown - I tried for a grainy effect on that photo - tried giving it a 60's / 70's look by muting color and adding noise.
Title: Re: fearelise.com - a constant work in progress :)
Post by: Sasha on September 12, 2010, 05:33:09 am
Hi!! nice site  :D
Title: Re: fearelise.com - a constant work in progress :)
Post by: pearjam on September 13, 2010, 02:56:41 pm
Thank you sir!!
Title: Re: fearelise.com - a constant work in progress :)
Post by: pearjam on December 04, 2010, 05:18:46 pm

I've made a new theme for my site - I'm calling it the 'ClearLine Theme' (for lack of a better name).  :)

http://fearelise.com/

There's one tweak left to go, a php back-to-top link that only shows after scrolling past a point on long pages. Other than that, it's has my 'in-article galleries' mod.. 'latest-article' on front page mod.. a counter I made that only counts index page hits.. a 'rotating image banner' that changes with every refresh (only one line of php).. and my 'no-match-captcha/anti-spam' mod. The whole thing is made to be as light weight as possible, with the most bang.

I'm curious what others think about the theme?

(I'm thinking about putting it in the themes section for others to use if they want - it would take some effort as some of the text is modified in snews.php and en.php for the theme. Not sure how to approach that if I did put it in the themes.)


Title: Re: fearelise.com - a constant work in progress :)
Post by: Keyrocks on December 04, 2010, 07:29:05 pm
http://fearelise.com/

I'm curious what others think about the theme?
I'm thinking about putting it in the themes section for others to use if they want - it would take some effort as some of the text is modified in snews.php and en.php for the theme. Not sure how to approach that if I did put it in the themes.

It's a nice theme, easy on the eyes and not cluttered by unnecessary stuff.

If you decide to make it available as a theme to be used with a default sNews installation (not modified otherwise), then I would suggest you download the latest version of sNews (1.7.1), install it locally (if you have an localhost setup), get your new theme working with that by making the necessary changes in the snews.php file, then bundle it up, upload the ZIP to your domain (I put them in a dloads folder on mine) and point a link to it.

Ohhh... and provide some details in your post as well as to what was changed in snews.php and other files, sorta like a log o changes.

You could also make a common, searcheable, comment note in all locations in the snews.php file where the changes are (like - # Theme Mod Locator ), references on what was changed, etc. so that others would be able to use the file as a reference in copying the mods to a heavily-modded snews.php file to suit their own needs.
Title: Re: fearelise.com - a constant work in progress :)
Post by: Sven on December 05, 2010, 09:58:43 am
Superb pearjam!
Really a nice template and a splendid code.
Karma!
Title: Re: fearelise.com - a constant work in progress :)
Post by: pearjam on March 27, 2011, 07:51:55 pm


Alas - I've made a new theme, still keeping it simple... I've used it for about 2 months, and I'm loving it.

I've also had time to add articles, and to get good use out of the CMS (which continues to be awesome).

I'm curious what other's think - of the overall design, content, etc...

fearelise.com (http://fearelise.com/)

(thanks for any input!)
Title: Re: fearelise.com - a constant work in progress :)
Post by: nukpana on March 28, 2011, 01:30:09 pm
The different full colored headers throw the site off balance IMO
The logo too seems squashed and forced.
I was surprised not to see the italic logo and more of similar type in the headers
The lowercased menu doens't fit with the first letter uppercase breadcrumbs
The spacing on the sidebar need more "breathing" & be consistent
I am debating the dotted line under the article title compared to the non lined equivalent on the home/category page
The article header in full view seems to have to much margin-left
The article image (for the non graphic pages ie this (http://fearelise.com/how-to/tech/a-lightweight-back-to-top-link/) or this (http://fearelise.com/jeep/how-to/side-mirrors-with-the-doors-off/)) seems to have too much bottom open space
The menu bar (4 main links) seems to be off in spacing, esp the Jeep & the about
What is wrong with the about - about &?
My jeep needs a picture of your jeep!! lol (I've been look at getting an XJ sport for some time...)
The footer section seems unfinsihed... new comments doesn't stand out as a header
The info on the left seems to be just placed there
Archive link by itself seems like an bad after thought....



Title: Re: fearelise.com - a constant work in progress :)
Post by: pearjam on March 28, 2011, 04:27:11 pm
Awesome Nukpana - exactly what I was looking for!!  +1k for going through the site, and being detailed in response!! After messing with the design for a while, sometimes stuff doesn't stand out the way it would to another - so that was very helpful.

A good example is the "article text" (where an "article image" would be). The idea is portability. A lot of article thumbs are just thumbs of text. I can make fancy text via one line of CSS instead of pshoping it. By putting the 'article text / image code' directly in and at the top of the article itself in the 'edit article' view in sNews, I can add an article when away from home where my trusty Gimp (pshop) is - and stay uniform.

I can add info to the 'article image / text' making it informative, and can change it on the fly by just changing the text. All articles of sub-groups have 'article text' based on their group - but by not using an image, I can add a brand new sub-group when away from home, therefore un-limiting myself. It also saves space and time by not having to find, make, sort and store thumbs.

I can use image thumbs too (and do), in the same code at the top of an article by just calling a thumb instead.

I see what you mean about to much space below the text in the article image / text area. It's not that there's to much space below, but the text needs to be down further (possibly a hair bigger).

One of the goals of the design was compactness. I think that's causing a lot of the issues your seeing. The width is 100px less, so while the logo should be even between left / right side - it does have the feeling of being squished. I was switching away from italics for the logo (which is also just css) because italics are aliased on large monitors (still need to change the favicon). I can see what the logo looks like in italics with the bottom of the f going over the wrap.

When I read your "What is wrong with the about - about &?" - there's a chance you're not seeing the rest of the button - it should read "about & contact". (I like using one page to combine both 'about' and 'contact'.) Design wise it's a thorn in my side as it's width is wider than the other buttons - it took some messing around, but I got it to fit and it looks good in ff / chrome. (I'm not messing with ie - ie needs to be up to speed, not us coding around them - I'm stubborn on that with good reason, and won't change. :) ). I can see if I can come up with something to help, that is standards compliant but not ie specific.

The idea behind caps vs no caps - all menu items / sub-titles are lower case (less obtrusive), all article titles are caps first letters, and all the rest observes standard capitalization. I can see where sub-titles should be standard caps, and will change it. I'll mess with caps first letter in the menu but it may still be obtrusive.

Space and consistency wise - all content edges are 17px apart. It might look better with 20 (or a little more) height wise in keeping with a tall rectangle - which would add / give the 'breathing room'.

Footer wise... Each 'latest comment' is allowed 2 lines (4 comments, 2 lines each) that would fill up the footer's right side - if every comment was over 2 lines - but they aren't, and thanks to your critique, I thought of just allowing 1 line per comment, which means I can show more comments with less overall footer height - which will help balance the footer's left side.

-------

Which brings me to - what to put on the left side of the footer?? :)  A simple line of php for load time, my own simple php counter, and the archive are all I can think of without adding a crap ton of code for other stuff.

I took the 'site map' code out of the engine because it's nearly identical info to 'archive'. I removed the RSS code because I don't think anyone would subscribe vs visiting so I don't use it. I don't use social media so there's no mini-icons to add, and no 'latest tweets'. There's no mobile version.

I'll eventually add simple ad space (booo), but had thought to put that below 'friends' in the sidebar (would add immediate color) - but it could take up space in the footer as those 'one line google text ads' (which is the service I was thinking of signing up with).

I could see adding something like 'most read articles'. Possibly putting that in the sidebar, and moving 'recent articles' to the footer beside the 'recent comments'. The downside is that if that mod doesn't exist and is simple, I'll end up making it myself - which I like to do, but as my skills are only moderate, would take time.

Aside from 'popular articles', maybe a copyright (or copyleft), maybe some credits (already in about page) - other than that I can't think of anything else for the footer....  Any one have any ideas for footer info??

-------

(Thanks again Nukpana, very helpful and gave me some stuff to work on.. Sorry all for the long post, wanted to touch on each item.)

Title: Re: fearelise.com - a constant work in progress :)
Post by: nukpana on March 28, 2011, 05:05:21 pm
Sorry if this seems rushed, I have an appt soon.

A good example is the "article text" (where an "article image" would be). The idea is portability. A lot of article thumbs are just thumbs of text. I can make fancy text via one line of CSS instead of pshoping it. By putting the 'article text / image code' directly in and at the top of the article itself in the 'edit article' view in sNews, I can add an article when away from home where my trusty Gimp (pshop) is - and stay uniform.

I can add info to the 'article image / text' making it informative, and can change it on the fly by just changing the text. All articles of sub-groups have 'article text' based on their group - but by not using an image, I can add a brand new sub-group when away from home, therefore un-limiting myself. It also saves space and time by not having to find, make, sort and store thumbs.

I can use image thumbs too (and do), in the same code at the top of an article by just calling a thumb instead.

I see what you mean about to much space below the text in the article image / text area. It's not that there's to much space below, but the text needs to be down further (possibly a hair bigger).
Right, or perhaps maybe css that can change when there isn't an img present....


One of the goals of the design was compactness. I think that's causing a lot of the issues your seeing. The width is 100px less, so while the logo should be even between left / right side - it does have the feeling of being squished.
I see the header img taking almost all of the header space... not allowing the logo to breathe.... if that is the intent, ok, but the header img doesn't seem to work - again my opinion.   Compactness? resdesign for mobile lol!

When I read your "What is wrong with the about - about &?" - there's a chance you're not seeing the rest of the button - it should read "about & contact". (I like using one page to combine both 'about' and 'contact'.) Design wise it's a thorn in my side as it's width is wider than the other buttons - it took some messing around, but I got it to fit and it looks good in ff / chrome. (I'm not messing with ie - ie needs to be up to speed, not us coding around them - I'm stubborn on that with good reason, and won't change. :) ). I can see if I can come up with something to help, that is standards compliant but not ie specific.
winXP - FF4 & ubuntu 9.10 FF 3.6 same result.  Spacing seems worse on 3.6.  How about making it a submenu like the how to link? About Me -> me -> contact

Space and consistency wise - all content edges are 17px apart. It might look better with 20 (or a little more) height wise in keeping with a tall rectangle - which would add / give the 'breathing room'.
should have worded it better, I meant more line spacing and margin/padding.  Compare the height of the "curved box | article | article" and look at the side bar blocks,  I am thinking the space between the top part of the block and the sidebar headers should be bigger, at least an even percentage to the main content.  Addtl, the height below the side bar headers IMO should be a tad bigger, esp the Tags!

 


Footer wise... Each 'latest comment' is allowed 2 lines - that would fill up the right side of the footer - if there were no one line comments - but there are - and thanks to your critique, I thought of just allowing 1 line per comment, which also means I can show more comments there with less overall footer height - which will help balance the left side of the footer.
Another thing I noticed, difference between each comment isn't as prominent as I would like... maybe a top border /hr ???


np on the help!
Title: Re: fearelise.com - a constant work in progress :)
Post by: Fred K on March 28, 2011, 05:18:03 pm
I like the contrasting backgrounds (and the ink blot is awesome).

I don't like the small -to the point of being negligible - color difference between normal and hover states on the article links. A sharper difference, or some other clear visual cue for the hover state would improve things imho.

I don't see the point of the arrow oval in the right hand side. From the outset it's almost entirely hidden by one of the side boxes but it becomes visible as you scroll downwards, yet it doesn't seem to have any function (?). Since it doesn't really add anything to the design either, I don't see the point of it. But I might be missing something! ;)

The header lacks something imho. Mostly I think it's the logo that feels scrunched up and unpolished, but then that might be intentional. I think it could do with more breathing room. The Western Auto sign photo is still awesome btw.

Oh, and the search box could be helped by having some placeholder text in it ... As it is I didn't really see it until the third pass, and had to think a bit until I realised what it had to be for. It is a search box, right? :P

On the whole though, it's very readable with a good separation between content and presentation. And it's a big step compared to the previous version, so kudos on that.
Title: Re: fearelise.com - a constant work in progress :)
Post by: pearjam on March 28, 2011, 07:18:42 pm
Wow this is great advice - all the way around - I should of asked sooner. I'll reply with inline quotes, to save space (might be long otherwise).

@nukpana
"maybe css that can change when there isn't an img present"
>> It's only 2 lines as-is which works instead of a switch.

"..header img taking almost all of the header space..not allowing..logo to breathe..if that is the intent, ok..but header img doesn't..work" "..resdesign for mobile"
>> It was intentional, but doesn't sound like it works. It's going to change. lol
>> I just bookmarked a Smashing article on mobile ideas.

"..Spacing seems worse on 3.6.  How about making it a submenu..About Me -> me -> contact"
>> This space thing could be a serious issue (if you are using ff). The problem may be my monitor (every monitor in the house is 25+, 16x9 and 16x10). Everything's scaled standard though, and have checked screen shots of the site in different monitor sizes to be sure. Now I'm not so sure. Will look into further.
>> Making it a submenu item would mean separating about and contact to pages - although it would be easier to widen. I may remove "& contact" from the button text.

"..more line spacing and margin/padding..space between..top..block and..sidebar headers..at least..even percentage to..main content...height below..side bar headers..should be a tad bigger..esp the Tags!"
>> I have the line spacing defined, and had just increased it for readability. I can bump it a hair more.
>> I agree on the height between headers, and content padding.
>> If I increase the tag size max, it will be bigger than the tag area header. The tag size minimum is a little low to help distinguish between more / less articles. I agree it's to small and can be bumped up a hair too.

"..difference between each comment isn't..prominent..maybe a top border /hr"
>> lol - that's how I used to have it - just for that very same reason - and now I'm putting it back that way. :) I use border top instead of hr to save a line. (Can add a border to existing line without having to add an hr definition for style. I'm a serious nitpicky minimalist when it comes to code.)

Great advice, I need to do some fine tunning.

-------

@FredK
"..don't like the small -to the point of being negligible - color difference between normal and hover states..or some other clear visual cue for..hover state"
>> I just did that a few nights ago and thought the same thing, but haven't changed it yet. A line under for hover might work well there - hadn't thought to use that!!

"..the arrow oval in the right hand side..outset it's..entirely hidden..becomes visible as you scroll..yet..doesn't..function"
>> Yikes!! That's my 'back to top link' - it's a line of javascript but doesn't have a mouse-over effect, just like the search button.. If you click it, it should scoot you back to the top of the page. I can see about adding a mouse-over effect to make it more obvious, probably needs it - but if it doesn't work, that's a different issue. Does clicking the up arrow bring you back to the top of the page and is js enabled?

"..the logo.. feels scrunched up..might be intentional"
>> It was. lmao It doesn't work well though - I'm going to switch back to italics, and let the bottom of the f curve over the top of the wrap border. Might look neat and would un-crunch it. Because padding between borders and titles could be increased, I'm probably going to widen the overall wrap width a little to accommodate - that will give more logo room too.
>> Thanks on the Western Auto photo!! I definitely like the way it turned out... now if I could just get my themes to work the first time..ahh yes.. trial and error.  :D

"..search box could be helped by..placeholder text.."
>> I think the problem here is the search button. I can add text too which isn't a bad idea but had taken it away purposefully. I darkened the search button in hopes that it would stand out (knowing it was hard to see), but knew it was still fairly hard to see. I might try the white oval background for the icon and see if that works in addition to placeholder text.

"..On the whole..it's..readable..with..good separation between content and presentation..compared to the previous version"
>> Thank you - I completely agree!! I don't do design for a living, just a fun hobby - so I'm not that great at it, but have messed with it off and on for a while (cert web design '98). I'm head strong about minimalist code as an approach, which doesn't always mesh well with web design (ugh), but allows me to get detailed and creative (yea). I'm told I'm gifted in other mediums, but I know web design isn't (and wont) be one of them! ::) The end result is a simplistic design - that's hopefully simply workable.

Again, great advice (plus-a-k for the detail).. There's now no doubt I need to fine tune things.

-------

I've got a list to do!! :)  If there's anything else (not theme changing), let it fly - can't hurt, who knows what else I might of missed.

Especially footer ideas (given constraints mentioned in my previous post). Of course after shortening the foot height, I may not need more stuff to put on the footer's right side.

@FredK, @nukpana - I might ask you guys to recheck after I make a few changes, if that's ok? (Might be a while, have some other stuff that needs to be done.).

Thanks again!

Title: Re: fearelise.com - a constant work in progress :)
Post by: pearjam on March 28, 2011, 07:34:17 pm
(had an idea for a footer filler, maybe a rotating favorite quote...

Something like Mitch's (rip) "Alcoholism is a disease, but it's the only one you can get yelled at for having..." - or - "I had a stick of CareFree gum, but it didn't work. I felt pretty good while I was blowing that bubble, but as soon as the gum lost its flavor....”

Totally cracks me up.. Yeah, maybe not on the rotating quotes, oh well, but still funny.)
Title: Re: fearelise.com - a constant work in progress :)
Post by: nukpana on March 28, 2011, 07:41:06 pm
really quick (i can't find my wacom pen!!!)
(http://i53.tinypic.com/mmbp7q.jpg)
1. perhaps you can make the whole header the image and the logo as top overlay.... idea...
2. spacing of the menu bar is off
3. see what I mean lol - winxp FF4 & ubuntu FF3 - didn't try chrome sorry
5. the search bar needs to align with the other sidebar elm
4 should have been another point too but this is what I meant by the Tags (and other sidebar) heading spacing in the sidebar headings.  I think it is too tight.  And above the header is tight as well, compared to the main content
Title: Re: fearelise.com - a constant work in progress :)
Post by: Fred K on March 28, 2011, 07:46:01 pm
np, pear.

Regarding the searchfield - I didn't even see the search button! :)
Ever since browsers started incorporating a search field in the chrome, without the exlicit search button, I've completely stopped using search buttons. Just type the query and hit enter. Anyway, either reverse the color of the magnifying glass to make it visible against the dark backdrop, or put it as a background in the searchfield (and do away with the submit button altogether). that's what I would do.

The back to top arrow thing bugs me since there's no feedback on what it does and since it's initially obscured there are uncertainties around its function. Personally I think you can do it without js - I use a modified version of my old jumpto() function, which goes in snews.php:

Code: [Select]
// JUMP TO TOP
function top() {
global $categorySEF, $subcatSEF, $articleSEF;
$link = '<a id="absbottom" href="';
$link .= !empty($categorySEF) ? $categorySEF : '';
$link .= !empty($subcatSEF) ? '/'.$subcatSEF : '';
$link .= !empty($articleSEF) ? '/'.$articleSEF : '';
$link .= '#" title="'.l('back_up').'">'.l('pagetop').'</a>';
echo $link;
}

The id "absbottom" can easily be changed to a class if you think you might need more than one on any given page. Instead of text link you can put your arrow image where l('pagetop') is. If you use it as is, you'll need to add "back_up" and "pagetop" to your lang file. As for usage, you bring in the link by using <?php top(); ?> (or [func]top:|:[/func]) where ever you want to put it. Lately I've found that the breadcrumb container is a suitable place. Of course, I put my breadcrumbs towards the end of a page which most others don't seem to do... ;)

This is just a suggestion of course, but I do think the back up thing needs some looking at.
Title: Re: fearelise.com - a constant work in progress :)
Post by: pearjam on March 28, 2011, 08:19:43 pm
@nukpana Wow - spacing is really off for the menu bar, and the back to top arrow - and is a little off for the search field (should be pyramid like with the search being shorter, but centered over top of sidebar containers). The cause of the menu bar being off is no doubt my workaround to add "& contact" to the "about" button - I'll take out the '& contact', which should fix it. I'm also going to space out sidebar content to better match the article list view.

@FredK Is the spacing (up arrow and menu bar) screwed up like that on your view?

Keep in mind the up arrow is supposed to be hidden initially - then come into view after scrolling, its my simple version of the "fade into view after a point is reached" effect.

Also, I have on my list to adjust the search area, and would probably remove the icon if adding placeholder text, if it seems like overkill... Just need to mess with it.

I checked out your site to see your 'Jump to' - you've really spruced it up! Dang - looks good! Quick side note - they look different between ff and chrome (search area, square corner vs round corner, and pagination gradient. The biggest thing is chrome isn't doing the &special chars so it's jumbled a little. At any rate, just a side note, looks awesome!

I'll have to check out more on your Jump To option and adapt if necessary - while I don't like using js for the link (prefer php), it's extremely lightweight, and secure vs php_self type options - so there's a good chance i might bite the bullet and add a little something to fade it in / out. I'll have to look into the whole thing more.

-------

Just to add, I wouldn't be adding any flashy type stuff other than possibly fading the up arrow link (so I can move it from under the side bar container, which is sort of a pain anyway). The theme should leave you with a good clean 'geeky' feeling, without any flashy stuff - however, there's something to be said for 'easy on the eyes'... I may need to loosen up a little with regard to 'the minimum'.

Title: Re: fearelise.com - a constant work in progress :)
Post by: Fred K on March 28, 2011, 08:44:53 pm
Which version of Chrome? The searchbar uses border-radius (with vendor prefixes for webkit and moz, I was under the impression that Chrome supports -webkit-border-radius ...) and the gradient is also CSS (-webkit-gradient and -moz-linear-gradient respectively for Webkit and FireFox) which Chrome 2 and up should support, at least as far as I know. I'm also surprised that the "special chars" (do you mean the arrows?) aren't rendered in Chrome as they're produced through a custom font served with @font-face coupled with HTML entities which Webkit handles very well (better'n most actually). Content-type is set as well as charset, so technically I see no reason why Chrome should fail on those, unless it's an old version of Chrome, but as far as I know Chrome 2 and up should work. Anyway, it's a personal site and not terribly important. For me, Safari is the target browser for that site - as long as it works there, all's rosy.

That is a huge aside of course, not related to your layout. Even more so since I'm actually not using the top() function on that site... ;)
Title: Re: fearelise.com - a constant work in progress :)
Post by: pearjam on March 28, 2011, 08:46:48 pm
Ok, this is bugging me - the "about & contact" button spacing is correct here across several monitors / browsers, including my phone's browser. Ugh... How can that be? FredK - do you see "about & contact" or "about &"??

(Possibly doesn't matter as I'll likely remove "& contact".)
Title: Re: fearelise.com - a constant work in progress :)
Post by: pearjam on March 28, 2011, 09:30:01 pm
@FredK - here's full sized screenshots (so you can see the gradients better), with chrome on the left, and ff on the right - here's the top (http://fearelise.com/img-other/screenshot.png) - and - here's the bottom (http://fearelise.com/img-other/screenshot2.png) (where the gradients are).

Gradients are working in chrome - not ff. Gradients do work in ff, so it should be there. The search area is very different between the two - looks like chrome is choking a little at programing code that might be there? Note the special chars are odd in chrome. For instance LuAs (chrome) vs Luis (ff) - you can see it in the images - also note the intro text for the article "Will Torres Turn..." --- In FF is says "Will ’nando stay with LFC" - in Chrome it says "Will ’nando stay with LFC"

Both browsers should be at or very near the latest version:
9.0.597.98-r74359 (google-chrome-stable)
3.6.13+build3+0.10.10.1 (firefox)

Title: Re: fearelise.com - a constant work in progress :)
Post by: nukpana on March 28, 2011, 10:21:56 pm
Ok now I see the about & contact in chrome 10 on my ubuntu laptop:
(big pic: http://img508.imageshack.us/img508/74/screenshot2tu.png)
(http://img508.imageshack.us/img508/74/screenshot2tu.png) (http://img508.imageshack.us/i/screenshot2tu.png/)
Title: Re: fearelise.com - a constant work in progress :)
Post by: Fred K on March 29, 2011, 01:35:41 am
Quote from: pearjam
do you see "about & contact" or "about &"??

Yep, Safari 4/Mac 10.4 shows the whole of it just fine.

Thanks for the screenshots. Apparently Chrome supports input type="search", like any Webkit-based browser does, and thus gets the same search field as Safari users, but not at all with the same style as Safari gives it. In fact it looks downright butt ugly in Chrome. Other browsers than Safari/Chrome gets a normal input type="text" search field which has been styled to as close proximity as possible to the Safari style. Hence the diff between Chrome and FF in this case. Funny thing is, the browser detection script used to serve different input types is set to serve input type=search to Safari only, not Webkit. So Chrome is presenting itself incorrectly, it would seem - otherwise it would have gotten the normal input type. A browser issue and not much I can do about it.

As for the gradient not showing in FF, it's possible I forgot to include the -moz-gradient in the styles, I'll have to check. It's a small problem though as the gradient really is a periferal acccent. Looks good without it as well.

The character issue is again a problem with Chrome and not much I can do. The site is served with content-type html and charset utf-8. That in itself doesn't guarantee the ASCII characters getting rendered properly but in this day and age very few mature browsers should have a problem with them. My 1st gen iPod Touch has the same issue and I can only guess that Google has skimped on ASCII character support for Chrome. Shame on them, if that's the case.

Overall though, as the layout clearly works the same across the board of modern browsers, I'm not going to lose sleep over a wonky special character here and there, the problem with FF messing up positioning of he search bar (and the Liverpool badge) are bigger problems for me - but again there's not much to do about it except serve special styles for FF for those two bits, which requires more work than its worth when it comes to a piddly personal site like mine. Client or corporate sites - a different matter altogether. I say fight the battles you can win or at least not lose too badly... ;)

Regarding the spacing of your menu bar and the up arrow - yeah, it's about the same in Safari (except I see the whole about & contact thing). The Up arrow is half hidden underneath the bottom white box though whereas it's all visible in Nuk's screenie (from a couple of replies up).
Title: Re: fearelise.com - a constant work in progress :)
Post by: pearjam on April 01, 2011, 02:43:40 pm

@nukpana, @FredK - Just in case you guys are waiting, I'm almost done - but will be out of town over the weekend and won't be able to work on it - but you could check out what I've got so far - much improved!
Title: Re: fearelise.com - a constant work in progress :)
Post by: nukpana on April 01, 2011, 04:31:21 pm
lol ok a quick run down... (comments based on FF 3.6 on ubuntu 9.10)
1. Sidebar block headers seem off is this intentional, if not just align it back -  see below:
__Recent
text
text

__Tag
text text text

2. Search magnifying glass should be white or better contrast.

3. Not sure what is going on here:
The full article heading/body img needs to be reduced in left margin
(http://img808.imageshack.us/img808/2535/screenshotto.png)
Title: Re: fearelise.com - a constant work in progress :)
Post by: pearjam on April 06, 2011, 04:35:36 pm

1 and 3 are related. Titles (both main and sidebar) are indented, it's purposeful in separating content / titles. (Content is flush, titles are indented.) The container for the article image is flush with the content (as it's content and not a title). The article image is justified to the right (but padded evenly to the right), to line up with article lists which gives me more thumb flexibility while maintaining the aspect ratio.

2 - The search icon isn't supposed to stand out. Only the theme's content area is supposed to stand out with stark contrasts - everything outside the content area is 'dimmed' a little to draw focus to the content.

I added some content to the footer, but it's still lacking (having a hard time thinking of what else to put there).. I am using your (nukpana) version of the "Total article and Total comments" mod, but took out the extra php instances so it's all one function and echos the output on one line. It's working well, but I'm not sure that's exactly what I want in the footer anyway - just something to put there for now.

I looked at the 'popular articles mod', but it's only counting the current category (and not it's subcategory) - so not all articles are included, let alone weighted. I would have to mess with the mod to get it to look at all articles, and would have a hard time figuring out a weighted system. (Older popular articles would have more visits than current popular articles due to their age.). However, 'popular articles' is more along the lines of what I'd rather have in the footer.

So I'm still looking around for inspiration on the footer... lol  Other than that, it's done aside from a little fine tuning. If there's anything else I'll gladly take a look at it!