Simple Machines Community Forum

Customizing SMF => Graphics and Templates => Theme Site Themes => Topic started by: Tamuril on September 27, 2010, 06:05:29 PM

Title: Green Flowers
Post by: Tamuril on September 27, 2010, 06:05:29 PM
Link to the theme (http://custom.simplemachines.org/themes/index.php?lemma=2252)
(http://custom.simplemachines.org/themes/index.php/action,download/lemma,2252/image,thumb)

Feminine, natural, light green and beige (brown) theme. Created with health and wellness, arts and children/educational content in mind.

- Tableless layout
- W3C Valid CSS and XHTML 1.0 Transitional
- Compatible with the latest versions of Opera, IE, FF, Chrome, and Safari
- Fits resolutions 1024x768 and greater

I offer PSD files and credit removal for a fee. Please visit the corresponding theme page on my website for more information:
http://www.tamurilart.com/smf-themes/green-flowers.htm

Enjoy!
Title: Re: Green Flowers
Post by: Oya on September 27, 2010, 06:21:11 PM
nice theme thanks for sharing
Title: Re: Green Flowers
Post by: Deaks on September 27, 2010, 08:23:18 PM
Tamuril you know what im gonna say as ive said it to you many times, but this is an amazing theme, im glad the cus team finally got there fingers out and approved it, seriously is stunning well done :D
Title: Re: Green Flowers
Post by: Antechinus on September 28, 2010, 05:18:00 AM
Nice job, as always. :)

The one thing I'm not so sure of is the use of image buttons for the menu. That is going to make this theme a bit of a nuisance for many people as any changes to the menu wont be styled automatically as in most themes. I'd be inclined to use text with CSS3 text shadow to get the same effect in any modern browser and just let IE users deal with a slightly less stylish menu. The benefits in ease of modification and cache times would be worth it IMO.   

ETA: Oh and I do hope you will get around to doing 2.0 versions of your older themes at some point. They were rather good.
Title: Re: Green Flowers
Post by: Crip on September 28, 2010, 07:02:04 PM
Very pretty clean Theme. :)
Title: Re: Green Flowers
Post by: bloc on October 03, 2010, 03:00:28 PM
I really like this theme. It has a warm feeling to it and the color-scheme is very comfortable for the eye.

Great job! :)
Title: Re: Green Flowers
Post by: LisaNY on October 04, 2010, 10:13:34 PM
This is a beautiful theme!   My favorite of the 2.0 themes so far.

I have one question about private messages.  On this particular theme, I am unable to see if I have a new private message.
I know that it gives you a pop-up alert, but what about in the top right of the forum, where it tells you that you have a new pm?

Thanks!
Title: Re: Green Flowers
Post by: Antechinus on October 05, 2010, 05:58:08 AM
This theme doesn't include that feature. You'll have to rely on the pop-up unless you alter the menu css. 
Title: Re: Green Flowers
Post by: LisaNY on October 05, 2010, 06:59:17 AM
Quote from: Antechinus on October 05, 2010, 05:58:08 AM
This theme doesn't include that feature. You'll have to rely on the pop-up unless you alter the menu css. 

Thank you.  Would you know how I would do that?  What would I enter in the menu css?
Title: Re: Green Flowers
Post by: Antechinus on October 05, 2010, 07:16:44 AM
Would have to take a look at it. Short story is that Tamuril has hidden the standard menu text, which includes the usual PM notification (the [1] after My Messages). The code is still there but it doesn't display anything. Getting it to display without  making things look borked is likely to require a bit of messing around.

ETA: Or may be able to do it another way. Don't have time right now though. Can look at it tomorrow.
Title: Re: Green Flowers
Post by: LisaNY on October 05, 2010, 07:24:08 AM
Quote from: Antechinus on October 05, 2010, 07:16:44 AM
Would have to take a look at it. Short story is that Tamuril has hidden the standard menu text, which includes the usual PM notification (the [1] after My Messages). The code is still there but it doesn't display anything. Getting it to display without  making things look borked is likely to require a bit of messing around.

