Green Flowers

[Tamuril]

Link to the theme


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!

[Oya]

nice theme thanks for sharing

[Deaks]

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

[Antechinus]

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.

[Crip]

Very pretty clean Theme.

[bloc]

I really like this theme. It has a warm feeling to it and the color-scheme is very comfortable for the eye.

Great job!

[LisaNY]

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!

[Antechinus]

This theme doesn't include that feature. You'll have to rely on the pop-up unless you alter the menu css. 

[LisaNY]

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?

[Antechinus]

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.

[LisaNY]

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?

[Oya]

the theme uses images for the buttons, not text, and without providing a button for every possible number it could get tricky...

[Matthew K.]

Very nice theme Good job!

[Antechinus]

Thank 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.

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.

the 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).

[Oya]

except most users dont have that exact font too

[Antechinus]

Which IMO is not as much of a nuisance as the current drawbacks. Anyway, it's an option if anyone wants to use it.

[LisaNY]

Thank you!

[Antechinus]

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):

Code Select Expand

                    <li><a href="', $scripturl, '?action=unreadreplies">', $txt['show_unread_replies'], '</a></li>';


Replace:

Code Select Expand

                    <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:

Code Select Expand

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


Replace:

Code Select Expand

                    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:

Code Select Expand

#adm_submenus
{
    padding-left: 2em;
}


Replace:

Code Select Expand

#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).

[nikki73]

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 

[Antechinus]

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.

[nikki73]

Yea i get ya, thanks for that 

[Tamuril]

The 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.

[Tamuril]

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.

[Antechinus]

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.

[Tamuril]

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.)

[The Back Fence]

Any updates on adding a calendar button?

[Obsydian]

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.

[Antechinus]

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.

[Antechinus]

Posting this over here, so anyone can find it if they use this theme:

Took a quick look at Google web fonts. Without going through every possibility, it appears the bold variant of the Arsenal font 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 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 Expand

#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 Expand

#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 Expand

<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/gfstyle', $context['theme_variant'], '.css?rc3" />

Code (index.template.php - Replace) Select Expand

<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.