Changing Closed Thread Button

[Pocket Aces]

We recently switched from vb3 to vb4 and learned that buttons are no longer images. We understand that buttons are now controlled by control_content_background stylevar. But that applies to all content buttons such Reply to Thread, Post New Thread, Closed Thread, etc.

We'd like to change the background and hover background of Closed Thread button only, how do we do that?

[tbworld]

Which close thread button are you referring to, there are a couple of them?

[Pocket Aces]

Closed Thread button in showthread
where are the other locations?

[tbworld]

Sorry, my fault. I see what you are asking. I read "close" thread. BRB.

--------------- Added 06 Nov 2013 at 02:52 ---------------

Edit the "SHOWTHREAD" template
Templates might vary from version to version, so double check.

(Top Buttons)

Search

    <a href="{vb:raw $vboptions.vbforum_url}{vb:if "$vboptions['vbforum_url']", '/', ''}newreply.php?{vb:raw session.sessionurl}p={vb:raw LASTPOSTID}&amp;noquote=1"class="newcontent_textcontrol"    id="newreplylink_top"><vb:if condition="$show['closethread']"><span>+</span> {vb:rawphrase reply_to_thread}<vb:else />{vb:rawphrase closed_thread}</vb:if></a>

Replace

  <vb:comment>
    <a href="{vb:raw $vboptions.vbforum_url}{vb:if "$vboptions['vbforum_url']", '/', ''}newreply.php?{vb:raw session.sessionurl}p={vb:raw LASTPOSTID}&amp;noquote=1" class="newcontent_textcontrol"    id="newreplylink_top"><vb:if condition="$show['closethread']"><span>+</span> {vb:rawphrase reply_to_thread}<vb:else />{vb:rawphrase closed_thread}</vb:if></a>
  </vb:comment>
    <a href="{vb:raw $vboptions.vbforum_url}{vb:if "$vboptions['vbforum_url']", '/', ''}newreply.php?{vb:raw session.sessionurl}p={vb:raw LASTPOSTID}&amp;noquote=1" class="" id="newreplylink_top">
        <vb:if condition="$show['closethread']">
            <span class="reply_thread_button">+ {vb:rawphrase reply_to_thread}</span>
        <vb:else />
            <span class="closed_thread_button">{vb:rawphrase closed_thread}</span>
        </vb:if>
    </a>

(Bottom Buttons)

Search

    <a href="{vb:raw $vboptions.vbforum_url}{vb:if "$vboptions['vbforum_url']", '/', ''}newreply.php?{vb:raw session.sessionurl}p={vb:raw LASTPOSTID}&amp;noquote=1"class="newcontent_textcontrol"    id="newreplylink_top"><vb:if condition="$show['closethread']"><span>+</span> {vb:rawphrase reply_to_thread}<vb:else />{vb:rawphrase closed_thread}</vb:if></a>

Replace

  <vb:comment>
    <a href="{vb:raw $vboptions.vbforum_url}{vb:if "$vboptions['vbforum_url']", '/', ''}newreply.php?{vb:raw session.sessionurl}p={vb:raw LASTPOSTID}&amp;noquote=1" class="newcontent_textcontrol"    id="newreplylink_bottom"><vb:if condition="$show['closethread']"><span>+</span> {vb:rawphrase reply_to_thread}<vb:else />{vb:rawphrase closed_thread}</vb:if></a>
  </vb:comment>
    <a href="{vb:raw $vboptions.vbforum_url}{vb:if "$vboptions['vbforum_url']", '/', ''}newreply.php?{vb:raw session.sessionurl}p={vb:raw LASTPOSTID}&amp;noquote=1" class="" id="newreplylink_bottom">
        <vb:if condition="$show['closethread']">
            <span class="reply_thread_button">+ {vb:rawphrase reply_to_thread}</span>
        <vb:else />
            <span class="closed_thread_button">{vb:rawphrase closed_thread}</span>
        </vb:if>
    </a>

Modify the CSS accordingly and add this to your "additionalcss" template.

.closed_thread_button {
    background: url("images/buttons/newbtn_middle.png") repeat-x scroll left top #417394;
    position: relative;     
    border: 0 none;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 3px 8px #DDDDDD;
    clear: right;
    color: #FFFFFF;
    display: block;
    float: left;
    font: 14px Arial,sans-serif;
    padding: 4px 15px;
    
    background: red;    
}

.reply_thread_button {
    background: url("images/buttons/newbtn_middle.png") repeat-x scroll left top #417394;
    position: relative;     
    sborder: 0 none;
    sborder-radius: 10px 10px 10px 10px;
    sbox-shadow: 0 3px 8px #DDDDDD;
    sclear: right;
    scolor: #FFFFFF;
    sdisplay: block;
    sfloat: left;
    sfont: 14px Arial,sans-serif;
    spadding: 4px 15px;
  
    background: blue;    
}

Hope this helps

[Pocket Aces]

thanks tbworld, we'll give it a try

[tbworld]

With this method you could change the CSS background property and load a seperate image instead of a CSS generated button. I put it together quickly and verbosely so you can see the modifications. The are other (more elegant) ways to handle this, but I wanted to keep it simple.