HOME | DD
GinkgoWerkstatt — Style: Pink Preview
Published: 2011-03-27 18:40:00 +0000 UTC; Views: 1766; Favourites: 25; Downloads: 0
Redirect to original
Description
While working on the latest journal skin it annoyed me a bit that the delete button was so bold and always wanted my attention, while the preview button - that i needed all the time - was just a tiny little text button. So i decided to change that... i am smart, right?Not sure if anyone else finds this useful, but in case anyone needs something like that as well: here it is.
Updates:03.01.2014: Updated + installable via Userstyles.org now ( i blame ^neurotype for this
)
Click here to install dA: Pink Preview
To use this style you need to have Stylish installed for your browser.
Get it here for Firefox | Chrome | Opera
Related content
Comments: 28
I've featured this as Daily Feature on the front page of #deviantART-Related
We featured your piece for today with the following description;
=The--Last--Hope says, Pink Preview by `ginkgografix may alter deviantART a tiny bit, however, It's a nice alteration that takes a little bit of negativity when editing a journal and/or blog.
Given 2011-04-30
Suggested by =The--Last--Hope
Featured by `namenotrequired
Keep it up
👍: 0 ⏩: 1
Thank you guys!! Means a lot 
👍: 0 ⏩: 1
Yaaaaaaaaay preview button. This is much more comfortable! :]
👍: 0 ⏩: 1
With the pink delte button, i always felt the urge to click that instead of preview ._.
👍: 0 ⏩: 0
I totally agree
During alpha testing (through #devBUG ), a few of us commented on that. But it seems that's what UI wanted to do it. I think they were pushing for the live preview stuff rather than the real-preview. I don't really agree (since my skin doesn't work in the live mode), but oh well
But, I have a lot of custom journal CSS right now, just to get things working better, and I styled that button, since yeah, it's very hard to click being all naked and small blue text like that.
Try this out and see how it works 
a.preview-button {
background:-moz-linear-gradient(-90deg, #E64768, #E4375B)!important;
border:1px solid #E85A78!important;
}
/* preview button hover */
a.preview-button:hover {
background:-moz-linear-gradient(-90deg, #E95A77, #E74B6C)!important;
}
/* preview button active */
a.preview-button:active {
background:-moz-linear-gradient(-90deg, #D82741, #E84B6E)!important;
}
/* text color for preview button */
.smbutton-textonly span {
color:#FFFFFF!important;
}
/* kill underline on hover */
.smbutton-textonly:hover span {
text-decoration:none!important;
}
👍: 0 ⏩: 1
Whoops yeah, lets pretend I said border:1px solid #AE1837!important;
👍: 0 ⏩: 1
Awesome, thank you. Now i just need to figure out, why it worked now, but not when i tried it 
Or maybe it was the only class combination that i didn't try
👍: 0 ⏩: 1
When I did my stuff, I remember having some issues with where to put span, and if I even needed that. But I just played with it until something worked (thank god for preview, lol).
👍: 0 ⏩: 1
Most i tried was "try & error" as well, because there are so many class combinations you have to take a loo at to finally know how to change things.
👍: 0 ⏩: 1
I usually use Firebug and just try to copy the selector exactly how I see it. It usually works, but yeah I run into strange things sometimes (like yesterday when I was using Stylish on some things, and Firefox 4 has some CSS changes, due to privacy [link] ).
👍: 0 ⏩: 1
I use it all the time for such things or open the complete CSS file, but i wasn't even able to find all needed classes. Or maybe i looked just for the wrong ones.
👍: 0 ⏩: 0
.smbutton-textonly:hover span {text-decoration: none!important;}
That will remove the underline. I'll look into the button colour too <3
👍: 0 ⏩: 1
Eh, i could swear i tried that as well
I added text-decoration: none!important nearly everywhere lol
Thank you!
👍: 0 ⏩: 1
No problemo. Looking into the hover colour thing now. Ain't that a bitch lol
👍: 0 ⏩: 1
`electricjonny fixed it
👍: 0 ⏩: 1
Huzzah! Allow me to play with your code and I'll see if I can figure out the bits with the button colour and underline
👍: 0 ⏩: 0
