Customization Options Button between Sidebar and Member List Link and Username

[Amaury]

Is it possible to move the Customization Options / Hide User Customizations / Show User Customizations button here and have it centered between those areas?

I know where where the code for it is in the MEMBERINFO template, I just don't know how to get it in that area and center it.

http://i101.photobucket.com/albums/m62/AmauryGarcia/CatsProfile.png

[WorldCraft]

Step 1: remove the 'floatright' class from the button and wrap the entire <vb:if> </vb:if> in div tags

Step 2: add style="text-align:center;" to the div tag you made

Step 3: place the entire div one line under this div <div class="profile_widgets member_summary userprof_moduleinactive userprof_moduleinactive_border<vb:if condition="$stylevar['textdirection'] == 'ltr'"> sidebarleft</vb:if>" id="sidebar_container">


Below is how it should look.


<div class="profile_widgets member_summary userprof_moduleinactive userprof_moduleinactive_border<vb:if condition="$stylevar['textdirection'] == 'ltr'"> sidebarleft</vb:if>" id="sidebar_container">
<!--Place button below-->
<div style="text-align:center;">
<vb:if condition="$show_customize_profile">
<button class="userprof_button hidden" id="profile_customization_button"><img src="{vb:stylevar imgdir_misc}/userprofile/paintbucket_icon.png" alt=""/>&nbsp;{vb:rawphrase customize_my_profile}</button>
<vb:else />
<vb:if condition="$show['userhastheme']">
<form action="{vb:link member, {vb:raw userinfo}}" method="get" id="profile_swap_form" class="floatright">
<input type="hidden" name="do" value="swapcss" />
<input type="hidden" name="u" value="{vb:raw prepared.userid}" />
<input type="hidden" name="token" value="{vb:raw bbuserinfo.securitytoken}" />
<input type="submit" tabindex="1" name="swapcss" value="{vb:raw usercss_switch_phrase}" class="userprof_button" id="profile_swap_button" />
</form>
</vb:if>
</vb:if>
</div>

[Amaury]

Step 1: remove the 'floatright' class from the button and wrap the entire <vb:if> </vb:if> in div tags

Step 2: add style="text-align:center;" to the div tag you made

Step 3: place the entire div one line under this div <div class="profile_widgets member_summary userprof_moduleinactive userprof_moduleinactive_border<vb:if condition="$stylevar['textdirection'] == 'ltr'"> sidebarleft</vb:if>" id="sidebar_container">
Below is how it should look.


<div class="profile_widgets member_summary userprof_moduleinactive userprof_moduleinactive_border<vb:if condition="$stylevar['textdirection'] == 'ltr'"> sidebarleft</vb:if>" id="sidebar_container">
<!--Place button below-->
<div style="text-align:center;">
<vb:if condition="$show_customize_profile">
<button class="userprof_button hidden" id="profile_customization_button"><img src="{vb:stylevar imgdir_misc}/userprofile/paintbucket_icon.png" alt=""/>&nbsp;{vb:rawphrase customize_my_profile}</button>
<vb:else />
<vb:if condition="$show['userhastheme']">
<form action="{vb:link member, {vb:raw userinfo}}" method="get" id="profile_swap_form" class="floatright">
<input type="hidden" name="do" value="swapcss" />
<input type="hidden" name="u" value="{vb:raw prepared.userid}" />
<input type="hidden" name="token" value="{vb:raw bbuserinfo.securitytoken}" />
<input type="submit" tabindex="1" name="swapcss" value="{vb:raw usercss_switch_phrase}" class="userprof_button" id="profile_swap_button" />
</form>
</vb:if>
</vb:if>
</div>

Is this good? I just copied and pasted your code to make it easier and save time.

http://i101.photobucket.com/albums/m62/AmauryGarcia/MEMBERINFO.png

[WorldCraft]

No, you need to delete the button from its original position, and find <div class="profile_widgets member_summary userprof_moduleinactive userprof_moduleinactive_border<vb:if condition="$stylevar['textdirection'] == 'ltr'"> sidebarleft</vb:if>" id="sidebar_container">

in the template (it's somewhere up above) and place the button with the centered div under it.

If you would prefer, you can copy paste your template here and I'll make the change for you.

[Amaury]

No, you need to delete the button from its original position, and find <div class="profile_widgets member_summary userprof_moduleinactive userprof_moduleinactive_border<vb:if condition="$stylevar['textdirection'] == 'ltr'"> sidebarleft</vb:if>" id="sidebar_container">in the template (it's somewhere up above) and place the button with the centered div under it.

If you would prefer, you can copy paste your template here and I'll make the change for you.

I usually understand template changes when it's something like "find this" and "change it to this." For some reason, I'm just not understanding this. It's me, the way you're explaining it, or both. XD

It's not letting me post the template here. It's 2,568 character too long.

I can create you a temporary admin account, though, if you want and PM you the details. You'd just need access to styles, right?

[WorldCraft]

Sorry, this may be an easier explanation. :P

Find <div class="profile_widgets member_summary userprof_moduleinactive userprof_moduleinactive_border<vb:if condition="$stylevar['textdirection'] == 'ltr'"> sidebarleft</vb:if>" id="sidebar_container">

Add one line below <div style="text-align:center;">
<vb:if condition="$show_customize_profile">
<button class="userprof_button hidden" id="profile_customization_button"><img src="{vb:stylevar imgdir_misc}/userprofile/paintbucket_icon.png" alt=""/>&nbsp;{vb:rawphrase customize_my_profile}</button>
<vb:else />
<vb:if condition="$show['userhastheme']">
<form action="{vb:link member, {vb:raw userinfo}}" method="get" id="profile_swap_form" class="floatright">
<input type="hidden" name="do" value="swapcss" />
<input type="hidden" name="u" value="{vb:raw prepared.userid}" />
<input type="hidden" name="token" value="{vb:raw bbuserinfo.securitytoken}" />
<input type="submit" tabindex="1" name="swapcss" value="{vb:raw usercss_switch_phrase}" class="userprof_button" id="profile_swap_button" />
</form>
</vb:if>
</vb:if>
</div>

Just make sure to backup or comment out the original button should you need to restore it.

If you do need more help just send me a PM and I'll take a look at it for you.

[Amaury]

Sorry, this may be an easier explanation. :P

Find <div class="profile_widgets member_summary userprof_moduleinactive userprof_moduleinactive_border<vb:if condition="$stylevar['textdirection'] == 'ltr'"> sidebarleft</vb:if>" id="sidebar_container">Add one line below <div style="text-align:center;">
<vb:if condition="$show_customize_profile">
<button class="userprof_button hidden" id="profile_customization_button"><img src="{vb:stylevar imgdir_misc}/userprofile/paintbucket_icon.png" alt=""/>&nbsp;{vb:rawphrase customize_my_profile}</button>
<vb:else />
<vb:if condition="$show['userhastheme']">
<form action="{vb:link member, {vb:raw userinfo}}" method="get" id="profile_swap_form" class="floatright">
<input type="hidden" name="do" value="swapcss" />
<input type="hidden" name="u" value="{vb:raw prepared.userid}" />
<input type="hidden" name="token" value="{vb:raw bbuserinfo.securitytoken}" />
<input type="submit" tabindex="1" name="swapcss" value="{vb:raw usercss_switch_phrase}" class="userprof_button" id="profile_swap_button" />
</form>
</vb:if>
</vb:if>
</div>Just make sure to backup or comment out the original button should you need to restore it.

If you do need more help just send me a PM and I'll take a look at it for you.

I actually wanted it outside of the sidebar under the Member List link, but that actually looks pretty good.

Now, how would I move it down a bit? It's going up right against the the border of the sidebar, and I don't want that. :)

http://i101.photobucket.com/albums/m62/AmauryGarcia/CustomButton.png

[WorldCraft]

Add padding-top:5px (or however much you want) to the div's style.

[Amaury]

Add padding-top:5px (or however much you want) to the div's style.

In the code you gave me?

Also, if you look here (http://www.kh-mediaflare.net/member.php?120-G%F6ttlichkeit), the Hide / Show User Customizations button isn't centered like the Customization Options button.

Additionally, there's a duplicate like you said. Where's the code that I delete or comment out?

[WorldCraft]

Find this div around the button<div style="text-align:center;">
After change text-align:center; to text-align:center;padding-top:5px;

And the Customize buttons are not available for guests to see, but if you are talking about removing the original button, you just need to locate it in the template (where it was originally) and just delete it, or comment it out with <!-- old button code --> if you just want to hide it from displaying on the page.

[Amaury]

Find this div around the button<div style="text-align:center;">After change text-align:center; to text-align:center;padding-top:5px;

And the Customize buttons are not available for guests to see, but if you are talking about removing the original button, you just need to locate it in the template (where it was originally) and just delete it, or comment it out with <!-- old button code --> if you just want to hide it from displaying on the page.

Alright, I'll take a look.

Also, here's a screenshot for the reference:

http://i101.photobucket.com/albums/m62/AmauryGarcia/CustomButtonII.png

[WorldCraft]

Ah, ok. To center the Hide Customizations button find:

<form action="{vb:link member, {vb:raw userinfo}}" method="get" id="profile_swap_form" class="floatright">
And delete class="floatright"

[Amaury]

Ah, ok. To center the Hide Customizations button find:

<form action="{vb:link member, {vb:raw userinfo}}" method="get" id="profile_swap_form" class="floatright">And delete class="floatright"

Wonderful!

As for the deleting or commenting out, is this the original code?

http://i101.photobucket.com/albums/m62/AmauryGarcia/Delete-Comment.png

[WorldCraft]

That's the new button you added. The old button is toward the bottom of the template.

[Amaury]

That's the new button you added. The old button is toward the bottom of the template.

?

http://i101.photobucket.com/albums/m62/AmauryGarcia/MEMBERINFO2.png

[WorldCraft]

Yup, place HTML comment tags around that. :)

[Amaury]

Yup, place HTML comment tags around that. :)

I think I'll just delete it.

Before this, the MEMBERINFO template wasn't modified, so I can always revert it if we decide to get rid of those changes.

--------------- Added 12/9/2012 at 5:40 PM ---------------

Hm.

To fix the alignment issue of the user rank not being centered under the username, is it possible to move the pencil icon up with Customize button? Or did you already post about that?

In regards to my other thread, I noticed the rank isn't directly centered under the username there, either, but there's no pencil icon there. Weird.

EDIT: You can reply regarding the postbit there, though. :)

[WorldCraft]

To move the pencil up, find your button code
<div style="text-align:center;padding-top:5px;">
<vb:if condition="$show_customize_profile">
<button class="userprof_button hidden" id="profile_customization_button"><img src="{vb:stylevar imgdir_misc}/userprofile/paintbucket_icon.png" alt=""/>&nbsp;{vb:rawphrase customize_my_profile}</button>
<vb:else />
<vb:if condition="$show['userhastheme']">
<form action="{vb:link member, {vb:raw userinfo}}" method="get" id="profile_swap_form">
<input type="hidden" name="do" value="swapcss" />
<input type="hidden" name="u" value="{vb:raw prepared.userid}" />
<input type="hidden" name="token" value="{vb:raw bbuserinfo.securitytoken}" />
<input type="submit" tabindex="1" name="swapcss" value="{vb:raw usercss_switch_phrase}" class="userprof_button" id="profile_swap_button" />
</form>
</vb:if>
</vb:if>
</div>

Right before the final </div> add