Thank you.  Just curious, is there a specific reason why a designer would choose not to have that info displayed?
Title: Re: Green Flowers
Post by: Oya on October 05, 2010, 04:46:41 PM
the theme uses images for the buttons, not text, and without providing a button for every possible number it could get tricky...
Title: Re: Green Flowers
Post by: Matthew K. on October 05, 2010, 05:02:38 PM
Very nice theme :) Good job!
Title: Re: Green Flowers
Post by: Antechinus on October 05, 2010, 05:13:25 PM
Quote from: LisaNY on October 05, 2010, 07:24:08 AMThank you.  Just curious, is there a specific reason why a designer would choose not to have that info displayed?
I would say she wanted to get that particular look on the menu text and thought an image was the only way to do it.

Quote from: Antechinus on September 28, 2010, 05:18:00 AMThe one thing I'm not so sure of is the use of image buttons for the menu. That is going to make this theme a bit of a nuisance for many people as any changes to the menu wont be styled automatically as in most themes. I'd be inclined to use text with CSS3 text shadow to get the same effect in any modern browser and just let IE users deal with a slightly less stylish menu. The benefits in ease of modification and cache times would be worth it IMO.

Quote from: Oya on October 05, 2010, 04:46:41 PMthe theme uses images for the buttons, not text, and without providing a button for every possible number it could get tricky...
I'd be inclined to do it as above, or alternatively write some custom code for hauling up the number of new messages in the header. Either would work and both are fairly easy. The advantage of changing the menu of course is that it deals with several problems at once (at the cost of not looking quite so good in IE).
Title: Re: Green Flowers
Post by: Oya on October 05, 2010, 06:27:55 PM
except most users dont have that exact font too
Title: Re: Green Flowers
Post by: Antechinus on October 05, 2010, 06:41:46 PM
Which IMO is not as much of a nuisance as the current drawbacks. Anyway, it's an option if anyone wants to use it.
Title: Re: Green Flowers
Post by: LisaNY on October 05, 2010, 09:36:14 PM
Thank you!
Title: Re: Green Flowers
Post by: Antechinus on October 06, 2010, 05:43:54 AM
Ok Lisa, try this. This is the "simple" version that doesn't require changing the whole menu. It adds a PM notification text in the header, underneath the unread links.

Index.template.php

Find (on Line 187 of an unedited template):
                    <li><a href="', $scripturl, '?action=unreadreplies">', $txt['show_unread_replies'], '</a></li>';


Replace:
                    <li><a href="', $scripturl, '?action=unreadreplies">', $txt['show_unread_replies'], '</a></li>
                    <li>', $context['user']['messages'], '&nbsp;', $context['user']['messages'] != 1 ? $txt['msg_alert_messages'] : $txt['message_lowercase'], '', $txt['newmessages4'], '
                        ', $context['user']['unread_messages'] !=0 ? '<a href="'. $scripturl. '?action=pm"><b>':'';
                   
                echo '
                        ', $context['user']['unread_messages'], '&nbsp;', $context['user']['unread_messages'] == 1 ? $txt['newmessages0'] : $txt['newmessages1'] , '.                   
                        ', $context['user']['unread_messages'] !=0 ? '</b></a>':'';                   
                   
                echo '   
                    </li>';


Someone will probably tell me my php could be cleaner but hey, it works.

There are also a couple of minor bugs elsewhere. These aren't Tamuril's fault. They're small things we have fixed in the latest dev builds. I'd suggest doing them but you don't have to if you don't want to.

Index.template php again. Find:
                    foreach ($childbutton['sub_buttons'] as $grandchildbutton)
                        echo '
                                <li>
                                    <a', $grandchildbutton['active_button'] ? ' class="active"' : '', ' href="', $grandchildbutton['href'], '"', isset($grandchildbutton['target']) ? ' target="' . $grandchildbutton['target'] . '"' : '', '>



Replace:
                    foreach ($childbutton['sub_buttons'] as $grandchildbutton)
                        echo '
                                <li>
                                    <a', $grandchildbutton['href'] ? ' class="active"' : '', ' href="', $grandchildbutton['href'], '"', isset($grandchildbutton['target']) ? ' target="' . $grandchildbutton['target'] . '"' : '', '>


That will stop an undefined index error filling your error log.


Index.css
Find:
#adm_submenus
{
    padding-left: 2em;
}



Replace:
#adm_submenus, #adm_submenus ul
{
    padding-left: 1em;
}


