need some design help please

Started by coucnilhomeswap, January 28, 2009, 08:10:23 AM

Previous topic - Next topic
Print
Go Down Pages1 2 All
User actions

coucnilhomeswap

January 28, 2009, 08:10:23 AM
hi guys ive attatched a screen shot of my site. were the black square is inside there i want to change that so it has buttons on instead of the default backgrounds. any help. its the default theme on SMF 1.1.7

Tyrsson

#1
January 28, 2009, 05:35:10 PM
Looks like you are using Simple Portal. If so just use a html block there, make the images and link them.
PM at your own risk, some I answer, if they are interesting, some I ignore.

coucnilhomeswap

#2
January 29, 2009, 05:22:00 AM
ok im gonna sound really thick here but how. im unsure about stuff like this

Tyrsson

#4
January 29, 2009, 05:26:30 AM
Create the images in a program such Photoshop. Upload them to your hosting space. And link the images with a url link so they will show. You can host them some where else like photobucket but it will slow down the load time.

A little more info on what you would like these 'buttons' to do would be very helpful..... Buttons can do many things.
PM at your own risk, some I answer, if they are interesting, some I ignore.

coucnilhomeswap

#5
January 29, 2009, 05:44:48 AM
well to be honest i want to get rid of that navi bar were it says "home", "forum",Forum help" etc etc and use buttons instead. if that helps

Tyrsson

#6
January 29, 2009, 06:35:11 AM
Ah, well that will take some coding. Both in the index.template and in the css. Which portal are you using? If its simple portal or portamax then you can change themes pretty easy and I would just suggest that you use another theme. Most likely one with a drop menu if you are using the 2.x version of smf since you will then be bale to move some tabs to the sub buttons.
PM at your own risk, some I answer, if they are interesting, some I ignore.

coucnilhomeswap

#7
January 29, 2009, 06:39:48 AM
im using simpleportal and the default them. id really like to keep the default theme as thats were all my mods are and i dont like the prospect of manually adding the mods to a custome theme. would that be easy to do anyway adding mods to new themes

Tyrsson

#8
January 29, 2009, 06:59:30 AM
I think one of the support specialist has a good suggestion for this... If they do not post by tomorrow then I will pass the word along.. They have the code that you will need :)
PM at your own risk, some I answer, if they are interesting, some I ignore.

coucnilhomeswap

#9
January 29, 2009, 07:04:09 AM
thats great. will they post it here with instructions on how to do it as im rubbish at codeing lol

Tyrsson

#10
January 29, 2009, 01:44:18 PM
When I see them on next I will get the code that you need and post it here with instructions :)
PM at your own risk, some I answer, if they are interesting, some I ignore.

coucnilhomeswap

#11
January 30, 2009, 12:19:50 PM
Quote from: Tyrsson on January 29, 2009, 01:44:18 PM
When I see them on next I will get the code that you need and post it here with instructions :)

hi could you get the code for me please as they have not posted yet.

Tyrsson

#12
January 30, 2009, 12:24:06 PM
I will post back this afternoon. I have some business I have to handle early this afternoon but after that I will track the code down for you.

There is only one way to learn to do this though and that's to do it. :)
PM at your own risk, some I answer, if they are interesting, some I ignore.

coucnilhomeswap

#13
January 30, 2009, 12:27:19 PM
ok my friend. its 5.25 pm here in england and im on all bloody day after last nights ballsup by my webhost

Antechinus

#14
January 30, 2009, 03:19:18 PM Last Edit: January 30, 2009, 03:27:21 PM by Antechinus
Ok, here you go. This contains the standard default theme buttons and replaces the standard default theme menu.
Since I ripped the code from a theme I had already added drop menus to you get those as well. Additional buttons and additional links in the drop menus can be added by following the general syntax of the existing links and buttons.

If you want to do anything else with it you can copy/paste the menu code anywhere you like. Try playing around with a test copy of the theme first. If you want all or some of the menu in a block you'll need to use a phpblock.

Open index.template.php.

Find:

Code Select
/* Show sticky and lock status seperate from topic icons? */
$settings['seperate_sticky_lock'] = true;

}

Replace with:

Code Select
/* Show sticky and lock status seperate from topic icons? */
$settings['seperate_sticky_lock'] = true;

    /* Call to Theme String for languages  */
    if(loadlanguage('ThemeStrings') == false)
        loadLanguage('ThemeStrings', 'english');
}

Find:

