Simple Machines Community Forum

Customizing SMF => Graphics and Templates => Theme Site Themes => Topic started by: ARG01 on March 10, 2013, 04:37:02 PM

Title: Criterion
Post by: ARG01 on March 10, 2013, 04:37:02 PM
Link to the theme (https://custom.simplemachines.org/index.php?theme=2699)
(https://custom.simplemachines.org/index.php?action=download;theme=2699;attach=217605;image;thumb)

Nothing special. Just  a light, basic design using mild tones. Tested in Firefox, Internet Explorer and Chrome. Also tested and functions well with Simple Portal and Tiny Portal.

NOTE: Not currently recommended for RTL languages

Updated: Repaired navigation issues when using a massive amount of links. Changed the width of the logo container to accommodate smaller screen resolutions.  Download the 2.0.4 for the latest version.
Title: Re: Criterion
Post by: Crip on March 10, 2013, 05:10:06 PM
Very nice Theme ARG. and a nice layout.. ;D
Title: Re: Criterion
Post by: Mick. on March 10, 2013, 05:17:35 PM
Agreed. Very nice.
Title: Re: Criterion
Post by: busterone on March 10, 2013, 05:24:29 PM
Nice and clean. I like it. I usually prefer the dark or darker themes, but this one I do like. Good work. 
Title: Re: Criterion
Post by: ARG01 on March 10, 2013, 05:26:22 PM
Thanks guys.

Quote from: busterone on March 10, 2013, 05:24:29 PM
Nice and clean. I like it. I usually prefer the dark or darker themes, but this one I do like. Good work. 

I have two very dark, gaming format themes almost complete that will be available as premium themes once my new site is ready.  ;)
Title: Re: Criterion
Post by: busterone on March 10, 2013, 05:39:18 PM
Looking forward to seeing them.  :)
Title: Re: Criterion
Post by: ARG01 on March 10, 2013, 05:49:45 PM
One of them is here (http://www.simplemachines.org/community/index.php?topic=497212.0). Still needs a lot of adjustments.  ;)
Title: Re: Criterion
Post by: Antechinus on March 10, 2013, 06:03:00 PM
Rather nice. Has a very calm and smooth feel to it. :0

^ Talking about the theme in the OP.
Title: Re: Criterion
Post by: lord alibaski on March 10, 2013, 09:10:11 PM
Wish there was more lighter easier on the eye themes like this very nice ARG....plain and simple.
Title: Re: Criterion
Post by: Neekiinh0 on March 11, 2013, 08:34:14 PM
Mucha calidad ! buen trabajo !
Title: Re: Criterion
Post by: shadow82x on March 12, 2013, 12:43:48 AM
Wow excellent theme, I'm impressed. :) Nice color blend.
Title: Re: Criterion
Post by: ARG01 on March 12, 2013, 01:07:30 AM
Thanks guys/gals. Wow, 50 downloads and not one support request yet. I guess that I did something right.  ;D
Title: Re: Criterion
Post by: Arantor on March 12, 2013, 01:09:44 AM
Help this doesn't work on my 1.1.8 forum i installed it and it broke my forum help how do i get back in





Just kidding. It's really nice work ;D
Title: Re: Criterion
Post by: ARG01 on March 12, 2013, 01:11:33 AM
Quote from: Arantor on March 12, 2013, 01:09:44 AM
Help this doesn't work on my 1.1.8 forum i installed it and it broke my forum help how do i get back in





Just kidding. It's really nice work ;D

QuoteWarning! This product was designed for use with SimpleMachine version 2.0.4.

;D
Title: Re: Criterion
Post by: jafonseca on March 12, 2013, 03:03:39 PM
It looks fine ! but when you have many options in the panel control ... :(
Title: Re: Criterion
Post by: ARG01 on March 12, 2013, 03:30:42 PM
Quote from: jafonseca on March 12, 2013, 03:03:39 PM
It looks fine ! but when you have many options in the panel control ... :(

That's not a theme error. That's a result from too many items in the nav menu. You should consider using sub-menus for related items.
Title: Re: Criterion
Post by: Antechinus on March 12, 2013, 05:18:08 PM
Well, you could make the header height expand to fit content. I agree his menu is a pig's breakfast, but incorporating a non-breaking header should be easy enough, and might prevent some support grumbles.
Title: Re: Criterion
Post by: Mick. on March 12, 2013, 05:40:52 PM
Whoa! Thats a link farm! lol  Im a big fan of sub-menus. Because the space is there, does not mean one have to use it all. lol
Title: Re: Criterion
Post by: ARG01 on March 13, 2013, 12:30:41 AM
Quote from: Antechinus on March 12, 2013, 05:18:08 PM
Well, you could make the header height expand to fit content. I agree his menu is a pig's breakfast, but incorporating a non-breaking header should be easy enough, and might prevent some support grumbles.

Non-breaking header or toolbar?  Something like using a display inline or nowrap?


Title: Re: Criterion
Post by: Antechinus on March 13, 2013, 01:57:57 AM
Well it looks like you have a fixed height on the header, so when the menu wraps to a new line things get pushed out of shape. If you just used a min-height instead, it could expand to take up whatever height it needed. That way it's not your problem if someone wants to have 574,392 links in the menu. :D
Title: Re: Criterion
Post by: ARG01 on March 13, 2013, 02:14:31 AM
I guess you're right. Since there is no header background image that would help but, in jafonseca's image the header seems fine. It looks like it's the "user" area that seems to be having the issues.
Title: Re: Criterion
Post by: Antechinus on March 13, 2013, 07:31:44 PM
Yeah but that's wrapped in the header, so if the header has a fixed height........ :)

A floated element inside a non-floated element will overflow like that if the non-floated element is not tall enough.

Other thing that might sort it is clearing the float on the user area. Easiest way to do that would be to use a pseudo clearfix.

#userarea:after {content: ""; display: block; clear: both;}

Or you could just put the pseudo on the header itself. Either should work.

ETA: Meh. Might as well give you the full story. I didn't even look at the way you've coded it, so TBH I didn't think much, so that means I didn't suggest clearing floats earlier.

My guess (still haven't looked at the code :P) is that due to the way it's breaking your user area is floated. IF it is, you just need to clear the float. Pseudo clearfix is awesome for this, as long as you can get away wth the clear: both; (doesn't always work with other stuff, but should be fine here).

Other old school but still useful way of clearing floats is to use auto overflow on the parent element (header, in this case) but that has drawbacks if one of the child elements (like teh menu hey) has drop menus in it.

If the droppy content is tall enough, it'll get hidden by the parent's auto overflow and the parent will get a vertical scrollbar. This tends to make people grumpy. :D

Auto overflow is still really useful though, as long as you don't have to worry about it hiding things like drop menus. It will do a bulletproff job of clearing floats, and as long as the element can expand to hold its content it wont show a scrollbar.

There ya go. Sneaky css trix FTW. :)
Title: Re: Criterion
Post by: ARG01 on March 14, 2013, 11:47:53 AM
Wouldn't a basic "height: auto;" like I used in the footer area work? Maybe accompany it with a "min-height:"?
Title: Re: Criterion
Post by: Antechinus on March 14, 2013, 03:46:54 PM
You don't need auto height. Auto is default behaviour anyway. It's a bit like specifying border-radius: 0;

If your userarea is floated, it will need to have a clearfix if the user area is what is going to push the header to whatever height. Otherwise it wont do the pushing and will just overflow. Try it. :)
Title: Re: Criterion
Post by: Antechinus on March 14, 2013, 04:52:17 PM
Oh while I thnk of it, there's another way you could tackle it. Float the header. If you do that, it will automatically wrap any floated content.

I assume it's inside a wrapper div that controls the overall theme width. In that case, adding float: left; width: 100%; to the header declaration will do the trick. The only detail you have to watch with that is that you can't use left or right padding on the header itself, unless you also declare box-sizing: border-box;

Box-sizing is supported back to IE8 anyway, so it's safe to use unless you're into zombie browsers, but you can usually get away without padding on the parent and just use margins on the child elements anyway.

Basically, this is easy to fix and there are several possible ways you can tackle it. Just use whichever method works best for the elements in question.
Title: Re: Criterion
Post by: ARG01 on March 14, 2013, 05:00:06 PM
Thanks for the advise. Yes, the header, logo and userarea are all in the same wrapper. I will toy with it when I get to my comp. I guess the best way to tackle it would be to set up a test site and add a whole crap load of links to the menu.   ;D
Title: Re: Criterion
Post by: Antechinus on March 14, 2013, 05:02:57 PM
Or you can just add insane side padding to each menu link, if you dont want to mess with the Subs array.
Title: Re: Criterion
Post by: ARG01 on March 14, 2013, 05:11:52 PM
That will work too.
Title: Re: Criterion
Post by: ARG01 on March 15, 2013, 12:32:19 AM
Okay jafonseca, open index.css and find

#toolbar {
background: url(../images/toolbar.png) repeat-x; border-radius: 4px 4px 0 0;
height: 42px;
}


change to:
#toolbar {
background: #fff url(../images/toolbar.png) repeat-x; border-radius: 4px 4px 0 0;
height: 90px;
}



then find:
#header {
background: #fff; border-radius: 0 0 5px 5px;
height: 140px;
}


