• Welcome to Simple Machines Community Forum. Please login or sign up.
January 28, 2022, 06:27:02 PM

News:

SMF 2.1 RC4 has been released! Try it out and help us test! :) Read more.


Green Flowers

Started by Tamuril, September 27, 2010, 06:05:29 PM

Previous topic - Next topic

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

Antechinus

September 28, 2010, 05:18:00 AM #3 Last Edit: September 28, 2010, 05:29:13 AM by 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

I have become comfortably numb!


I remember my mother's prayers and they have always followed me.
   - Abraham Lincoln -



TOTM Winner. | Demo Site1on1 Theme Support

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

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?

Antechinus

October 05, 2010, 07:16:44 AM #9 Last Edit: October 05, 2010, 07:24:32 AM by 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

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?

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

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

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


Antechinus

October 06, 2010, 05:43:54 AM #17 Last Edit: October 06, 2010, 05:51:47 AM by 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):
                    <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).

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

October 07, 2010, 09:32:54 AM #21 Last Edit: March 24, 2011, 10:28:52 AM by Tamuril
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.

Tamuril

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.

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

February 19, 2018, 03:16:09 AM #27 Last Edit: February 19, 2018, 04:05:22 AM by 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:

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

Advertisement: