XF 1.1 I've killed the sidebar.css, no backup - :(

[xenTheory]

I was making a change to the registration button and somehow have managed to destroy the sidebar, but only for logged in users - for guests it looks fine.

The revert feature doesn't work and I made changes directly to the template file (I know, stupid). Is there any way to fix it? Or could someone copy and paste the content of their sidebar.css for me?

Here is the content of my current sidebar.css

/* sidebar structural elements */
 
.mainContainer
{
    float: left;
    margin-right: -{xen:calc '@sidebar.width + 10'}px;
    width: 100%;
}
 
    .mainContent
    {
        margin-right: {xen:calc '@sidebar.width + 10'}px;
    }
 
.sidebar
{
    @property "sidebar";
    font-size: 11px;
    float: right;
    width: 250px;
    @property "/sidebar";
}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
/* visitor panel */
 
.sidebar .visitorPanel
{
    overflow: hidden; zoom: 1;
}
 
    .sidebar .visitorPanel h2 .muted
    {
        display: none;
    }
 
    .sidebar .visitorPanel .avatar
    {
        @property "visitorPanelAvatar";
        margin-right: 5px;
        float: left;
        width: 60px;
        height: 60px;
        @property "/visitorPanelAvatar";
       
        width: auto;
        height: auto;
    }
   
        .sidebar .visitorPanel .avatar img
        {
            width: @visitorPanelAvatar.width;
            height: @visitorPanelAvatar.height;
        }
   
    .sidebar .visitorPanel .username
    {
        @property "visitorPanelUsername";
        font-weight: bold;
        font-size: 11pt;
        @property "/visitorPanelUsername";
    }
   
    .sidebar .visitorPanel .stats
    {
        @property "visitorPanelStats";
        margin-top: 2px;
        @property "/visitorPanelStats";
    }
   
    .sidebar .visitorPanel .stats .pairsJustified
    {
        line-height: normal;
    }
 
 
 
 
 
 
 
 
 
 
 
 
 
   
/* generic sidebar blocks */
       
.sidebar .section .primaryContent  h3,
.sidebar .section .secondaryContent h3,
.profilePage .mast .section.infoBlock h3
{
    @property "sidebarBlockHeading";
    font-weight: bold;
    font-size: 12px;
    color: @primaryMedium;
    background: rgb(239, 239, 239) url('@imagePath/xenforo/gradients/highlight.png') repeat-x 0 0;
    padding: 6px;
    margin: -10px -10px 5px;
    border-bottom: 1px solid @primaryLighter;
    box-shadow: inset #fff 0px 1px 0px;
    text-shadow: #fff 0px 1px 0px;
    @property "/sidebarBlockHeading";
}
 
.sidebar .section .primaryContent  h3,
.sidebar .section .secondaryContent h3{
    border-radius: 3px 3px 0px 0px;
}
 
.sidebar .section .primaryContent,
.sidebar .section .secondaryContent{
    @property "sidebarBlockXenfocus";
    background-color: @whiteColor;
    border: 1px solid @primaryLighter;
    border-radius: 3px;
    box-shadow: rgba(0,0,0,0.05) 0px 1px 4px;
    @property "/sidebarBlockXenfocus";
}
 
.sidebar .section .primaryContent  h3 a,
.sidebar .section .secondaryContent h3 a
{
    @property "sidebarBlockHeading.font";
    font-weight: bold;
    font-size: 12px;
    color: @primaryMedium;
    @property "/sidebarBlockHeading.font";
}
 
.sidebar .section .secondaryContent .footnote,
.sidebar .section .secondaryContent .minorHeading
{
    @property "sidebarBlockFootnote";
    color: @primaryLight;
    margin-top: 5px;
    @property "/sidebarBlockFootnote";
}
 
    .sidebar .section .secondaryContent .minorHeading a
    {
        color: @sidebarBlockFootnote.color;
    }
 
 
 
 
 
 
 
 
 
 
 
 
