Proposal for a New Theme

By Josh Lewis on Tuesday, 25 February 2014

Posted in General Issues

Likes 0

Votes 0

See better theme proposal here: http://stackideas.com/forums/proposal-for-a-new-theme#reply-130624

ES 1.2 has a new theme called "Frosty" which had some good styling tactics such as the stream icons. I noticed however that the profile image seemed rather small. This isn't uncommon but it does remove a little bit of the personal feel to it. So I decided to play around with FireBug and see what results I could make with making the image bigger (I used wireframe). As I worked, I figured why not simply the design to something more eye catching? After a while of playing around and adjusting things I came up with this result:

The cover right now takes up lots of space (which is fine), so I figured why not take advantage of some of that space? Seeing the user image in this size with the background creates a nice effect while not taking up too much space.

Rather than messing with the cover, it compliments it. Also the profile info items use only a single line which will make it feel more simple for the user.

I also designed a version that has the user items on the lower part of the cover as seen here:

Here is the Full sized version of the lower menu version. For fun I created another variation:

Because I saved a physical copy of the main example, I can make adjustments and tweaks if there is request for changes. Keep in mind that the code standards used in these examples is not the greatest because it's purely for showing rather than production. Also note that this is not a production template for ES because I had to make some changes to the DOM (document object model). Opinions? I know you folks are working on ES 1.2, this is for the future.

The main theme here is that the profile image have a chance to be bigger, the placement I provided allows for this.

Thanks for the heads up on this Josh. The reason why the profile picture is smaller is because we support a minimum width of around 650 - 700px. If you have such a large avatar, it could be problematic when working on smaller width component area.

Mark

Tuesday, 25 February 2014 13:20

0 Likes

0 Votes

0 Comments

#126630

That was something that came to mind. But if we use a combination of min-width/height and max-width/height it could be a very flexible design.

(min-width/height isn't required, but could be handy if percentages are considered) The image I displayed was 500px in width, but I could go for less. In fact with a CSS over ride I could adjust it to my own needs. The main problem is what the image source is (in this case it's a small pic) and how the document is constructed.

This would solve the big screen vs small screen issue.

Josh Lewis

Tuesday, 25 February 2014 16:23

0 Likes

0 Votes

0 Comments

#126656

Thanks for the heads up on this Josh

Mark

Tuesday, 25 February 2014 17:38

0 Likes

0 Votes

0 Comments

#126673

Hello Josh,
nice proposal i like the way you done it

i also have done some proposals for enhancement :

on member list page
http://stackideas.com/forums/member-list-page-enhancement-request
you can vote on voices for it : http://stackideas.com/voices/item/288

for a lighter stream
http://stackideas.com/forums/asking-for-a-clear-and-simple-stream

Loïc

loic

Wednesday, 26 February 2014 19:10

0 Likes

0 Votes

0 Comments

#126990

Loic,

Thanks for sharing! However, no offense but the stream screen shot that you just shared on your other post looks really bad and I will never ever allow our stream to look like that

It's a really bad idea to place such huge avatars on the stream

The purpose of having a stream is so that you can see "What's actually going on" . When you meant "simplifying" the stream I did thought that you were talking about stripping off some of the features and functionality

However, I do agree on the user listings area though. It looks really good (minus the 2 column layout) as we have tested this on 1.0 and 1.1, it's really not practical at all with Joomla sites

Mark

Wednesday, 26 February 2014 21:09

0 Likes

0 Votes

0 Comments

#127009

Mark wrote:However, no offense but the stream screen shot that you just shared on your other post looks really bad...

Are you talking about this screen shot?

With the gallery proposal changes of ES 1.3 that Mark is familiar with, this is indeed quite possible! The admin would have to change the small image size (assuming an option for this comes out) and then do some CSS over rides to allow for bigger display of the images. I made this for fun, keep it mind that it doesn't look pretty due to image stretch and lack of styling additions:

So while Mark may never want this to be built into the core, if my gallery proposals go through, this will open up a lot of possibilities with flexibility.

I'm not debating here what is better small vs big with images, I'm proposing methods in which the admin can choose. This is what I believe is the core of EasySocial, the ability to easily create a social network. Allowing the admin to choose image sizes will be a huge benefit! CSS changes can do the rest. This way we don't have to add unnecessary stuff in the core.

As for the template proposed in this thread, I have more work to do. I'll have to give you guys a heads up when it's more stable.

Josh Lewis

Thursday, 27 February 2014 07:17

0 Likes

0 Votes

0 Comments

#127092

Hello Josh,

This is the one that I was referring to, http://awesomescreenshot.com/0c325q2l6b . In my opinion, it doesn't really have any "social effects" to it

It's more like displaying a log rather than anything else. But of course if you tweak the theme files in EasySocial, you can achieve this too, but the question is why? If you have a car but don't want the engine, what good does your car do

Mark

Thursday, 27 February 2014 10:17

0 Likes

0 Votes

0 Comments

#127102

Mark, my link broke for whatever reason. My link was supposed to show the same example you linked to.

While I personally am not in favor of that style, I could see how some might want it that way. Notice in his example each post has more height than each avatar image? If they use ES to show mostly bigger posts (instead of things like "signed in") than it doesn't really "waste space" the method they are doing it. Except for a small amount of width. I think the point of doing that is to more clearly show who is posting rather than what they are doing. With ES 1.2 it shows the "what" on the right side as a icon. So either way "what" is being posted is not hidden.

But again, if admins can decide their image sizes, then some CSS over rides in the Joomla template can make this and many other things possible.

