Simple Machines Community Forum

Customizing SMF => Graphics and Templates => Theme Site Themes => Topic started by: Marcus Forsberg on November 09, 2009, 05:06:55 PM

Title: Square
Post by: Marcus Forsberg on November 09, 2009, 05:06:55 PM
Link to the theme (http://custom.simplemachines.org/themes/index.php?lemma=1995)
(http://custom.simplemachines.org/themes/index.php/action,download/lemma,1995/image,thumb)

A simple brown, light, theme based on Curve.
There are no template edits in this theme, except my copyright in the footer, so all mods should install to this theme without errors (Just remember to select "Square" in the Package Manager when you install a mod).
This theme shows how easy it is to customize Curve. I spent around 2 hours on this and I only had to touch index.css and images (And of course add a few new images) to get a brand new look.
Enjoy!
Title: Re: Square
Post by: Fussilet on November 09, 2009, 07:05:52 PM
nice theme
Title: Re: Square
Post by: by designer on November 10, 2009, 05:44:32 AM
Yes. Nice.
Title: Re: Square
Post by: Crip on November 10, 2009, 08:01:56 AM
Very nice Nas. :)
Title: Re: Square
Post by: Marcus Forsberg on November 10, 2009, 08:32:21 AM
Thanks guys. :)
Title: Re: Square
Post by: RML on November 11, 2009, 05:16:09 AM
Really nice, I like it. But I have a question. How can I remove the submenu? Thanks.
Title: Re: Square
Post by: Marcus Forsberg on November 11, 2009, 08:32:19 AM
Sub menu?
Do you mean the drop downs or the linktree?
Title: Re: Square
Post by: RML on November 11, 2009, 12:47:14 PM
Oops, yes, I was talking about the drop downs, just couldn't find the right word.  :)
Title: Re: Square
Post by: Marcus Forsberg on November 12, 2009, 03:36:21 AM
Quote from: RML on November 11, 2009, 12:47:14 PM
Oops, yes, I was talking about the drop downs, just couldn't find the right word.  :)

I guess you could just remove that part from index.css.
Title: Re: Square
Post by: RML on November 12, 2009, 11:52:09 AM
If I remove the "Styles for the standard dropdown menus" part from index.css the links look like this:  :-[

(http://i35.tinypic.com/2ynh24z.jpg)
Title: Re: Square
Post by: Nadrealista on November 12, 2009, 03:07:06 PM
Well you should not remove that.   ;)

Try to upload index.css again, It should work fine than.
Title: Re: Square
Post by: drhamza on November 13, 2009, 02:42:30 AM
beside the "hello nas", the avatar appears, which will disturb the background, a good solution is not allowing the avatar to appear there... and because i have simple portal
Quote
    * Powered by SMF 2.0 RC2 | SMF © 2006–2009, Simple Machines LLC
      SimplePortal 2.3.1 © 2008-2009, SimplePortal
    * Square design by Nas
so the background in the bottom becomes disturbed too

btw, very nice and calm theme, i like it :D
Title: Re: Square
Post by: RML on November 13, 2009, 07:03:55 AM
Quote from: Haяy on November 12, 2009, 03:07:06 PM
Well you should not remove that.   ;)

Try to upload index.css again, It should work fine than.

I just was playing with it on my computer, I don't use 2.0RC2 on my live site yet. :) But I still would like to know how to remove those drop downs. Can someone help with it?
Title: Re: Square
Post by: 72 454 on November 17, 2009, 05:48:52 PM
Quote from: drhamza on November 13, 2009, 02:42:30 AM
beside the "hello nas", the avatar appears, which will disturb the background, a good solution is not allowing the avatar to appear there... and because i have simple portal

btw, very nice and calm theme, i like it :D