Code Select
echo '
document.getElementById("upshrink_ic").src = smf_images_url + (mode ? "/expand.gif" : "/collapse.gif");

document.getElementById("upshrinkHeaderIC").style.display = mode ? "none" : "";

current_header_ic = mode;
}
// ]]></script>
</head>
<body>';

Replace with:

Code Select
echo '
document.getElementById("upshrink_ic").src = smf_images_url + (mode ? "/expand.gif" : "/collapse.gif");

document.getElementById("upshrinkHeaderIC").style.display = mode ? "none" : "";

current_header_ic = mode;
}
// ]]></script>';

echo '
    <script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
      var PreloadImages = new Array(
         "/images/submenu_top.png",
         "/images/submenu_bg.png"
      );

      var myImages = new Array();
      for(var i = 0; i < PreloadImages.length; i++)
      {
         myImages[i] = new Image();
         myImages[i].src = "'. $settings['theme_url'] .'" + PreloadImages[i];
      }
    // ]]></script>';
 
echo '

</head>
<body>';

Find:

Code Select
// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
global $context, $settings, $options, $scripturl, $txt;

// Work out where we currently are.
$current_action = 'home';
if (in_array($context['current_action'], array('admin', 'ban', 'boardrecount', 'cleanperms', 'detailedversion', 'dumpdb', 'featuresettings', 'featuresettings2', 'findmember', 'maintain', 'manageattachments', 'manageboards', 'managecalendar', 'managesearch', 'membergroups', 'modlog', 'news', 'optimizetables', 'packageget', 'packages', 'permissions', 'pgdownload', 'postsettings', 'regcenter', 'repairboards', 'reports', 'serversettings', 'serversettings2', 'smileys', 'viewErrorLog', 'viewmembers')))
$current_action = 'admin';
if (in_array($context['current_action'], array('search', 'admin', 'calendar', 'profile', 'mlist', 'register', 'login', 'help', 'pm')))
$current_action = $context['current_action'];
if ($context['current_action'] == 'search2')
$current_action = 'search';
if ($context['current_action'] == 'theme')
$current_action = isset($_REQUEST['sa']) && $_REQUEST['sa'] == 'pick' ? 'profile' : 'admin';

// Are we using right-to-left orientation?
if ($context['right_to_left'])
{
$first = 'last';
$last = 'first';
}
else
{
$first = 'first';
$last = 'last';
}

// Show the start of the tab section.
echo '
<table cellpadding="0" cellspacing="0" border="0" style="margin-left: 10px;">
<tr>
<td class="maintab_' , $first , '">&nbsp;</td>';