That will stop the left side of the first button from being chopped off in the admin menus (like where it says Error Log Ban Log Task Log Log Pruning on action=admin;area=logs;sa=errorlog).
Title: Re: Green Flowers
Post by: nikki73 on October 06, 2010, 09:15:07 AM
Really really love this theme. Downloaded it yesterday and its fab, only one problem though and its probably me lol. The calendar button is basically joined with the members button and its in small black writing whereas the other buttons are nice and white  :-\
Title: Re: Green Flowers
Post by: Antechinus on October 06, 2010, 09:34:47 AM
No it isn't you. Since the menu is done with image buttons and only has a certain number of buttons and the css for them included, any extra buttons added by features and/or mods will display just like your calendar button. The only way around it is to write more css and make more buttons in Photoshop.

Other alternative is what I suggested earlier: recode the menu to use standard text strings like most themes. That way the menu content would be automatically dealt with.
Title: Re: Green Flowers
Post by: nikki73 on October 06, 2010, 09:38:43 AM
Yea i get ya, thanks for that  :-*
Title: Re: Green Flowers
Post by: Tamuril on October 07, 2010, 09:32:54 AM
QuoteThe one thing I'm not so sure of is the use of image buttons for the menu.

Thanks to everyone for the comments. Sorry about the difficulty with the image buttons in the nav bar.
Title: Re: Green Flowers
Post by: Tamuril on October 07, 2010, 09:36:45 AM
Quote from: LisaNY on October 04, 2010, 10:13:34 PM
This is a beautiful theme!   My favorite of the 2.0 themes so far.
I have one question about private messages.  On this particular theme, I am unable to see if I have a new private message.
I know that it gives you a pop-up alert, but what about in the top right of the forum, where it tells you that you have a new pm?

Thanks for the compliment. Also, if I disabled that, it must have been by accident... I have no reason to not include the private message text at the top. I'll look into this tomorrow.
Title: Re: Green Flowers
Post by: Antechinus on October 07, 2010, 06:48:35 PM
Code for it is here: http://www.simplemachines.org/community/index.php?topic=402583.msg2809220#msg2809220 ;)

2.0 default doesn't actually include that text in the header any more so that's probably how you lost it.

Regarding buttons: may I suggest letting people have a basic button psd so they can do their own buttons? You wouldn't have to release the whole theme psd and anyone could handle the required css additions just by looking at the existing examples.
Title: Re: Green Flowers
Post by: Tamuril on March 24, 2011, 10:34:36 AM
Thanks, Antechinus!

I have decided that I'm going to continue using images for the buttons in my themes. It is part of my individual style. However, I will be careful to include all of the standard buttons in the future... I will also watch the threads a little more closely to make sure that theme standards are functioning properly (such as the PM text, etc.)
Title: Re: Green Flowers
Post by: The Back Fence on February 12, 2013, 02:37:06 PM
Any updates on adding a calendar button?
Title: Re: Green Flowers
Post by: Obsydian on January 26, 2018, 03:31:09 PM
Is there a way to transform these buttons into actual text links while looking similar?
My forum wants to grow, but in order to do that, I can't have missing buttons.
Title: Re: Green Flowers
Post by: Antechinus on February 19, 2018, 03:16:09 AM
Yes, it's possible. The short description is you would remove Tamuril's custom menu coding and substitute your own to get that result. It's not particularly difficult if you know some CSS. Are you any good at CSS, or do you need the whole thing done for you?

Just be aware that this theme was coded for SMF 2.0 RC3 (ie: not the final, stable version of 2.0) and it's possible there may be a few funny bits.
Title: Re: Green Flowers
Post by: Antechinus on August 12, 2019, 06:39:59 PM
Posting this over here, so anyone can find it if they use this theme:

