[WIP/Experiment] FlatLine

[TwitchisMental]

As we all know one of the big web design trends is flat design, so I decided to do a bit of experimenting with it.

I give to you FlatLine


Flat Line is a nice simple and "flat" SMF theme. As of right now it is just a blue color base,but I will be doing more colors. This theme is based on the flat web design concept/trend that is currently very popular.


Planned Features So Far -


1. SuperFish Jquery Menu

2. Theme Color Switcher

3. Integrated Go To Top Button with jquery slide effect.

4. 5 Color Variations.

5. Fluid Width

ScreenShots are attached along with the open beta package.

[ARG01]

Looks nice. I would however suggest adjusting the menu and logo positions to align better with the content area. 

[TwitchisMental]

Looks nice. I would however suggest adjusting the menu and logo positions to align better with the content area. 

You mean more like this -

[ARG01]

Close. I would have them a bit more to the right. In your image, picture the left of the logo and Home tab aligning with the left of Category 1. 

[bloc]

This is a nice concept. But I would remove that grey thin line over the linktree + make the forum logo/title white instead, its a little too dark text there now IMHO. And like ARG suggests, some adjustment on alignment would not hurt it.

On/off images are great, likewise the choice of font, the catbg/titlebg colors and the slight bluish grey outside.

[TwitchisMental]

Close. I would have them a bit more to the right. In your image, picture the left of the logo and Home tab aligning with the left of Category 1. 

Oh you mean make it symmetrical with everything else?

@Bloc I do plan on doing this, this was basically a quick mockup of what I had in my head. I wanted to get peoples opinions on it before going all out. Thank you for your other comments on the font,catbg, and titlebg colors. I was trying to find a comparable font to the futura-pt font so I choose this one - http://www.google.com/fonts/specimen/Questrial


Edit : newest -

[Mick.]

Now that's sweet looking!

[TwitchisMental]

Now that's sweet looking!

Thank you, I am taking any suggestion you may have .

[4Kstore]

Very nice, congratulation!

[Colin]

Very slick!

[AllanD]

Looks great NBK, keep up the great work.

[Ricky.]

I guess Mick. has already attempted something similar with his responsive smf theme. .. isnt ?

[Matthew K.]

It is pretty nice...it actually may have inspired me enough to design my first public theme for SMF 2.1. I think I could have quite a bit of fun with it. We'll see.....never the less, it's looking good.

[TwitchisMental]

Thank you all for the comments, I am still taking suggestions .


I have updated the first post with the latest version .

[Mick.]

I guess Mick. has already attempted something similar with his responsive smf theme. .. isnt ?

i have several flats. But what I like about  this one is the fact that is wide just like the norm default width. My themes are set to 990px. Now, my current deal is implementing twitter bootstrap.

[Crip]

Looks good *Twitch!

[TwitchisMental]

Thanks crip, I have implemented the superfish menu and currently tweaking the footer.

[TwitchisMental]

Latest version, I am not sure where to put the theme selector at this moment, so if anyone has a better position I am all ears haha.

[Burke ♞ Knight]

In this case, wouldn't it be "all eyes"?

[TwitchisMental]

In this case, wouldn't it be "all eyes"?

In this case, yes it should be. However as you can see, I have a tendency to type as though I am talking to someone directly. It is a flaw of mine haha .

[TwitchisMental]

First post updated with the latest version of both blue and red.

[iMiKK]

this theme is really cool. 

[TwitchisMental]

this theme is really cool. 

Thank you, first post updated with green variant.

[busterone]

I like what I see so far.  Is this going to be a free or premium theme and is there an estimate on when it might be final? No rush is intended, I am just curious and would love to try it out when it is available.

[TwitchisMental]

I like what I see so far.  Is this going to be a free or premium theme and is there an estimate on when it might be final? No rush is intended, I am just curious and would love to try it out when it is available.

Like all of my public themes, it will be 100% free and open source. I release all of my public themes under the MIT/X11 license.


I do all of my web designs in my free time for fun, so I cannot give a release date.


I can always whip up an open beta package for anyone who wants to try it now and give their input.

[busterone]

That would be great. I will certainly try it out myself. 

[TwitchisMental]

That would be great. I will certainly try it out myself. 

Beta Attached to first post

[busterone]

Thanks. I will get it installed sometime tonight. 

[TwitchisMental]

Thanks. I will get it installed sometime tonight. 

