Screencast: Part 11: Styling Our Edit Link for Our Custom WordPress Theme

CSS added to style edit button

[prettify]
.post-edit-link {
font-family:Arial,Helvetica,sans-serif;
font-size:14px;
color:#ffa200;
padding:10px 20px;
background:-moz-linear-gradient(top,#fff 0%,#fff 50%,#d6d6d6);
background:-webkit-gradient(linear,left top,left bottom,from(#fff),color-stop(0.50,#fff),to(#d6d6d6));
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
border:3px solid #ffbf00;
-moz-box-shadow:0 1px 3px rgba(000,000,000,0.5),inset 0 0 3px rgba(255,255,255,1);
-webkit-box-shadow:0 1px 3px rgba(000,000,000,0.5),inset 0 0 3px rgba(255,255,255,1);
box-shadow:0 1px 3px rgba(000,000,000,0.5),inset 0 0 3px rgba(255,255,255,1);
text-shadow:0 -1px 0 rgba(000,000,000,0.1),0 1px 0 rgba(255,255,255,1)
}
[/prettify]

Keyboard Shortcuts used to open Chrome Developer toolbar

ctrl + shift + i (pc)

Links used in Screencast

http://css3button.net

Download the finished files here

custom-wordpress-theme-step-11-finished

Back to Main WordPress Page with all Tutorial Links

Back to Main WordPress Page with list of tutorials on creating a WordPress custom theme from scratch.

Leave a Reply

Your email address will not be published. Required fields are marked *