change to:
#header {
background: #fff; border-radius: 0 0 5px 5px;
height: 140px;
display: block;
        clear: both;
}


But again, if you desire a multitude of menu items, you should really consider using sub-menus.  ;)
Title: Re: Criterion
Post by: meetdilip on March 16, 2013, 01:58:22 PM
Good one ARG.
Title: Re: Criterion
Post by: jafonseca on March 17, 2013, 04:26:21 PM
Thanks a lot for all but i think i have many problems with my web i supposed
Title: Re: Criterion
Post by: ARG01 on March 17, 2013, 04:29:46 PM
Looks like your titles are too long. That can be fixed by expanding the width of the dropdown menu.

#topnav li li {
    height: auto;
    padding: 0;
    width: 200px;
}
Title: Re: Criterion
Post by: jafonseca on March 17, 2013, 05:08:14 PM
Quote from: ARG on March 17, 2013, 04:29:46 PM
Looks like your titles are too long. That can be fixed by expanding the width of the dropdown menu.

#topnav li li {
    height: auto;
    padding: 0;
    width: 200px;
}


Is a code to add to index.css file?
Title: Re: Criterion
Post by: ARG01 on March 17, 2013, 10:08:25 PM
Quote from: jafonseca on March 17, 2013, 05:08:14 PM
Quote from: ARG on March 17, 2013, 04:29:46 PM
Looks like your titles are too long. That can be fixed by expanding the width of the dropdown menu.

