• Welcome to Simple Machines Community Forum. Please login or sign up.
January 19, 2022, 12:33:25 PM

News:

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


Green flowers theme - tab problem

Started by Gabriel91, August 11, 2019, 09:39:15 AM

Previous topic - Next topic

Gabriel91

Any idea how to fix the tabs? pls
Any new tab added is shown in default font and size and overlays existing tabs. The Quiz mod was installed for current theme too, so is not that.

*ss in attachment

Antechinus

You have to write new CSS for the non-standard buttons and make new images for them. It's a known drawback of this theme. Tamuril hid the standard menu and used images for the buttons, because she wanted a particular look. It looks nice, but is a bit of a nuisance to customise.

The other alternative would be to re-code her menu to get rid of the images and just use text that was given a similar styling. That would accommodate new buttons without any further action being required, but takes a little more work to set up initially.

Antechinus

Can't edit the last post for more info, so putting it in a new one:

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.

Gabriel91

Tnx Antechinus!
It seems you are right. I found the tabs in the theme's img directory.

The problem is that I have no idea how to set tab images made by me for my new tabs.

The img are set in this css:
html, body {
height:100%;
}
body {
margin: 0 auto;
font: 78%/130% "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
background-color: #e9e6e1;
}
#head {
width: 100%;
background: #fdfdfc url(../images/theme/gf-headerback.png) repeat-x;
height: 94px;
}
#headerlogo {
background: #fdfdfc url(../images/theme/gf-headerblank.png) no-repeat left top;
height: 94px;
min-width: 406px;
float: left;
}
#headertext {
text-align: left;
padding: 25px 10px 0px 50px;
color: #5f6b47;
float: left;
}
#headertext a {
color: #5f6b47;
}
#login {
float: right;
padding: 20px 50px 0px 10px;
text-align: left;
color: #372f23;
}
#login a {
color: #535e3f;
}
#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;
}
.time_search {
display: block;
clear: both;
min-height: 25px;
padding: 5px 13px 0px 13px;
}

#footer {
background-color: #c8c4bc;
color: #50473b;
width: 100%;
margin-top: 10px;
text-align: center;
position: relative; bottom: 0px;
}
#in {
padding: 20px 15px 20px 15px;
}
#footer a {
color: #50473b
}
#footer ul li{
padding: 3px;
display: inline;
list-style: none;
}
#footer ul li.copyright
{
display: block;
}
#avatar_top {
float: left;
margin-right: 10px;
}


But there's no Quiz or Forum item to add images to it. Main css added in attachement. Any hint/example on how to replace images with text that has similar styling?



Advertisement: