News for the ‘Design’ Category

Custom Login Screen for WordPress

Quick an dirty plugin to customize your wordpress admin login screen. Simply install the plugin, activate and upload your logo and background image.
Can download it here: Custom Login Plugin

Adding a custom_login() and defining the paths for the CSS.

function custom_login() {
echo '';
}
add_action('login_head', 'custom_login');

Customizing the CSS:

/* Custom Login Styles */
.background-cover{
        background:url('/wp-content/themes/custom-login/background.jpg') no-repeat center center fixed; 
        -webkit-background-size: cover; 
        -moz-background-size: cover; 
        -o-background-size: cover; 
        background-size: cover; 
        position:fixed; 
        top:0; 
        left:0; 
        z-index:10; 
        overflow: hidden; 
        width: 100%; 
        height:100%;
} 
#login{ z-index:9999; position:relative; }
.login form { box-shadow: 0px 0px 0px 0px !important; border-radius: 10px;}
.login h1 a { background:url('/wp-content/themes/custom-login/logo.png') no-repeat center top !important; display: inline-block; width:130px;} 
input.button-primary, button.button-primary, a.button-primary{ 
        border-radius: 3px !important;
        background:url('/wp-content/themes/custom-login/img/button.jpg'); 
                border:none !important;
                font-weight:normal !important;
                text-shadow:none !important;
        }

.button:active, .submit input:active, .button-secondary:active {
        background:#386CB4 !important; 
        text-shadow: none !important;
        text-decoration: underline !important;
}
input.button-primary, button.button-primary, a.button-primary{ border-color: #ccc;font-weight: bold;color: white;background: #386CB4}
.login #nav a, .login #backtoblog a {
        color:#386CB4 !important;
        text-shadow: none !important;
}
.login #nav a:hover, .login #backtoblog a:hover{
        color:#386CB4 !important;
        text-shadow: none !important;
}
.login #nav, .login #backtoblog{
        text-shadow: none !important;
}
Posted: December 17th, 2012
Categories: code, Design, tutorial
Tags:
Comments: No Comments.

elan.trybuch.com launched

So, I have had two websites running concurrently for the better part of a year. My old website, which can still be found here: www.trybuch.com/5 has not been updated in a very, very long time.

Well, I finally had some time to myself, and what better way, then to bring my new website to the forefront, and out of the closet. All I had to do was modify the .htaccess file to perform some re-directs, which made my subdomain ‘elan’ my base. You can view the new website by either clicking my ‘PORTFOLIO’ to the right, or here.

My new website is very bright and clean which is the complete oposite of my old site which was dark and gloomy. I also wanted to try a new technique for a portfolio site, namely, no navigation and ultra modern and minimal. (more on my navigation theory in a later post) You will notice that it is just a scrolling list of thumbnails, and rolling over and clicking, a lightbox appears indicating what my role on that specific project was.

I really hope you enjoy it as much as I do, there is still some work to be done and I plan on making it 100% HTML5, as well as adding microdata, and re-writing alot of the jQuery and JavaScript for a leaner cleaner and faster website.
Let me know your thoughts!

Posted: January 12th, 2012
Categories: Design
Tags:
Comments: No Comments.

Targeting with CSS specificity

I came across a situation where I needed to target an element on a page. Not having the ability to modify the JavaScript, nor the ability to add a class to the element I looked around for ways to really get specific and target a single element on the page. What I found: ‘E[foo=”warning”]’ that’s right, brackets in the CSS.

Let’s break it down. In the above example E represents the element you are targeting. This can be a class, id or tag. Example:
#myElement[foo=”warning”] – id
.myElement[foo=”warning”] – class
div[foo=”warning”] – tag

The second part of this statment is two part, the first ‘foo’ represents an attribute (height, width, title, rel, etc..) the second is the value for which you are matching so let’s say we are looking to target an img(s) on the page whose width is 1px and apply a pink border to it you could do something like:

img[width="1"]{
    border: 1px solid #f09;
}

Questions? Leave a comment.

Posted: August 16th, 2011
Categories: Design
Tags:
Comments: No Comments.

Something Cool

A good friend of mine, whom I have known for many years is putting together a movie that is going to be ‘Something Cool’. In an effort to help support him I have posted a widget here on my blog to help facilitate more financial support and success.

Check out the video which sheds more light on what this movie is all about.

Posted: March 19th, 2011
Categories: Design
Tags:
Comments: No Comments.