<vb:if condition="$show['edit_profile']">
<a href="moderator.php?{vb:raw session.sessionurl}do=useroptions&amp;u={vb:raw userinfo.userid}"><img src="{vb:stylevar imgdir_button}/edit_40b.png" alt="{vb:rawphrase edit_user_profile}" /></a>
</vb:if>

Then find where the original pencil is by searching for $show['edit_profile'] and delete it


Fix the centering, find
<span class="member_username">{vb:raw prepared.musername}</span>

Add style="position:relative;left:5px;"

[Amaury]

To move the pencil up, find your button code
<div style="text-align:center;padding-top:5px;">
<vb:if condition="$show_customize_profile">
<button class="userprof_button hidden" id="profile_customization_button"><img src="{vb:stylevar imgdir_misc}/userprofile/paintbucket_icon.png" alt=""/>&nbsp;{vb:rawphrase customize_my_profile}</button>
<vb:else />
<vb:if condition="$show['userhastheme']">
<form action="{vb:link member, {vb:raw userinfo}}" method="get" id="profile_swap_form">
<input type="hidden" name="do" value="swapcss" />
<input type="hidden" name="u" value="{vb:raw prepared.userid}" />
<input type="hidden" name="token" value="{vb:raw bbuserinfo.securitytoken}" />
<input type="submit" tabindex="1" name="swapcss" value="{vb:raw usercss_switch_phrase}" class="userprof_button" id="profile_swap_button" />
</form>
</vb:if>
</vb:if>
</div>Right before the final </div> add

<vb:if condition="$show['edit_profile']">
<a href="moderator.php?{vb:raw session.sessionurl}do=useroptions&amp;u={vb:raw userinfo.userid}"><img src="{vb:stylevar imgdir_button}/edit_40b.png" alt="{vb:rawphrase edit_user_profile}" /></a>
</vb:if>Then find where the original pencil is by searching for $show['edit_profile'] and delete it


Fix the centering, find
<span class="member_username">{vb:raw prepared.musername}</span>Add style="position:relative;left:5px;"

The whole line?

<vb:if condition="$show['edit_profile']">

[WorldCraft]

You have to remove the entire old <vb:if>code</vb:if> if you want to delete the old pencil icon.

[Amaury]

You have to remove the entire old <vb:if>code</vb:if> if you want to delete the old pencil icon.

This part, then?

<vb:if condition="$show['edit_profile']">
<a href="moderator.php?{vb:raw session.sessionurl}do=useroptions&amp;u={vb:raw userinfo.userid}" class="textcontrol imagecontrol"><img src="{vb:stylevar imgdir_button}/edit_40b.png" alt="{vb:rawphrase edit_user_profile}" /></a>
</vb:if>

Also, is it possible to move the new pencil icon to the right so it's in the same area the old one was?

[WorldCraft]

Find
<img src="{vb:stylevar imgdir_button}/edit_40b.png" alt="{vb:rawphrase edit_user_profile}" />

Add style="float:right;padding-right:10px"

Tweak the padding how you see fit.

[Amaury]

Find
<img src="{vb:stylevar imgdir_button}/edit_40b.png" alt="{vb:rawphrase edit_user_profile}" />Add style="float:right;padding-right:10px"Tweak the padding how you see fit.

Thanks.