If you're using Simple Portal and their User info box you won't need the SMF header. There are a couple topics on here that show you how to remove that information.
You can see the results at my test site www.stingraylounge.com (http://www.stingraylounge.com)
If you can't find the info on here let me know and I'll send it to you.
Title: Re: Square
Post by: drhamza on November 18, 2009, 01:29:33 PM
i couldn't find any topic talking about that, help! 0_0 and thanks :D
Title: Re: Square
Post by: 72 454 on November 18, 2009, 03:41:25 PM
I don't take credit for this, but here's the change:

Template file index.template.php

Find:

// the upshrink image, right-floated
   echo '
         <img id="upshrink" src="', $settings['images_url'], '/upshrink.png" alt="*" title="', $txt['upshrink_description'], '" style="display: none;" />';
   echo '
         ', empty($settings['site_slogan']) ? '<img id="smflogo" src="' . $settings['images_url'] . '/smflogo.png" alt="Simple Machines Forum" title="Simple Machines Forum" />' : '<div id="siteslogan" class="align_right">' . $settings['site_slogan'] . '</div>', '
      </div>
      <div id="upper_section" class="middletext"', empty($options['collapse_header']) ? '' : ' style="display: none;"', '>
         <div class="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 '
            <p class="avatar">', $context['user']['avatar']['image'], '</p>';
         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>';

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

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

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

         echo '
               <li>', $context['current_time'], '</li>
            </ul>';
      }
      // Otherwise they're a guest - this time ask them to either register or login - lazy bums...
      elseif (!empty($context['show_login_bar']))
      {
         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">', $txt['login_or_register'], '</div>
               <input type="text" name="user" size="10" class="input_text" />
               <input type="password" name="passwrd" size="10" class="input_password" />
               <select name="cookielength">
                  <option value="60">', $txt['one_hour'], '</option>
                  <option value="1440">', $txt['one_day'], '</option>
                  <option value="10080">', $txt['one_week'], '</option>
                  <option value="43200">', $txt['one_month'], '</option>
                  <option value="-1" selected="selected">', $txt['forever'], '</option>
               </select>
               <input type="submit" value="', $txt['login'], '" class="button_submit" /><br />
               <div class="info">', $txt['quick_login_dec'], '</div>';

         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 class="news normaltext">
            <form id="search_form" style="margin: 0;" action="', $scripturl, '?action=search2" method="post" accept-charset="', $context['character_set'], '">
               <input type="text" name="search" value="" class="input_text" />&nbsp;
               <input type="submit" name="submit" value="', $txt['search'], '" class="button_submit" />
               <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>';

      // Show a random news item? (or you could pick one from news_lines...)
      if (!empty($settings['enable_news']))
         echo '
            <h2>', $txt['news'], ': </h2>
            <p>', $context['random_news_line'], '</p>';

      echo '
         </div>
      </div>
      <br class="clear" />';

   // Define the upper_section toggle in JavaScript.
   echo '
      <script type="text/javascript"><!-- // --><![CDATA[
         var oMainHeaderToggle = new smc_Toggle({
            bToggleEnabled: true,
            bCurrentlyCollapsed: ', empty($options['collapse_header']) ? 'false' : 'true', ',
            aSwappableContainers: [
               \'upper_section\'
            ],
            aSwapImages: [
               {
                  sId: \'upshrink\',
                  srcExpanded: smf_images_url + \'/upshrink.png\',
                  altExpanded: ', JavaScriptEscape($txt['upshrink_description']), ',
                  srcCollapsed: smf_images_url + \'/upshrink2.png\',
                  altCollapsed: ', JavaScriptEscape($txt['upshrink_description']), '
               }
            ],
            oThemeOptions: {
               bUseThemeSettings: ', $context['user']['is_guest'] ? 'false' : 'true', ',
               sOptionName: \'collapse_header\',
               sSessionVar: ', JavaScriptEscape($context['session_var']), ',
               sSessionId: ', JavaScriptEscape($context['session_id']), '
            },
            oCookieOptions: {
               bUseCookie: ', $context['user']['is_guest'] ? 'true' : 'false', ',
               sCookieName: \'upshrink\'
            }
         });
      // ]]></script>';


Replace with:


   echo '
         ', empty($settings['site_slogan']) ? '<img id="smflogo" src="' . $settings['images_url'] . '/smflogo.png" alt="Simple Machines Forum" title="Simple Machines Forum" />' : '<div id="siteslogan" class="align_right">' . $settings['site_slogan'] . '</div>', '
      </div>';

      echo '
      <br class="clear" />';

Title: Re: Square
Post by: drhamza on November 18, 2009, 11:47:46 PM
thanks a lot man, last question: if i edited that for the default (curve) will it be edited in all the other themes (or at least for square?)
Title: Re: Square
Post by: 72 454 on November 19, 2009, 07:52:57 AM
Quote from: drhamza on November 18, 2009, 11:47:46 PM
thanks a lot man, last question: if i edited that for the default (curve) will it be edited in all the other themes (or at least for square?)

No, you'll need to do this to all your Curve based themes.
Title: Re: Square
Post by: chep on November 21, 2009, 06:55:32 PM
The theme looks good. The only complaint I have is that the drop down menus - when you hover over an item in the menu it is not clear which item my mouse is over.
Title: Re: Square
Post by: Kimmen on December 04, 2009, 11:13:27 AM
I run SMF2 RC2

I want to customize this theme on my site, and to do that, i would need to change the picture of the forumbars without affecting the adminpanels bars and login bar. I have tried to change the picture and it works, but it also affects the mentioned areas. How can i change ONLY the forumbars?

I look into this code:
h4.catbg span.left, h4.catbg2 span.left, h3.catbg span.left, h3.catbg2 span.left, .table_list tbody.header td span.left
{
   float: left;
   display: block;
   width: 9px;
   height: 31px;
   background: url(../images/theme/main_block.png) no-repeat 0 -160px;
}

h4.catbg, h4.catbg2 , h3.catbg , h3.catbg2 , .table_list tbody.header td.catbg
{
   background: url(../images/theme/main_block.png) no-repeat 100% -160px;
   padding-right: 9px;
}


When i edit the image  background: url(../images/theme/main_block.png) no-repeat 100% -160px; it affects the mentioned areas included the forumbars. Is there a way for me to change forumbars only?


Greets
Kimmen
Title: Re: Square
Post by: Aiko on February 15, 2010, 02:48:04 PM
This is such an awesome skin :) My only problem is with the avatar at the top of the page, it distorts everything when an avatar is used.

Aside from that, the skin is perfect.
Title: Re: Square
Post by: PSPguru on March 30, 2010, 03:30:49 AM
simply too simple, very  nice