Attachment Enhancement

[Shelley]

Shelley submitted a new resource:

Attachment Enhancement (version v1) - Attachment Enhancement

Attachment Enhancement

Summary: This alteration will change the visuals of your attachment area into a green monstrosity of nature. Since I made the alteration at bbsmiley.com I though it might be something some people will like to apply onto their own forums.
Related release: Sidebar Enhancements

Preview:...

Read more about this resource...

 

[DRE]

Thank you for this!

 

[fredrikse]

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

 

[Shelley]

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

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

.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;
}

 

[oman]

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.

 

[Shelley]

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.

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?

 

[Sheldon]

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.

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.

 

[Shelley]

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.

.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;
}

 

[oman]

Thanks Shelley!

 

[oman]

Added to forum, and looks great!:

 

[kankan]

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?

 

[Shelley]

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?

View attachment 44388

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

.attachment {
width: 33%; }

 

[kankan]

Just found it

Here is my code for Orange theming.
No gradient sadly, not enough graphic skill

.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;
}

 

[Shelley]

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.

 

[erich37]

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

.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;
}

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

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 ?





Appreciate your help. Many thanks!

 

[Shelley]

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

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 ?


View attachment 44457


Appreciate your help. Many thanks!

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

.message .like, .message .ReplyQuote, .message .privateControls .muted, message .deleteSpam {
background-color: red;}

 

[Shelley]

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

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 ?


View attachment 44457


Appreciate your help. Many thanks!

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)

 

[Shelley]

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

.message .like, .message .ReplyQuote, .message .privateControls .muted, message .deleteSpam {
background-color: red;}

 

[erich37]

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.....

 

[erich37]

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

Thanks!