Also, by using your code to fix the centering, the username is overlapping (http://www.kh-mediaflare.net/member.php?18-Amaury) with the status circle. How do I move the status circle, too?

On profiles that aren't mine, the ones with the Hide / Show Customizations button, the pencil icon appears below the button for some reason.

http://i101.photobucket.com/albums/m62/AmauryGarcia/Options2.png

Additionally, when I added the new pencil icon, it off-centered the Customization Options button a little.

http://i101.photobucket.com/albums/m62/AmauryGarcia/Options1.png

[WorldCraft]

Fix Hide Customization button. Find:
<form action="{vb:link member, {vb:raw userinfo}}" method="get" id="profile_swap_form">
Add
style="display:inline;"
__________________________________________________ ____________

Move status circle, find:
<span class="member_status">{vb:raw prepared.onlinestatus}</span>
Add
style="position:relative;left:5px;"
^Match the 5px to whatever you specified for the username
__________________________________________________ _____________

Since the pencil icon and the button exist in the same div, the browser centers it as one entire section, so it will look as if the button is off-centered. You can try giving a lesser padding amount here:
<img style="float:right;padding-right:10px" src="{vb:stylevar imgdir_button}/edit_40b.png" alt="{vb:rawphrase edit_user_profile}" />

[Amaury]

Fix Hide Customization button. Find:
<form action="{vb:link member, {vb:raw userinfo}}" method="get" id="profile_swap_form">Add
style="display:inline;"__________________________________________________ ____________

Move status circle, find:
<span class="member_status">{vb:raw prepared.onlinestatus}</span>Add
style="position:relative;left:5px;"^Match the 5px to whatever you specified for the username
__________________________________________________ _____________

Since the pencil icon and the button exist in the same div, the browser centers it as one entire section, so it will look as if the button is off-centered. You can try giving a lesser padding amount here:
<img style="float:right;padding-right:10px" src="{vb:stylevar imgdir_button}/edit_40b.png" alt="{vb:rawphrase edit_user_profile}" />

Well, it couldn't find the last code, but since it's not too off-centered, I'll just leave it as is.

Thanks a lot for your help. I've got one more question to ask in my other thread and then I'm going to create another thread in regards to a query regarding the "Top X Friends" box.

[Amaury]

I wanted to make some adjustments.

Because the button is in the sidebar, I recently found out it causes issues with styles where I didn't remove the gradients on the sidebar_background variable, so I want it outside of the sidebar.

Here's what I want:

Move the sidebar down to be evenly aligned with the really thin line below the tabs.
Have the Customization Options / Hide / Show User Customization button be evenly aligned with the tabs.
- Essentially like it was when the template was unmodified, but on the left this time so the tabs don't wrap.


Additionally, it'd be better to revert the template and start from scratch to make it easier, so I'll do that once you reply. c:

http://i101.photobucket.com/albums/m62/AmauryGarcia/Profile_zps02b17da5.png

[WorldCraft]

Hi you can try something like this. Add to additional.css. This assumes the template is default.


#member_content #sidebar_container
{
position: relative;
top: 26px;
}

#member_content #profile_customization_button
{
position: absolute;
left: 35px;
}

#member_content #profile_swap_form
{
position: absolute;
left: 35px;
}


You'll need to adjust the left: values depending on the width of your sidebar.

[Amaury]

Hi you can try something like this. Add to additional.css. This assumes the template is default.


#member_content #sidebar_container
{
position: relative;
top: 26px;
}

#member_content #profile_customization_button
{
position: absolute;
left: 35px;
}

#member_content #profile_swap_form
{
position: absolute;
left: 35px;
}


You'll need to adjust the left: values depending on the width of your sidebar.

That's perfect. The only thing I want is for the customization button to be centered, and I'm assuming I can just play with the swap's left value for that? Additionally, for the reference, sidebar width is currently 270px so the names of a moderator and registered user of ours fit on one line, haha!

http://i101.photobucket.com/albums/m62/AmauryGarcia/Customization_zps94d603cf.png

EDIT: Actually, it's causing the minor conflicts with the customization button border, so I'd like to move the sidebar down more a bit so it's evenly aligned with the top of the next time. It's the line around "All," etc. under the My Activity tab or where the border for the editor starts under the Visitor Messages tab.

Screenshot:

http://i101.photobucket.com/albums/m62/AmauryGarcia/Editor_zpsa60a09c3.png

[WorldCraft]

Adjust the top: 26px; to where you would like it to appear. Probably around 30px.

[Amaury]

Adjust the top: 26px; to where you would like it to appear. Probably around 30px.

31px did it.

Thanks.