/* list of users with 32px avatars, username and user title */
 
.sidebar .avatarList li
{
    @property "sidebarAvatarListItem";
    margin: 5px 0;
    overflow: hidden;
    zoom: 1;
    @property "/sidebarAvatarListItem";
}
 
    .sidebar .avatarList .avatar
    {
        @property "sidebarAvatarListAvatar";
        margin-right: 5px;
        float: left;
        width: 32px;
        height: 32px;
        @property "/sidebarAvatarListAvatar";
       
        width: auto;
        height: auto;
    }
       
    .sidebar .avatarList .avatar img
    {
        width: @sidebarAvatarListAvatar.width;
        height: @sidebarAvatarListAvatar.height;
    }
   
    .sidebar .avatarList .username
    {
        @property "sidebarAvatarListUsername";
        font-size: 11pt;
        margin-top: 2px;
        display: block;
        @property "/sidebarAvatarListUsername";
    }
   
    .sidebar .avatarList .userTitle
    {
        @property "sidebarAvatarListUserTitle";
        color: @mutedTextColor;
        @property "/sidebarAvatarListUserTitle";
    }
 
 
 
 
 
 
 
 
 
/* list of users */
 
.sidebar .userList
{
}
 
    .sidebar .userList .username
    {
        @property "sidebarUserListUsername";
        font-size: 11px;
        @property "/sidebarUserListUsername";
    }
 
    .sidebar .userList .username.invisible
    {
        @property "sidebarUserListUsernameInvisible";
        color: @primaryLightish;
        @property "/sidebarUserListUsernameInvisible";
    }
   
    .sidebar .userList .username.followed
    {
        @property "sidebarUserListUsernameFollowed";
 
        @property "/sidebarUserListUsernameFollowed";
    }
 
    .sidebar .userList .moreLink
    {
        display: block;
    }
   
   
   
   
/* people you follow online now */
 
.followedOnline
{
    @property "sidebarFollowedUsers";
    margin-top: 3px;
    margin-bottom: -5px;
    overflow: hidden;
    zoom: 1;
    @property "/sidebarFollowedUsers";
}
 
.followedOnline li
{
    @property "sidebarFollowedUsersItem";
    margin-right: 5px;
    margin-bottom: 5px;
    float: left;
    @property "/sidebarFollowedUsersItem";
}
 
    .followedOnline .avatar
    {
        @property "sidebarFollowedUsersAvatar";
        width: 32px;
        height: 32px;
        @property "/sidebarFollowedUsersAvatar";
       
        width: auto;
        height: auto;
    }
   
        .followedOnline .avatar img
        {
            width: @sidebarFollowedUsersAvatar.width;
            height: @sidebarFollowedUsersAvatar.height;
        }
   
   
   
 
   
   
/* call to action */
 
#SignupButton
{
    @property "signupButton";
    background-color: #89c403;
    padding: 20px 33px;
    border: 0 none #74b807;
    border-radius: 2px;
    -moz-box-shadow: inset 0px 1px 0px 0px #a4e271;
    -webkit-box-shadow: inset 0px 1px 0px 0px #a4e271;
    box-shadow: inset 0px 1px 0px 0px #a4e271;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    @property "/signupButton";
}
#SignupButton:hover {background:#79ad01}
 
    #SignupButton .inner
    {
        @property "signupButtonInner";
        font-weight: bold;
        font-size: 15px;
        font-family: arial;
        color: #ffffff;
        text-decoration: none;
        padding: 6px 34px;
        text-shadow: 1px 1px 0px #528009;
        @property "/signupButtonInner";
    }
   
    #SignupButton:hover .inner
    {
        @property "signupButtonHover";
        text-decoration: none;
        position: relative;
        top: 1px;
        @property "/signupButtonHover";
    }
   
    #SignupButton:active
    {
        @property "signupButtonActive";
        background-image: url('@imagePath/xenforo/gradients/highlight_faint.png');
        background-repeat: repeat-x;
        background-position: top;
        position: relative;
        top: 1px;
        @property "/signupButtonActive";
    }