Quote from: Antechinus on August 11, 2019, 08:29:04 PM
Took a quick look at Google web fonts. Without going through every possibility, it appears the bold variant of the Arsenal font (https://fonts.google.com/specimen/Arsenal) is an extremely close match to the font Tamuril used in the original images. I doubt most people would be able to pick the difference unless they were really trying to.

So, IMO the best option would be to call in Arsenal from Google and use that instead of the original menu images. With suitable choice of colour and text-shadow it should be almost indistinguishable from the original, and would make adding buttons a piece of cake. I'll play around with it later when I have more time.

Have played around with it, and it's a simple substitution. Turns out the Fira Sans Extra Condensed (https://fonts.google.com/specimen/Fira+Sans+Extra+Condensed?selection.family=Fira+Sans+Extra+Condensed) font is a better match than Arsenal. Arsenal doesn't look quite right in either normal or bold font weight, and some browsers won't support the semi-bold variant. Fira Sans Extra Condensed looks almost identical to Tamuril's original buttons if set to normal font weight. So, code:

Code (gfstyle.css - Find) Select
#navigation {
width: 100%;
min-width: 820px;
background: #e9e6e1 url(../images/theme/gf-menubar.png) repeat-x;
height: 39px;
padding: 0;
margin: 0;
display: block;
white-space:nowrap;
}

.navlevel{
margin-right: 8px;
}
#back_admin  {
background: #e9e6e1 url(../images/theme/gf-admin.png) no-repeat;
width: 77px;
height: 39px;
}
#back_admin span{
display: none;
}
#back_home {
background: #e9e6e1 url(../images/theme/gf-home.png) no-repeat;
width: 92px;
height: 39px;
}
#back_home span{
display: none;
}
#back_help {
background: #e9e6e1 url(../images/theme/gf-help.png) no-repeat;
width: 59px;
height: 39px;
}
#back_help span{
display: none;
}
#back_search {
background: #e9e6e1 url(../images/theme/gf-search.png) no-repeat;
width: 76px;
height: 39px;
}
#back_search span{
display: none;
}
#back_moderate {
background: #e9e6e1 url(../images/theme/gf-moderate.png) no-repeat;
width: 107px;
height: 39px;
}
#back_moderate span{
display: none;
}
#back_profile {
background: #e9e6e1 url(../images/theme/gf-profile.png) no-repeat;
width: 79px;
height: 39px;
}
#back_profile span{
display: none;
}
#back_mlist {
background: #e9e6e1 url(../images/theme/gf-members.png) no-repeat;
width: 100px;
height: 39px;
}
#back_mlist span{
display: none;
}
#back_pm {
background: #e9e6e1 url(../images/theme/gf-messages.png) no-repeat;
width: 133px;
height: 39px;
}
#back_pm span{
display: none;
}
#back_logout {
background: #e9e6e1 url(../images/theme/gf-logout.png) no-repeat;
width: 79px;
height: 39px;
}
#back_logout span{
display: none;
}
#back_login {
background: #e9e6e1 url(../images/theme/gf-login.png) no-repeat;
width: 66px;
height: 39px;
}
#back_login span{
display: none;
}
#back_register {
background: #e9e6e1 url(../images/theme/gf-register.png) no-repeat;
width: 86px;
height: 39px;
}
#back_register span{
display: none;
}


Code (gfstyle.css - Replace) Select
#navigation {
min-width: 820px;
padding-left: 1em;
background: #e9e6e1 url(../images/theme/gf-menubar.png) repeat-x;
height: 39px;
white-space:nowrap;
}

.dropmenu a span {
display: block;
padding: 0 3px;
font-size: 0.9em;
}

.dropmenu a>.navlevel {
padding: 0 5px;
line-height: 39px;
color: #fefffb;
font-family: "Fira Sans Extra Condensed", sans-serif;
font-size: 18px;
text-transform: lowercase;
letter-spacing: 1px;
text-shadow: 0 0 4px #566341;
}
/* Fixes for minor RC3 bugs. */
#main_admsection {
position: relative;
left: 0;
right: 0;
overflow: hidden;
}

#adm_submenus, #adm_submenus ul {
    padding-left: 1em;
}


Which saves a lot of stuff. :)
(The last two declarations are for fixing the small RC3 bugs that were in this theme, due to the state of 2.0.x dev builds at the time.)

You'll also need a small edit to index.template.php:

Code (index.template.php - Find) Select
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/gfstyle', $context['theme_variant'], '.css?rc3" />

Code (index.template.php - Replace) Select
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Fira+Sans+Extra+Condensed&display=swap">
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/gfstyle', $context['theme_variant'], '.css?rc3" />


The result will look almost identical to the original, but will allow adding custom buttons without problems. Screenshot attached. Obviously it can be re-styled any way you like if you want a different look.