Simple Machines Community Forum

Customizing SMF => Graphics and Templates => Topic started by: bellrosk on August 17, 2011, 09:07:17 AM

Title: Help switching up the Curve layout
Post by: bellrosk on August 17, 2011, 09:07:17 AM
I'm sorry to be asking for help again, but I'm working on another custom layout for my site which is much simpler than the one before, however I could really do with a little guidance as I'm pretty horrendous at doing it on my own.

Here is an image I've put together of what I'd like to achieve (http://i56.tinypic.com/2e3o4g9.gif)

Essentially I'd like to have just the logo/header image at the top of the site which is within the header and frame ID. Below that I'd like the main menu (which is styled to have its own background bar) - currently it's enclosed within the #frame div but it would probably need to come out of this (whilst still in the header div). If it is possible to have the search bar and button floated to the right of the menu links then that would be great although it isn't necessary and I can get rid of the bar altogether and suffice with the link the menu.

And then below that I'd like the "Welcome user" etc links just above the breadcrumb but with no line breaks.

Any help is appreciated <3
Title: Re: Help switching up the Curve layout
Post by: IchBin™ on August 17, 2011, 01:38:25 PM
bellrosk, this is not something that we could just type up for you on the forum. It is a very involved process and really just take trial and error. I'd suggest you take a look at these links to learn how to do a little bit of theme design.

Basic theme design part 1. (no other parts were finished).
http://www.simplemachines.org/community/index.php?topic=349446.0

Video tutorials:
http://www.simplemachines.org/community/index.php?topic=401952.0
Title: Re: Help switching up the Curve layout
Post by: Sir Osis of Liver on August 17, 2011, 02:33:10 PM
If you just need the general layout, doesn't look too difficult.  The main thing seems to involve moving the user info out of the header and under the menu left side, which I just did for someone, if I can find the thread.


Here it is -

http://www.simplemachines.org/community/index.php?topic=446718.0

Gotta go, but should have some time tonight to tinker with the search widget.  Post whatever else you need.

Title: Re: Help switching up the Curve layout
Post by: Sir Osis of Liver on August 18, 2011, 12:58:15 AM
Ok, here's how you put the search widget right side of the menubar -

In index.template.php find this:



// Show the menu here, according to the menu sub template.
template_menu();

echo '
<br class="clear" />
</div></div>';




Change to this:



/// Show the menu here, according to the menu sub template.

echo '

<div style="display: inline-block;">';

template_menu();

echo '

</div>

<div style="float: right;">

<form id="search_form" action="', $scripturl, '?action=search2" method="post" accept-charset="', $context['character_set'], '">
<input type="text" name="search" value="" class="input_text" />&nbsp;
<input type="submit" name="submit" value="', $txt['search'], '" class="button_submit" />
<input type="hidden" name="advanced" value="0" />';

// Search within current topic?
if (!empty($context['current_topic']))
echo '
<input type="hidden" name="topic" value="', $context['current_topic'], '" />';
// If we're on a certain board, limit it to this board ;).
elseif (!empty($context['current_board']))
echo '
<input type="hidden" name="brd[', $context['current_board'], ']" value="', $context['current_board'], '" />';

echo '</form>

</div>';

echo '
<br class="clear" />
</div></div>';