and here is the sidebar_visitor_panel template:

<xen:if is="{$visitor.user_id}">
    <div class="secondaryContent">
   
        <xen:avatar user="$visitor" size="m" img="true" />
       
        <div class="visitorText">
            <h2>{xen:phrase signed_in_as_x_sidebar, 'name={xen:helper username, $visitor, 'NoOverlay'}'}</h2>       
            <div class="stats">
            <xen:hook name="sidebar_visitor_panel_stats">
                <dl class="pairsJustified"><dt>{xen:phrase messages}:</dt> <dd>{xen:number $visitor.message_count}</dd></dl>
                <dl class="pairsJustified"><dt>{xen:phrase likes}:</dt> <dd>{xen:number $visitor.like_count}</dd></dl>
                <dl class="pairsJustified"><dt>{xen:phrase points}:</dt> <dd>{xen:number $visitor.trophy_points}</dd></dl>
            </div>
            </xen:hook>
        </div>
       
    </div>
</div>
 
<xen:else />
 
<div class="section loginButton">  </br>   
    <div class="vonsignup">
        <label for="LoginControl" id="SignupButton"><a href="{xen:link login}" class="OverlayTrigger inner">{xen:if $xenOptions.registrationSetup.enabled, {xen:phrase sign_up_now}, {xen:phrase log_in}}</a></label>
</br> </br>
        <xen:if is="{$xenOptions.facebookAppId}">
            <div class="cta_fbButton">
                <a href="{xen:link register/facebook, '', 'reg=1'}" class="fbLogin"><span>{xen:phrase login_with_facebook}</span></a>
            </div>
        </xen:if>
 
    </div>
</div>
 
</xen:if>
 
<xen:include template="ad_sidebar_below_visitor_panel" />

Apart from that I've not changed any other files during the editing I did today.

 

[xenTheory]

You can see how it looks to visitors (link in sig.) however this is how it looks when logged in:

 

[CTXMedia]

If having the default sidebar CSS available would help, just create a new style in your XF ACP and it should create the default style to use as a base - copy the sidebar.css from there to your custom style and then re-apply your changes.

 

[xenTheory]

Cheers, fixed it using you suggestion. I compared the code and missed a </div>

 

[CTXMedia]

Cheers, fixed it using you suggestion. I compared the code and missed a </div>

Nice one, glad you got it sorted - and sometimes ... it's the little things that screw it all up isn't it ...

Cheers,
Shaun

 

[Morgain]

It usually is missing a </div> for something like that.
Ive sometimes fixed it by pasting in </div> in somewhere - test by refresh on frontend - mo? return to template - Undo CTRL+Z = paste </div> in the next possible place - at the bottom is often helpful to balance out the number.
More sophisticated checks - use Chrome or a php editor to tell you there's a missing </div> and which one.

On the general art of tweaking templates there's a tutorial in my sig. Quite possible to do safely on two main rules.

1.
- NEVER delete anything NEVER NEVER NEVER
always use <xen:comment> STUFF </xen:comment> to Hide instead.
Hide a whole line of code like that then paste it in again and alter it.
Test by refresh on frontend - if wrong either try to edit it more or get a fresh start by copying the original line from the STUFF inside the <xen:comment> STUFF </xen:comment> and delete the last failed attempt.
You can also comment out the attempt so as to keep a record of what did not work.

2. Do only one small item at a time then test by refresh on frontend before going further. That way you can identify which step went wrong.

Best of all put css changes in EXTRA.css
and/ or use the TMS addon.

 

[xenTheory]

Cheers for the replies Morgain and Shaun,

@Morgain - I do use Dreamweaver and have started making templates for XF (the correct way) however my forum was the first time I'd used XF and had no idea about the template system which is why I edited the files directly. Now I do it properly though.