• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.
Attachment Enhancement

Attachment Enhancement

Shelley

Well-known member
#1
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...
 

Shelley

Well-known member
#4
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.

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

oman

Well-known member
#5
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

Well-known member
#6
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

Well-known member
#7
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

Well-known member
#8
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;
}
 

Attachments

kankan

Active member
#11
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
 

kankan

Active member
#13
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;
}
 

Shelley

Well-known member
#14
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

Well-known member
#15
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;
}
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!

:)
 

Shelley

Well-known member
#16
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 ?


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.

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

Shelley

Well-known member
#17
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 ?


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

Well-known member
#18
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

Well-known member
#19
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.....

:)