Don't forget to report any bugs you find .

[TwitchisMental]

Sorry for the double post,but I am wondering what other colors I should do.


As of now I have red,blue,green, and working on purple. I was thinking about adding orange and maybe like an off green.

[busterone]

Maybe black with light text.  I have a lot of dark theme lovers in my forum.

[busterone]

I have found no bugs in the areas that normal users have access to.  I have several members using it and if they find any they will screenshot it and report it to me. I added 3 screenshots from the admin area for a few minor glitches I did find.
The menu item text color in the first image is white and virtually invisible.  In the second image, if I hover the mouse over an item, it then displays correctly, except at the bottom of the drop down. Notice some of the items in the drop down are not there. However, in the 3rd image, if I hover over the invisible items, they then display correctly.
Overall, I am pleased with it as it already is.

[TwitchisMental]

Ahh yes the admin menu, I did forget to adjust those.. Thank you for the report.

[busterone]

I missed this little bug, but it is a simple one. 
for every forum action this error is produced.

Undefined index: gototop
File: /xxxxxxxxxx/Themes/flatline/index.template.php
Line: 330

I temporarily fixed it on my forum by adding this to /Themes/default/languages/index.english.php
$txt['gototop'] = 'Go To Top';

[Biology Forums]

Pretty neat... I like it.

[TwitchisMental]

I missed this little bug, but it is a simple one. 
for every forum action this error is produced.

Undefined index: gototop
File: /xxxxxxxxxx/Themes/flatline/index.template.php
Line: 330

I temporarily fixed it on my forum by adding this to /Themes/default/languages/index.english.php
$txt['gototop'] = 'Go To Top';

Yes I have yet to add any custom language files yet, this will be fixed.

[TwitchisMental]

Just to let everyone know I am still working on this, I have just been busy. I have about 5 color variations now.

[busterone]

cool. thanks for the update.

[Bigguy]

Move it down to the menu bar or just below. I think that would be more convenient. Very nice lookin theme.

[TwitchisMental]

Move it down to the menu bar or just below. I think that would be more convenient. Very nice lookin theme.

I assume you are talking about the color switcher?

[Bigguy]

Yeah

[TwitchisMental]

This theme is back under full development .


First post has latest beta, please report any bugs.


Known Issue : I still need to add the custom language files.

[busterone]

Thanks

[TwitchisMental]

First post updated with latest beta and newest screenshots.

[TwitchisMental]

I have updated the first post with the current features, new screenshots, and the latest beta.

[digitalruse]

Is there a way to select a default color and disable the switcher?

[#jsDotx3]

very simple, you can add to catbg, box-shadow: 0px 3px 0px #colorhtml;

Why?, because this is used for design "flat", testing and comment

[roomeat]

Looks great.
Have noticed that when hovering over "New Topic" or "New Poll" the text is very light and hard to read.

[okami91]

testing this theme out. looks great. The only issue I have is with the logo on different size screens. A nice feature to add is to make the theme responsive. I would like to have the same size logo appear correctly on different screen sizes.

[okami91]

Does this theme have a display template? I am trying to use a mod but to edit it you need a display template which I do not see.

[iqbalresources]

Hi

I  attracted to this theme, and intend to use it for my web forum. While i'm editing it (to make it match forum environment) in my localhost, and almost finish it. somehow  suddenly the color simply change from red to the blue. i thought maybe i'm wrong-place the file into folder, but when i check back index red css file, there's no replace all the hex color code in these files. Strange. so i uninstall back the theme whilst save the copy of index red css so i  can use it later. but the theme still don't change, still blue, even tho index red css had been modified. what shall i do? tq

[TwitchisMental]

Hi

I  attracted to this theme, and intend to use it for my web forum. While i'm editing it (to make it match forum environment) in my localhost, and almost finish it. somehow  suddenly the color simply change from red to the blue. i thought maybe i'm wrong-place the file into folder, but when i check back index red css file, there's no replace all the hex color code in these files. Strange. so i uninstall back the theme whilst save the copy of index red css so i  can use it later. but the theme still don't change, still blue, even tho index red css had been modified. what shall i do? tq

Hello iqbalresources.

This is a really old thread from when this theme was being worked on.

If you need support for this theme you will need to post in the proper support thread/topic.

FlatLine for SMF 2.1 Support - https://www.simplemachines.org/community/index.php?topic=578902.0