Restyle Welcome (Table)

[• Ambrose •]

Forum URL: (private)

If you hover over the banner and the first square picture, you'd find that I moved the Welcome tidbit to that area. But, it looks lousy as just a single line of text.

I'd like to center it directly in that table with the following modifications, if possible:

For Guests

LOG IN
(border)
REGISTER

It would probably be 200X200.

For Members

AVATAR (maybe 100x100)

SWITCH ACCOUNT? | LOG OUT

Same, 200x200 on the outside.

I don't even know if it's possible to add in a link to switch accounts there.

Thank you in advance!

[Brian]

Hi, • Ambrose •.

You can output the current user's avatar using the $[current_user.avatar] variable. You may need to resize it using CSS if you want it to be restricted to a certain size.

When viewing the Switch Account page for your forum you can copy its URL from the address bar and use that as the Switch Account link. It's the same URL for everyone on your forum.

[• Ambrose •]

I tried to replace the "Welcome [member bit]" with that, but didn't seem to work.

This would be the CSS if applicable.

For Guests --


<div align="center" style="width:200px; height:200px; padding-top:10%; font-family:Georgia; font-size:18px; font-variant:small-caps;">
<div style="border-bottom:1px solid #151515;"><a href="LOGIN">Login</a></div>
<br />
<a href="REGISTER">Register</a>
</div>


For Members --


<div style="center" style="width:200px; height:200px; padding-top:10%; font-family:Georgia; font-size:18px; font-variant:small-caps;">
Member's Avatar (Small?)
<br />
<a href="SWITCH">Switch</a> | <a href="LOGOUT">Logout</a>


I understand some of the coding, but how do I keep it relative to whether the person'a guest or member?

[Brian]

That's HTML, not CSS.

If statements are what control whether or not something displays for a guest or for a registered member. The original welcome message had this if statement:

{if !$[current_user.is_member]}

$[current_user.is_member] returns a 1 (true) if the person viewing the page is a registered user, or returns 0 (false) if the person is a guest. But since it has an exclamation point in front of it this if statement is doing the opposite. Instead of checking if the user is a member it's checking if they're not a member.

With that in mind you can use the same if statement for what you're currently doing.

<div style="width:200px; height:200px; padding-top:10%; font-family:Georgia; font-size:18px; font-variant:small-caps; text-align: center;">
    {if !$[current_user.is_member]}
        <div style="border-bottom:1px solid #151515;"><a href="LOGIN">Login</a></div>
        <br />
        <a href="REGISTER">Register</a>
    {else}
        Member's Avatar (Small?)
        <br />
        <a href="SWITCH">Switch</a> | <a href="LOGOUT">Logout</a>
    {/if}
</div>

{else} tells the if statement that if the previous condition wasn't met it should output the HTML after {else} instead. The closing {/if} tag finishes the if statement so that the rest of the page can render as normal, unaffected by the if statement's conditions.

To sum it up, the above example reads like this:

If current user isn't a member:

Output HTML telling them to login or register

Or else:

Output HTML meant for registered users

[• Ambrose •]

Brian

I don't know much about codes... I flunked just now with what you tried to help me with... I can't log back in now. >.< I forgot to add the URLs.

Whew, managed to get back in... I will definitely try to work on it now xD

[Brian]

You should still be able to log in via your dashboard on the ProBoards.com homepage.

[• Ambrose •]

Jan 31, 2018 13:10:20 GMT -8 Brian said:

You should still be able to log in via your dashboard on the ProBoards.com homepage.

I tried that but it didn't work. Fortunately, I still had the Layout Templates tab open and when I tried "Save" it gave me a link to log back in and that's how I got back in.

[• Ambrose •]

I got it working so far but I can't seem to get the avatars round... Does "border-radius" not work in the Layout Templates anymore? I have noticed this particular issue in a few places.

[Brian]

border-radius should work fine if you're using it on a <div> element or any other element displaying as a block-level element.

The only thing the property doesn't really play nicely with is tables or elements with display: table-cell; in their CSS properties.