// Show the [home] button.
echo ($current_action=='home' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'home' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '">' , $txt[103] , '</a>
</td>' , $current_action == 'home' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

// Show the [help] button.
echo ($current_action == 'help' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'help' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=help">' , $txt[119] , '</a>
</td>' , $current_action == 'help' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

// How about the [search] button?
if ($context['allow_search'])
echo ($current_action == 'search' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'search' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=search">' , $txt[182] , '</a>
</td>' , $current_action == 'search' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

// Is the user allowed to administrate at all? ([admin])
if ($context['allow_admin'])
echo ($current_action == 'admin' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'admin' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=admin">' , $txt[2] , '</a>
</td>' , $current_action == 'admin' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

// Edit Profile... [profile]
if ($context['allow_edit_profile'])
echo ($current_action == 'profile' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'profile' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=profile">' , $txt[79] , '</a>
</td>' , $current_action == 'profile' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

// Go to PM center... [pm]
if ($context['user']['is_logged'] && $context['allow_pm'])
echo ($current_action == 'pm' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'pm' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=pm">' , $txt['pm_short'] , ' ', $context['user']['unread_messages'] > 0 ? '[<strong>'. $context['user']['unread_messages'] . '</strong>]' : '' , '</a>
</td>' , $current_action == 'pm' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

// The [calendar]!
if ($context['allow_calendar'])
echo ($current_action == 'calendar' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'calendar' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=calendar">' , $txt['calendar24'] , '</a>
</td>' , $current_action == 'calendar' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

// the [member] list button
if ($context['allow_memberlist'])
echo ($current_action == 'mlist' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'mlist' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=mlist">' , $txt[331] , '</a>
</td>' , $current_action == 'mlist' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';


// If the user is a guest, show [login] button.
if ($context['user']['is_guest'])
echo ($current_action == 'login' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'login' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=login">' , $txt[34] , '</a>
</td>' , $current_action == 'login' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';


// If the user is a guest, also show [register] button.
if ($context['user']['is_guest'])
echo ($current_action == 'register' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'register' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=register">' , $txt[97] , '</a>
</td>' , $current_action == 'register' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';


// Otherwise, they might want to [logout]...
if ($context['user']['is_logged'])
echo ($current_action == 'logout' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'logout' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=logout;sesc=', $context['session_id'], '">' , $txt[108] , '</a>
</td>' , $current_action == 'logout' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

// The end of tab section.
echo '
<td class="maintab_' , $last , '">&nbsp;</td>
</tr>
</table>';

}

Replace with:

Code Select
// Show the menu up top.  Something like [home] [help] [profile] [logout]...
function template_menu()
{
global $context, $settings, $options, $scripturl, $txt;

echo '   
      <div class="tabs">
                 <ul>';

// Show the [home] and [help] buttons.
echo '
<li><a href="', $scripturl, '"><span class="menu">' ,($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/' . $context['user']['language'] . '/home.gif" alt="' . $txt[103] . '" border="0" />' : $txt[103]), '</span></a></li>', $context['menu_separator'], '
<li><a href="', $scripturl, '?action=help"><span class="menu">' ,($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/' . $context['user']['language'] . '/help.gif" alt="' . $txt[119] . '" border="0" />' : $txt[119]), '</span></a></li>' , $context['menu_separator'];

// How about the [search] button?
if ($context['allow_search'])
echo '
<li><a href="', $scripturl, '?action=search"><span class="menu">' ,($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/' . $context['user']['language'] . '/search.gif" alt="' . $txt[182] . '" border="0" />' : $txt[182]), '</span></a></li>' , $context['menu_separator'];

// Is the user allowed to administrate at all? ([admin])
if ($context['allow_admin'])
echo '
<li><a href="', $scripturl, '?action=admin"><span class="menu">' ,($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/' . $context['user']['language'] . '/admin.gif" alt="' . $txt[2] . '" border="0" />' : $txt[2]), '</span></a>
     <div class="sub">
                         <ul>
<li><a href="index.php?action=packages">',$txt['packages'],'</a></li>
<li><a href="index.php?action=regcenter">',$txt['regist'],'</a></li>
<li><a href="index.php?action=viewErrorLog;desc">',$txt['errorlog'],'</a></li>
<li><a href="index.php?action=maintain">',$txt['maintain'],'</a></li>
<li><a href="index.php?action=news">',$txt['newsand'],'</a></li>
                        </ul>                     
                  </div>
</li>' ,$context['menu_separator'];

// Edit Profile... [profile]
if ($context['allow_edit_profile'])
echo '
<li><a href="', $scripturl, '?action=profile"><span class="menu">' ,($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/' . $context['user']['language'] . '/profile.gif" alt="' . $txt[79] . '" border="0" />' : $txt[79]), '</span></a>

<div class="sub">
                         <ul>
<li><a href="index.php?action=profile;u=1;sa=forumProfile">',$txt['forpro'],'</a></li>
<li><a href="index.php?action=profile;sa=account">',$txt['account'],'</a></li>
<li><a href="index.php?action=profile;sa=theme">',$txt['layout'],'</a></li>
                        </ul>                     
                  </div>
</li>' , $context['menu_separator'];

// Go to PM center... [pm]
if ($context['user']['is_logged'] && $context['allow_pm'])
echo '
<li><a href="', $scripturl, '?action=pm"><span class="menu">' ,($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/' . $context['user']['language'] .'/messages.gif" alt="' . $txt['pm_short'] . '" border="0" />' : $txt['pm_short']), '</span></a>

<div class="sub">
                         <ul>
                        <li><a href="index.php?action=pm;f=outbox">',$txt['outbox'] ,'</a></li>
<li><a href="index.php?action=pm;sa=send">',$txt['sendmess'] ,'</a></li>
<li><a href="index.php?action=pm;sa=search">',$txt['searchmess'] ,'</a></li>
                        </ul>                     
                  </div>
</li>' , $context['menu_separator'];

// The [calendar]!
if ($context['allow_calendar'])
echo '
<li><a href="', $scripturl, '?action=calendar"><span class="menu">' ,($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/' . $context['user']['language'] . '/calendar.gif" alt="' . $txt['calendar24'] . '" border="0" />' : $txt['calendar24']), '</span></a></li>' , $context['menu_separator'];
   
// the [member] list button
if ($context['allow_memberlist'])
echo '
<li><a href="', $scripturl, '?action=mlist"><span class="menu">' ,($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/' . $context['user']['language'] . '/memberlist.gif" alt="' . $txt[331] . '" border="0" />' : $txt[331]), '</span></a></li>' , $context['menu_separator'];

// If the user is a guest, show [login] and [register] buttons.
if ($context['user']['is_guest'])
{
echo '
<li><a href="', $scripturl, '?action=login"><span class="menu">' ,($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/' . $context['user']['language'] . '/login.gif" alt="' . $txt[34] . '" border="0" />' : $txt[34]), '</span></a></li>' ,$context['menu_separator'],'
<li><a href="', $scripturl, '?action=register"><span class="menu">' ,($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/' . $context['user']['language'] . '/register.gif" alt="' . $txt[97] . '" border="0" />' : $txt[97]), '</span></a></li>';
}
// Otherwise, they might want to [logout]...
else
echo '
<li><a href="', $scripturl, '?action=logout;sesc=', $context['session_id'], '"><span class="menu">' ,($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/' . $context['user']['language'] . '/logout.gif" alt="' . $txt[108] . '" border="0" />' : $txt[108]), '</span></a></li>';

    echo '
         </ul>
      </div>';         
}



