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

Styling element for bar in premoderated posts?

Discussion in 'Styling and Customization Questions' started by fredrikse, Sep 13, 2012.

  1. fredrikse

    fredrikse Active Member

    Hi,

    Whatt CSS code should I look for to alter the "bar" in a premoderaated post? I want to shorten the bar a little bit to not interfere with the "new" tag.

    pre_moderation.JPG
     
  2. fredrikse

    fredrikse Active Member

    Maybe this is the CSS code I was looking for? :)

    Code:
    .messageNotices li
        {
            @property "messageNotice";
            font-size: 11px;
            background: @secondaryLighter url('@imagePath/xenforo/gradients/form-button-white-25px.png') repeat-x top;
            padding: 5px;
            margin: 10px 0;
            border: 1px solid @secondaryLighter;
            border-radius: 5px;
            line-height: 16px;
            @property "/messageNotice";
        }
     
            .messageNotices .icon
            {
                float: right;
                width: 16px;
                height: 16px;
                background: url('@imagePath/xenforo/xenforo-ui-sprite.png') no-repeat 1000px 1000px;
            }
     
                .messageNotices .warningNotice .icon { background-position: -48px -32px; }     
                .messageNotices .deletedNotice .icon { background-position: -64px -32px; }     
                .messageNotices .moderatedNotice .icon {background-position: -32px -16px; }
     
  3. fredrikse

    fredrikse Active Member

    This code did it:

    Code:
    .messageNotices li
    {
            @property "messageNotice";
            font-size: 11px;
            width: 95%;
            background: @secondaryLighter url('@imagePath/xenforo/gradients/form-button-white-25px.png') repeat-x top;
            padding: 5px;
            margin: 10px 0;
            border: 1px solid @secondaryLighter;
            border-radius: 5px;
            line-height: 16px;
            @property "/messageNotice";
    }
    premod.jpg

    I just added the width parameter to get it right and at the same time I learned how to search for code for the design elements I want to alter :)
     

Share This Page