Trying to move around elements in welcome header...

[electrumowl]

Hello!

I run a Harry Potter RPG forum site; we're currently in the process of switching from our current forum to SMF 2.0.11. While I have a good working knowledge of HTML and CSS, Javascript and JQuery still confuse me to no end.  Be patient with me, please and thanks. ^_^

Right now, I'm having difficulty with what I will call the "welcome bar" -- on the default theme, this is the "upper_section" includes the "Hello, Username," quick search function, News feeder etc.  I made a mock up of what I'm aiming for design-wise on Photoshop:

 

My forum is quillsandquaffles.net [nofollow].  You can see I'm in very early production.


THE ACTUAL QUESTION:
I'm currently trying to figure out how to move a few things in order to put the welcome bar in the format I want (shown above).

1.  Somehow, I need to get the "Show new replies to your posts" link and "Show unread posts since your last visit" link on the right side rather than the left, and placed under the search bar.

2.  I need to move the News feeder code out of the "upper_section" altogether, and put it under the welcome bar, above the line separating the link tree from the header.


Hopefully what I'm asking for makes sense.  I've tried moving around pieces in the index.template.php but I always end up failing and causing a Template Parse Error. >>

[Sir Osis of Liver]

You'd be better off finding a theme that's close to what you want, and modifying it to your liking.  Would be simpler than trying to rework Curve into something completely different

http://custom.simplemachines.org/themes/
http://demo.dzinerstudio.com/
http://www.jpr62.com/demos/

[electrumowl]

@Sir Osis of Liver - I actually attempted to go that route, but didn't have any luck finding anything remotely close to what I was looking for (though if you know of one that's close, I'd definitely be interested).  I've already had success in styling the Curve theme to my needs; this is the only area I am really stumped on.

I'll look again at the links you provided, but I would prefer to just edit Curve if at all possible.  Thanks!

[Sir Osis of Liver]

Link to your forum?  Do you have the WIP running?

[electrumowl]

Quills and Quaffles [nofollow] <--- here's the forum (ignore the boards lol, they look awful).  Yes, WIP is running.

Thank you!


EDIT: I don't know why it won't let me post a link, must be my newbie-ness, sorry.

[Sir Osis of Liver]

Hm, not much help, as the header isn't there.  Any irate, moving the unread links is not difficult.

index.template.php

Find this -

Code Select Expand



// If the user is logged in, display stuff like their name, new messages, etc.
if ($context['user']['is_logged'])
{
if (!empty($context['user']['avatar']))
echo '
<p class="avatar">', $context['user']['avatar']['image'], '</p>';
echo '
<ul class="reset">
<li class="greeting">', $txt['hello_member_ndt'], ' <span>', $context['user']['name'], '</span></li>
<li><a href="', $scripturl, '?action=unread">', $txt['unread_since_visit'], '</a></li>
<li><a href="', $scripturl, '?action=unreadreplies">', $txt['show_unread_replies'], '</a></li>';



Change to this -

Code Select Expand



// If the user is logged in, display stuff like their name, new messages, etc.
if ($context['user']['is_logged'])
{
if (!empty($context['user']['avatar']))
echo '
<p class="avatar">', $context['user']['avatar']['image'], '</p>';
echo '
<ul class="reset">
<li class="greeting">', $txt['hello_member_ndt'], ' <span>', $context['user']['name'], '</span></li>';



Find this -

Code Select Expand



// 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>';



Add this -

Code Select Expand



// 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>';

/// Move unread links
echo '
<ul class="reset">
<li><a href="', $scripturl, '?action=unread">', $txt['unread_since_visit'], '</a></li>
<li><a href="', $scripturl, '?action=unreadreplies">', $txt['show_unread_replies'], '</a></li>
</ul>';



That will leave the date/time under username.

Do you want to move the random news item, or the news fader?

[electrumowl]

Success!! You're brilliant, thank you.

Would access to the test account be helpful?  I can always PM the password etc. to you and change it after you're done.  It's not an admin account or anything, but it would allow you to see the board as a member.

And yes please to moving the random news item.

[Sir Osis of Liver]

Crap, I just did the whole thing and it didn't post.  Hang on a min.

[Sir Osis of Liver]

To move the random news item:

index.template.php

Remove this -

Code Select Expand



// Show a random news item? (or you could pick one from news_lines...)
if (!empty($settings['enable_news']))
echo '
<h2>', $txt['news'], ': </h2>
<p>', $context['random_news_line'], '</p>';



Add this -

Code Select Expand



/// Show a random news item? (or you could pick one from news_lines...)
if (!empty($settings['enable_news']))
echo '
<div id="random_news">
<strong>', $txt['news'], ': </strong>', $context['random_news_line'] ,'
</div>';

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



/css/index.css

Add this -

Code Select Expand



#random_news
{
margin: 0 0 20px 15px;
}



Pretty much anywhere.  You can tinker with the formatting.  This will place the news item bottom of header just above main menu.

[Sir Osis of Liver]

Oops, forgot about not showing unread links to guests -

Code Select Expand



/// Move unread links
if ($context['user']['is_logged'])
echo '
<ul class="reset">
<li><a href="', $scripturl, '?action=unread">', $txt['unread_since_visit'], '</a></li>
<li><a href="', $scripturl, '?action=unreadreplies">', $txt['show_unread_replies'], '</a></li>
</ul>';



[electrumowl]

YES. *victory dance*  Everything works perfectly (just fixed the unread links code to reflect changes, thanks) and you deserve cookies.




Thank you tons, I really really appreciate this!

- EO

(Marking as resolved!)

[Kindred]

glad you got it worked out.

Just as a note.... if you are planning to mess around with templates, you should have a basic understanding of php.
Most specifically, the HTML that SMF uses *MUST* be enclosed within an echo statement and single quotes (and end with a semicolon)

so
echo 'html code goes here';

if you MOVE bits around, you need to make certain that the HTML is still enclosed within an echo...
and that
a) you didn't "break" out of the previous echo clause by moving your bit

echo ' old html code
.
.
.
----
echo 'code continued here but this is the part you moved. ';

see the broken code?  the echo opens, but is never closed. -- this will generate a parse error

b) you didn't move your code without either adding it inside another existing echo clause or adding the echo ' and closing '; around your code

of course, the actual templates are sometimes more complicated as there are, at times, breaks within the echo clause to pull in some php variable into the HTML

Code Select Expand


echo 'this is some code which would display a variablefor is the user not logged in? ', $context['user']['is_guest'] ,' and then continue some more';

and there are, at times, slightly more complicated php, like conditionals within the echo -- but they are set off by comma or periods like so...
', --- ,' (like above)
or
' . --- . '