Open style.css.

Add this to the end of the file:

Code Select
/*Drop menu codes*/

.tabs {
     
    margin: 8px 0 0 4px;
    padding: 0 0 0 0;
    list-style: none;
    background: none;
}

.tabs a:link{
    cursor: pointer;
}

.tabs a:visited { }

.tabs ul {   
    height: 25px;
    margin: 0;
    padding: 0;
    list-style: none;
float: left;
}

.tabs ul li a.current { }

.tabs li {
    padding: 0;
    position: relative;
    z-index: 1;
float: left;
}

.tabs li:hover {
    z-index:2;
}

.tabs li a {
    display: block;
    line-height: 25px;
    overflow: hidden;
float: left;
}

a .menu {
    width: 88px;
    height: 25px;
    line-height: 25px;
    display: block;
     padding: 0 2px 0 0;
float: left;
}

.tabs li:hover .sub,
.tabs li.hover .sub {
    display: block;
}

.tabs li .sub {
    display: none;
    position: absolute;
    top: 18px;
    left: -10px;
    height: 16px;
    width: 186px;
    padding-top: 16px;
    background: url(images/submenu_top.png) no-repeat;
}

.tabs li ul {
    width: 186px;
    height: auto;
    margin: 0 0 0 0;
    padding: 2px 0 12px 9px;
    list-style: none;
    background: url(images/submenu_bg.png) 0 100% no-repeat;
}

.tabs li:hover li,
.tabs li.current li {
    width: 100%;
    padding: 0;
    background: none;
}

.tabs li:hover li a,
.tabs li.current li a {
    color: #13609F;
font-size: 11px;
    background: none;
    text-decoration: none;
    margin: 0 0 0 0;
    padding: 2px 7px 2px 10px;
    line-height: 15px;
    width: 150px;
}

.tabs li:hover li a:hover,
.tabs li.current li a:hover {
    color: #004F8F;
text-decoration: underline;
    line-height: 15px;
    margin: 0 0 0 0;
    padding: 2px 7px 2px 10px;
}

/*IE*/
.tabs li li a:hover {
    color: #004F8F;
text-decoration: underline;
    line-height: 15px;
    margin: 0 0 0 0;
    padding: 2px 7px 2px 10px;
}
/**/

/* End of drop menu codes. */

Open your theme's languages folder and add the ThemeStrings.english.php file to it.
Add the two attached submenu images to the images folder.
Add the attached button to the images/english folder.

coucnilhomeswap

#15
January 30, 2009, 04:29:47 PM
erm i have ezportal installed. is that a problem

coucnilhomeswap

#16
January 30, 2009, 05:15:11 PM
made a total cockup. forgot to mention its heavily moded is my site. arrrrrggggggg got to start again. never mind

Antechinus

#17
January 30, 2009, 05:28:37 PM
Like I said, make a test copy of the theme and play with that. Saves messing up your site.

coucnilhomeswap

#18
January 30, 2009, 05:30:49 PM
like i said im an idiot

coucnilhomeswap

#19
January 31, 2009, 03:46:32 PM
would any one mind if i tried to make this into a mod. or is the code dopyright to the poster. if i can make it into a mod anyone that helps me out will have full credit along with me as author
Print
Go Up Pages1 2 All
User actions
Advertisement: