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

Attachment Enhancement

Attachment Enhancement

  1. Shelley

    Shelley Well-Known Member

    Shelley submitted a new resource:

    Attachment Enhancement (version v1) - Attachment Enhancement

    Read more about this resource...
     
  2. DRE

    DRE Well-Known Member

    Thank you for this!
     
  3. fredrikse

    fredrikse Active Member

    I think you are doing great with the graphics here! How is the CSS done for the "reply" button? It looks really good.
     
  4. Shelley

    Shelley Well-Known Member

    Paste in EXTRA.css template and modify to your preference.

    Code:
    .message .reply, .message .hashPermalink, .message .warn, .message .report,
     .message .ip, .message .delete, .message .edit{
       background-color: green;
       padding: 3px 5px;
       color: white;
       border-radius: 3px;
       border: 1px solid white;
       box-shadow: 0 0 2px #282828;
    }
    
    .message .reply:hover, .message .hashPermalink:hover, .message .warn:hover, 
    .message .report:hover, .message .ip:hover, .message .delete:hover, 
    .message .edit:hover {
        -moz-transition: all 0.3s ease-in-out 0s;
        -o-transition: all 0.3s ease-in-out 0s;
        -webkit-transition: all 0.3s ease-in-out 0s;
        opacity: 0.5;
        text-decoration: none !important;
    }
    
    
     
    erich37 likes this.
  5. oman

    oman Well-Known Member

    Hi Shelley,

    I know you posted this a while ago, but is there any chance you could do a blue alternative for me, like you did for the message enhancement?

    I would love to implement this on my forum.
     
  6. Shelley

    Shelley Well-Known Member

    Sure, next time I log into my dev site I'll apply the enhancement and work on a blue variation. Any specific blue you wanted?
     
  7. Sheldon

    Sheldon Well-Known Member

    Just use the blue colors you used for the title enhancement. It's better to learn like that. Trial and error will teach you quite a bit.
     
  8. Shelley

    Shelley Well-Known Member

    Went ahead and did the blue. But stewart said it best it's better to tinker and experiment. Anyhow, here's the blue gradient attachment enhancement.

    attachenhancement-preview.png

    Code:
    .attachedFiles {
        border: 1px solid #457ac4 !important;
        margin: 1em 0px 1em 0 !important;
    }
     
    .attachedFiles .attachedFilesHeader {
     
        background: none repeat-x scroll center top #c1dbff !important;
        border-bottom: 0px solid #A5CAE4 !important;
        color: #234575 !important;
        font-family: 'Trebuchet MS',Helvetica,Arial,sans-serif;
        font-size: 11px;
    }
     
    .attachedFiles .attachmentList {
        background: none repeat-x scroll center top #c1dbff !important;
        border-radius: 0px 0px 5px 5px !important;
        overflow: hidden;
        padding: 5px 10px 0 !important;
    }
     
    .attachment .boxModelFixer {
        background-color: none !important;
        background:url("@imagePath/xenforo/gradients/attach-gradient.png") repeat-x scroll center bottom #83b842 !important;
        border: 1px solid #3869ae !important;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 0 0 1px rgba(255, 255, 255, 0.2) inset, 0 1px 0 rgba(255, 255, 255, 0.5);
        border-radius: 5px 5px 5px 5px;
        color: white;
        font: bold 12px/12px Arial,sans-serif !important;
        text-shadow: 0 -1px 0 #2e5103 !important;
        padding: 5px;
    }
     
    .attachment .thumbnail {
        border-right: 1px solid #2e5a98 !important;
        box-shadow: 1px 0px 0px 0px #6b9adb;
    }
     
    .attachment .attachmentInfo .filename a {
        text-shadow:  0 -1px 0 #a0c0ed;
        font: bold 12px/16px Arial,sans-serif;
        color: #1d3b66 !important;
    }
     
    .attachment .boxModelFixer .pairsJustified dt {
        color: white !important;
    }
     
    .attachment .thumbnail .genericAttachment {
        background: url("@imagePath/xenforo/icons/download.png") no-repeat scroll 0 0 transparent !important;
    }
    
     

    Attached Files:

    Sheldon likes this.
  9. oman

    oman Well-Known Member

    Thanks Shelley! :)
     
  10. oman

    oman Well-Known Member

    Added to forum, and looks great!:

    [​IMG]
     
    Shelley likes this.
  11. kankan

    kankan Active Member

    Re Shelley, browsing your mods :)
    Thank you for this theming.

    I am using a "Orange" version :

    Do you know a way to extend the width of the whole block?

    index.png
     
    Shelley likes this.
  12. Shelley

    Shelley Well-Known Member

    Look for the class or add it if it's not present .attachment and adjust the width accordingly to your preference.

    Code:
    .attachment {
    width: 33%; }
     
    kankan likes this.
  13. kankan

    kankan Active Member

    Just found it :)

    Here is my code for Orange theming.
    No gradient sadly, not enough graphic skill ;)
    Code:
    .attachedFiles {
        border: 1px solid #e68c17!important;
        margin: 1em 0px 1em 0 !important;
    }
     
    .attachedFiles .attachedFilesHeader {
     
        background: none repeat-x scroll center top #fff4e5!important;
        border-bottom: 0px solid #A5CAE4 !important;
        color: #3f5426 !important;
        font-family: 'Trebuchet MS',Helvetica,Arial,sans-serif;
        font-size: 11px;
    }
     
    .attachedFiles .attachmentList {
        background: none repeat-x scroll center top #fff4e5!important;
        border-radius: 0px 0px 5px 5px !important;
        overflow: hidden;
        padding: 5px 10px 0 !important;
    }
     
    .attachment .boxModelFixer {
        background-color: none !important;
        background:url("@imagePath/xenforo/gradients/attach-gradient.png") repeat-x scroll center bottom #e68c17!important;
        border: 1px solid #646464!important;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 0 0 1px rgba(255, 255, 255, 0.2) inset, 0 1px 0 rgba(255, 255, 255, 0.5);
        border-radius: 5px 5px 5px 5px;
        color: white;
        font: bold 12px/12px Arial,sans-serif !important;
     
        padding: 5px;
    }
     
    .attachment .thumbnail {
        border-right: 1px solid #f7d09d!important;
        box-shadow: 1px 0px 0px 0px #fff4e5;
    }
     
    .attachment .attachmentInfo .filename a {
     
        font: bold 12px/16px Arial,sans-serif;
        color: #6d3f03!important;
    }
     
    .attachment .boxModelFixer .pairsJustified dt {
        color: white !important;
    }
     
    .attachment .thumbnail .genericAttachment {
        background: url("@imagePath/xenforo/icons/download.png") no-repeat scroll 0 0 transparent !important;
    }
     
  14. Shelley

    Shelley Well-Known Member

    you could make your orange a little darker and apply the xenforo gradient

    background: url("styles/default/xenforo/gradients/category-23px-light.png") repeat-x scroll center top e68c17;

    Just make the orange you set slightly darker so you get more of a transition between the colouring and light gradient. Honestly though, your attachment box looks good enough to me.
     
    kankan likes this.
  15. erich37

    erich37 Well-Known Member

    I do not need the style for the attachments right now, but I totally love the CSS you have made for the buttons (y)

    Could you please help with the code for the other buttons which seem to be missing (username, date, spam, like) ?
    How to make the "username + date" and "Reply" + "Like" in e.g. red color and have all other buttons in green color ?


    buttonstyle.jpg


    Appreciate your help. Many thanks!

    :)
     
  16. Shelley

    Shelley Well-Known Member

    Below should do that (haven't tested it) for you but you would need to apply your styling and padding, border etc etc.

    Code:
    .message .like, .message .ReplyQuote, .message .privateControls .muted, message .deleteSpam {
    background-color: red;}
     
    erich37 likes this.
  17. Shelley

    Shelley Well-Known Member

    I couldn't find the spam button on my site when i posted the above css but i finally located it from a members post and it's not .spam it's .deleteSpam which I'll correct in the code (above)
     
    erich37 likes this.
  18. Shelley

    Shelley Well-Known Member

    Here's the full working css I had to also change .item to .muted

    Code:
    .message .like, .message .ReplyQuote, .message .privateControls .muted, message .deleteSpam {
    background-color: red;}
    
     
    erich37 likes this.
  19. erich37

    erich37 Well-Known Member

    Hi Shelley,

    do you know of a way to apply this button-style and also the hover-effect onto the "Sign up Now"-button and the "Post New Thread"-button ?
    I think that would look nicer and also would have a better button-behaviour.....

    :)
     
  20. erich37

    erich37 Well-Known Member

    where do I actually find the files named attach-gradient.png and download.png ?

    Thanks!

     

Share This Page