xFShout - How to style sticky message using CSS?

[TheJoshy]

Hi there,

Not sure if we're allowed to post support questions on add-ons, but anyway, here it is.

Right, so I have two templates for the xFShout add-on, which I have manipulated a little.

The current dbtech_xfshout_box_wrapper code is this:

<div class="section sectionMain">
    <form id="xFShout{$instance.instance_id}" action="{xen:link 'xfshout/add'}" method="post">
 
    <table class="dataTable">
   
        <col style="width:100%; word-wrap:normal;" />
 
        <tr class="dataRow">
            <td valign="top"><div id="dbtech_xfshout_sticky{$instance.instance_id}"<xen:if is="{$permissions.cansetsticky}"> ondblclick="XenForo.xFShout{$instance.instance_id}.editSticky();"</xen:if>>{xen:raw $instance.sticky_parsed}</td>
        </tr>
        <tr class="dataRow">
            <td valign="top"><div id="dbtech_xfshout_content{$instance.instance_id}" style="height:{$instance.options.height}px; overflow:auto;"><em>Loading...</em></div></td>
        </tr>
        <xen:if is="{$permissions.canshout}">
        <tr class="dataRow">
            <td valign="top">
            <input type="hidden" name="_xfToken" value="{$visitor.csrf_token_page}" />
            <input type="hidden" name="_instance_id" value="{$instance.instance_id}" />
            <input type="hidden" name="_sticky" value="{xen:raw $instance.sticky}" />
            <div style="margin-top: 10px;">
                <input type="text" class="textCtrl" name="shout" style="width:100%;" maxlength="{xen:raw $instance.options.maxlength}" placeholder="{xen:phrase dbtech_xfshout_type_shout_here}" />
                <span style="float:left">
                    <input type="button" name="submit" class="button" value="{xen:phrase dbtech_xfshout_shout}" />
                    <input type="button" name="delete" class="button" value="{xen:phrase delete}" style="display:none;" />
                    <input type="button" name="cancel" class="button" value="{xen:phrase cancel}" style="display:none;" />
                </span>
            </div>           
            </td>
        </tr>
        </xen:if>
    </table>
    </form>
</div>
<script type="text/javascript" src="js/dbtech/xfshout/xfshout.js"></script>
<script type="text/javascript">
<!--
XenForo.xFShout{$instance.instance_id} = new XenForo.xFShout($("#xFShout{$instance.instance_id}"), {$instance.options.refreshtime}, {$instance.instance_id});
$("#xFShout{$instance.instance_id}").data('XenForo.xFShout{$instance.instance_id}', XenForo.xFShout{$instance.instance_id});
 
jQuery.extend(XenForo.phrases,
{
    dbtech_xfshout_saving_shout: "{xen:jsescape {xen:phrase dbtech_xfshout_saving_shout}}",
    dbtech_xfshout_editing_shout: "{xen:jsescape {xen:phrase dbtech_xfshout_editing_shout}}",
    dbtech_xfshout_editing_sticky: "{xen:jsescape {xen:phrase dbtech_xfshout_editing_sticky}}",
    dbtech_xfshout_deleting_shout: "{xen:jsescape {xen:phrase dbtech_xfshout_deleting_shout}}",
    dbtech_xfshout_fetching_shouts: "{xen:jsescape {xen:phrase dbtech_xfshout_fetching_shouts}}",
    dbtech_xfshout_fetching_shouts_in_x_seconds: "{xen:jsescape {xen:phrase dbtech_xfshout_fetching_shouts_in_x_seconds}}",
});
//-->
</script>

Now, what I want is the sticky message to have this styling:

.shout_box {
  background:-moz-linear-gradient(top,#FFFFFF,#F3F3F3);
  background:-webkit-gradient(linear,left top,left bottom,from(#FFFFFF),to(#F3F3F3));
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF',endColorstr='#F3F3F3');
  padding: 7px;
  border: 1px solid #CCC;
  border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -khtml-border-radius: 5px;
  margin: -10px 0px 10px 0px;
}

This is the dbtech_xfshout_shouts template:

<ol>
<xen:foreach loop="$shouts" value="$shout">
    <li id="dbtech_xfshout_message_{xen:raw $shout.shoutid}"<xen:if is="({$shout.userid} == {$visitor.user_id} AND {$permissions.caneditown}) OR ({$shout.userid} != {$visitor.user_id} AND {$permissions.caneditothers})"> ondblclick="javascript:XenForo.xFShout{$instanceid}.editShout({xen:raw $shout.shoutid});"</xen:if>>
        <input type="hidden" name="message_raw{xen:raw $shout.shoutid}" value="{xen:raw $shout.message}" />
        [<span class="DateTime muted">{xen:raw $shout.dateline_parsed}</span>]
        <xen:if is="{$shout.type} == 4">*</xen:if>
        <a <xen:if is="{$shout.userid} > 0">href="{xen:link members, $shout}" </xen:if>class="username" itemprop="name">{xen:helper richUserName, $shout}</a><xen:if is="{$shout.type} != 4">:</xen:if>
        {xen:raw $shout.message_parsed}
        <xen:if is="{$shout.type} == 4">*</xen:if>
    </li>
</xen:foreach>
</ol>

I am using the Uniform style by XenFocus.

Any more info needed, then let me know.

 

[Jake Bunce]

Do you have a URL showing a shoutbox with a sticky post?

 

[TheJoshy]

Do you have a URL showing a shoutbox with a sticky post?

http://ourhiddenplace.com/ - you may have to register an account.

 

[Jake Bunce]

I registered. Where is a sticky shout?

 

[TheJoshy]

I registered. Where is a sticky shout?

I updated the sticky to show you. Thanks.

 

[Jake Bunce]

The sticky has an id of dbtech_xfshout_sticky1, so you can use this CSS selector:

#dbtech_xfshout_sticky1
{
  background:-moz-linear-gradient(top,#FFFFFF,#F3F3F3);
  background:-webkit-gradient(linear,left top,left bottom,from(#FFFFFF),to(#F3F3F3));
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF',endColorstr='#F3F3F3');
  padding: 7px;
  border: 1px solid #CCC;
  border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -khtml-border-radius: 5px;
  margin: -10px 0px 10px 0px;
}

 

[TheJoshy]

The sticky has an id of dbtech_xfshout_sticky1, so you can use this CSS selector:

#dbtech_xfshout_sticky1
{
  background:-moz-linear-gradient(top,#FFFFFF,#F3F3F3);
  background:-webkit-gradient(linear,left top,left bottom,from(#FFFFFF),to(#F3F3F3));
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF',endColorstr='#F3F3F3');
  padding: 7px;
  border: 1px solid #CCC;
  border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -khtml-border-radius: 5px;
  margin: -10px 0px 10px 0px;
}

Right, and where do I put that CSS?

Sorry, I am so very hopeless with this... but thank you so much for the help

 

[Jake Bunce]

Admin CP -> Appearance -> Templates -> EXTRA.css

 

[TheJoshy]

Thanks! Worked a treat.