#topnav li li {
    height: auto;
    padding: 0;
    width: 200px;
}


Is a code to add to index.css file?

Although you are probably the only one with an ungodly amount of nav links, I am going to rewrite the entire nav/header code just for you. Stay tuned.  ;)
Title: Re: Criterion
Post by: Costa on March 21, 2013, 09:11:07 PM
Cool theme ARG. Very nice.
Title: Re: Criterion
Post by: TheListener on April 05, 2013, 07:22:07 PM
Love the theme ARG

But so I can correct a few button colours and would you please let me know where I can find the font colours.

Not all the headings show as white text.  ???

Also I ause the nice tooltips mod on the forum. Could you please let me know the hex colours needed so the mod doesn't look outta place please.

Have added the mods attachments so ya have an idea of what I am babbling on about.

The Mod: http://custom.simplemachines.org/mods/index.php?mod=2115
Title: Re: Criterion
Post by: meetdilip on April 14, 2013, 10:08:10 AM
Good one ARG.
Title: Re: Criterion
Post by: ARG01 on April 14, 2013, 10:26:04 AM
Thanks meetdilip.  ;)




Just to clear things up, I was not slacking in my support duties for this theme. Old Fossil's issues have been solved elsewhere.  ;)
Title: Re: Criterion
Post by: firefly8568 on April 18, 2013, 05:15:26 AM
great theme.. love the color blending. very pleasing to the eyes..