The great thing about this is that upgrades will not break it unless code structure changes. In those cases simply change the selector.

Josh Lewis

Thursday, 27 February 2014 14:18

0 Likes

0 Votes

0 Comments

#127155

Hello mark and Josh

i agree with the fact that the stream rendering is not so good
the reason i put here was not the big avatar image

but as josh said, it could be the admin choice to focus on members more that activity - and i my opinion, the activity title is quite big enough to also focus on content...
in my opinion ES now focus on Apps and usability

on the stream post you can see a lot of icon and links and... even for a forum or blog you have the title and ... posted in category... maybe it could be enough to have a big title, image and some words of content... and let the user decided if he want to see more
Lets take and example : in Josh stream example for the new badge post, what is important : josh, new badge and no more ok ? but your eyes are also catch by : date, linke, comment, repost... witch are in blue and by this are more eyes caching... journalist is displayed 2 times in text and one time by the icon...
All infos and option are important but it could be great to find an intelligent way to show/hide them

the reason i put this stream example here was to imagine something clearer (i mean with less text and others)
the best practise exemple is http://www.lense.fr/membres/order/active/
Only the main infos and the "on mouse over" effect for more... and then you can click if you are interested to see more

just to share and have comments of others
loïc

loic

Thursday, 27 February 2014 15:33

0 Likes

0 Votes

0 Comments

#127169

Mark mentioned the possibility of adding a character limit for ES 1.2. I know the stacked team is very busy right now which is why I've been letting that feature wait. Less text is planned.

In terms of text size and hiding things, this too can be done with CSS. Want it to appear on hover? CSS will solve that too.

While it's not a code language that makes features, it's still my favorite. I recommend knowing it to any web developer who plans on working a lot with making websites. Even if all the features they could ever want already exist.

Josh Lewis

Thursday, 27 February 2014 16:07

0 Likes

0 Votes

0 Comments

#127173

Thanks for the heads up guys

Mark

Thursday, 27 February 2014 16:20

0 Likes

0 Votes

0 Comments

#127178

I've been doing more template work and came up with a new design that works well on smaller screens.

The same amount of space is used as the current practices used in EasySocial. Cover images are certainly a great idea, however the avatar thumbnail by comparison to the size of the cover is quite significant. So I decided to make them match well side by side which shows the user quite well and the cover still is a good size while not wasting any space!

Another advantage to this method is that the 315px of left-margin makes the cover photo less cropped making it look better than the current style. The dark background by itself would have worked fine for making the white user info popout, but to make it work in more photo scenarios I applied a gradient transparent image over the info. This way even if the background is 100% white, the white text is easily readable. I came up with another variation:

Basically the only main difference is that the first screen shot uses space between the cover and image while the second screen shot uses a thicker box-shadow for separation.

Josh Lewis

Saturday, 15 March 2014 16:39

0 Likes

0 Votes

0 Comments

#130624

Nice one Josh!

It doesn't look like facebook, and the profile picture is big enough. Kinda unique....

I like the second one better. You should try to fade the profile picture into the cover picture, that way it will look like a transition.

I will try to achieve something like this after I upgrade to 1.2

Did you have any issues with making the profile picture bigger?

checksum

Saturday, 15 March 2014 23:52

0 Likes

0 Votes

0 Comments

#130649

Perhaps you guys should come up with a theme and share this with everyone?

Mark

Saturday, 15 March 2014 23:58

0 Likes

0 Votes

0 Comments

#130652

Thanks Checksum.

checksum wrote:

It doesn't look like facebook, and the profile picture is big enough. Kinda unique....

Exactly! This is what I was after. Had to meticulously play around with it to give the desired effect while maximizing the use of space.

checksum wrote:

I like the second one better. You should try to fade the profile picture into the cover picture, that way it will look like a transition.

So I'm guessing this one is not quite transitioned? Would you recommend a gradient image for the transition?

checksum wrote:

Did you have any issues with making the profile picture bigger?

I actually had to "hack the design" by taking the source code and place it into my own .html file. The reason being that the profile picture would have been stretched considering that it's 180px by 180px. I needed the image to be 315px by 315px. So what we would need in the future is for the theme to have an option that allowed the admin to decide whether to access the thumbnail or the bigger image.

Mark wrote:

Perhaps you guys should come up with a theme and share this with everyone?

I actually coded this, but keep in mind that the method is "dirty" considering that it uses tons of over rides and negative margins.

As for creating a theme, that's not a bad idea considering that I have the know how. Perhaps Checksum could help me out with the transition. So where do you recommend I start? Copying the theme files from "wireframe" and renaming files so that it is "it's own theme"? Or is there a better way? With the styling aspect I should know what I'm doing.

Josh Lewis

Sunday, 16 March 2014 03:29

0 Likes

0 Votes

0 Comments

#130678

Hi Josh,

I was referring to fading the picture toward the end (where the profile picture meets the cover picture), if am not even sure if that is even possible using css, here is an example : http://www.wikihow.com/images/6/6d/Fade-One-Image-Onto-Another-in-Photoshop-Step-4.jpg. I wanted to see how it would come out.

As far as creating a template, I am not sure how you would create it for distribution. Have you look at the developer's guide?

Another option is to distribute the override files in /TEMPLATE/html/easysocial. I am guessing you used template overrides to modify the original template. That should work for everyone if they just upload the override files.

checksum

Wednesday, 19 March 2014 00:39

0 Likes

0 Votes

0 Comments

#131057