In my last tutorial I showed you how to convert urban artist, a theme by styleshout. It messes up the c5 interface quite a bit though, so ill show you how to fix it and for other themes.

Problems

The concrete5 logo looks weird, the tabs look wierd, and the links have a border under them. Lets start with fixing the logo. Since the concrete5 logo is an image, I looked in the css file and found this

img { background: #1B1B1B;   border: 1px solid #1B1B1B; padding: 6px;}

This css is for any image. There are several ways that we could solve this. First, you could just delete it and the problem would go away. This would work, but then it wouldn't be applied to other images on the page.

Another way that we could solve it is by wrapping it in a div. If you only target imgs in the div page, then it wouldn't target the edit bar, but would still apply to the theme. I looked in the php file and found there is already a div like that- wrap. so if we call #wrap before image like this

#wrap img { background: #1B1B1B;   border: 1px solid #1B1B1B; padding: 6px;}

There are still a couple things wrong with it though- the links and the form. if we attach #wrap to them it should work. For the links I used

#wrap a, a:visited {
text-decoration: none;
color: #BEBEBE; 
}
#wrap a:hover {
color: #fff;
border-bottom: 1px dotted #438800;
}

and for the form i used

#wrap form {
margin: 20px 10px; 
padding: 15px 25px 25px 20px; 
background: #070707;    
border: 1px solid #111; 
}

#wrap form p {
border-bottom: 1px solid #101010;
padding: 12px 0 5px 0;  margin: 0;  
}

#wrap label {
font-weight: bold;  
color: #FAFAFA;
}

#wrap input, select, textarea {
margin: 5px 0;
padding: 5px;
font: normal 1em Verdana, Tahoma, sans-serif;
color: #6A6969;
background: #0C0C0C;  
border: 1px solid #1C1C1C;
}

#wrap option { padding-right: 0.5em; } 
#wrap #name, #email, #message{
width: 480px;
}
#wrap input.button { 
font: bold 12px Arial, Verdana, Sans-serif; 
height: 30px;
padding: 2px 3px; 
margin-top: 8px;
color: #48780E;
background: #000;
border-width: 1px;
border-style: solid;
border-color: #1B1B1B;
}

since we want to target all elements of the form.

It should now work perfectly.