im currently customizing the theme; can you please assists me in making the logo place a little bit wide?

and transfer the menu right below the logo..

and remove the date and search area..

im trying to delete this but im receiving template parse error..

<div id="header">
         <a href="'.$scripturl.'" id="logo" title=""></a>
         <div id="user">';

   // If the user is logged in, display stuff like their name, new messages, etc.
   if ($context['user']['is_logged'])
   {
      if (!empty($context['user']['avatar']))
      echo '
         ', $context['user']['avatar']['image'];
      echo '
            <ul class="reset">
               <li class="greeting">', $txt['hello_member_ndt'], ' <span>', $context['user']['name'], '</span></li>
               <li><a href="', $scripturl, '?action=unread">', $txt['unread_since_visit'], '</a></li>
               <li><a href="', $scripturl, '?action=unreadreplies">', $txt['show_unread_replies'], '</a></li>';

      echo '
            </ul>';
   }
      // Otherwise they're a guest - this time ask them to either register or login - lazy bums...
   else if (1 == 2)
   {
      echo '
            <script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/sha1.js"></script>
            <form id="guest_form" action="', $scripturl, '?action=login2" method="post" accept-charset="', $context['character_set'], '" ', empty($context['disable_login_hashing']) ? ' onsubmit="hashLoginPassword(this, \'' . $context['session_id'] . '\');"' : '', '>
               <div class="info">', sprintf($txt['welcome_guest'], $txt['guest_title']), '</div>
               <input type="text" name="user" size="17" class="input_text" />
               <input type="password" name="passwrd" size="17" class="input_password" />
               <input type="submit" value="', $txt['login'], '" class="button_submit" />';

      if (!empty($modSettings['enableOpenID']))
         echo '
               <br /><input type="text" name="openid_identifier" id="openid_url" size="25" class="input_text openid_login" />';

         echo '
               <input type="hidden" name="hash_passwrd" value="" />
            </form>';
      }

   echo '
         </div>
      </div>
      <div id="main_body">
         <div id="search_block">
            <form id="search_form" action="', $scripturl, '?action=search2" method="post" accept-charset="', $context['character_set'], '">
               <input class="inputbox" type="text" name="search" value="', $txt['forum_search'], '" onfocus="this.value = \'\';" onblur="if(this.value==\'\') this.value=\'', $txt['forum_search'], '\';" />
               <input type="hidden" name="advanced" value="0" />';

      // Search within current topic?
      if (!empty($context['current_topic']))
         echo '
               <input type="hidden" name="topic" value="', $context['current_topic'], '" />';

      // If we're on a certain board, limit it to this board ;).
      elseif (!empty($context['current_board']))
         echo '
               <input type="hidden" name="brd[', $context['current_board'], ']" value="', $context['current_board'], '" />';

         echo '
            </form>
            <ul class="reset">
               <li id="time">', $context['current_time'],'</li>';

      // Is the forum in maintenance mode?
      if ($context['in_maintenance'] && $context['user']['is_admin'])
         echo '
               <li><strong>', $txt['maintenance'], '</strong></li>';

      // Are there any members waiting for approval?
      if (!empty($context['unapproved_members']))
         echo '
               <li><a href="', $scripturl, '?action=admin;area=viewmembers;sa=browse;type=approve">(', $context['unapproved_members'] , ' ', $txt['approval_member'], ')</a></li>';

      if (!empty($context['open_mod_reports']) && $context['show_open_reports'])
         echo '
               <li><a href="', $scripturl, '?action=moderate;area=reports">(', $context['open_mod_reports'], ' ', $txt['open_reports'], ')</a></li>';

         echo '
            </ul>
         </div>';

thank you