1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

xFShout - How to style sticky message using CSS?

Discussion in 'Styling and Customization Questions' started by TheJoshy, Nov 11, 2012.

  1. TheJoshy

    TheJoshy Member

    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:
    PHP:
    <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:
    Code:
    .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:
    PHP:
    <ol>
    <
    xen:foreach loop="$shoutsvalue="$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>
            <
    <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. :)
     
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Do you have a URL showing a shoutbox with a sticky post?
     
  3. TheJoshy

    TheJoshy Member

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

    Jake Bunce XenForo Moderator Staff Member

    I registered. Where is a sticky shout?
     
  5. TheJoshy

    TheJoshy Member

    I updated the sticky to show you. :) Thanks.
     
  6. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

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

    Code:
    #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;
    }
    
     
  7. TheJoshy

    TheJoshy Member

    Right, and where do I put that CSS?

    Sorry, I am so very hopeless with this... but thank you so much for the help :D
     
  8. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

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

    TheJoshy Member

    Thanks! Worked a treat.
     

Share This Page