• Welcome to ForumKorner!
    Join today and become a part of the community.

Professional GFX Work

Chrisu

Active Member
Reputation
0
I need two things, for my site.

Userbars:

Administrator
Moderator
Staff
Donator
Member

I need a theme, I can give you the .CSS to my current theme, so you my edit it and fine tune it to how you think it would look good, then PM it back to me.

Here it is in code

Code:
body {
	background: #222 url(images/night/bg.png);
	color: #000;
	text-align: center;
	line-height: 1.4;
	margin: 0;
	
	font-family: Tahoma, Verdana, Arial, Sans-Serif;
	font-size: 13px;
}

a:link {
	color: #555;
	text-decoration: none;
}

a:visited {
	color: #444;
	text-decoration: none;
}

a:hover, a:active {
	color: #000;
	text-decoration: underline;
}

#container {
	color: #000;
	text-align: left;
	line-height: 1.4;
	margin: 0;
	font-family: Tahoma, Verdana, Arial, Sans-Serif;
	font-size: 13px;
}

.wrapper {
	width: 85%;
	min-width: 970px;
	max-width: 1500px;
	margin: auto auto;
}

#logo {
	background: #022338 url(images/night/header.png) top left repeat-x;
	border-bottom: 1px solid #011929;
}

#content {
	background: #fff;
	width: auto !important;
	padding: 20px 10px;
	overflow: hidden;
	border-bottom: 1px solid #000;
}

#panel ul.menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

#panel ul.menu li {
	margin: 0 5px;
	display: inline;
}

#panel ul.menu li a {
	padding-left: 20px;
	background-repeat: no-repeat;
	background-position: left center;
}

#panel .upper ul.top_links {
	float: right;
	font-weight: bold;
}

#panel .upper ul.top_links a.search {
	background-image: url(images/night/icons/search.gif);
}

#panel .upper ul.top_links a.memberlist {
	background-image: url(images/night/icons/memberlist.gif);
}

#panel .upper ul.top_links a.calendar {
	background-image: url(images/night/icons/calendar.gif);
}

#panel .upper ul.top_links a.help {
	background-image: url(images/night/icons/help.gif);
}

#panel .upper a.logout {
	font-weight: bold;
	background: url(images/night/icons/logout.gif) right no-repeat;
	padding-right: 20px;
	margin-left: 10px;
}

#panel .upper a.login,
#panel .upper a.lost_password {
	background: url(images/night/icons/login.gif) no-repeat;
	padding-left: 20px;
	margin-left: 10px;
	font-weight: bold;
}

#panel .upper a.register {
	background: url(images/night/icons/logout.gif) right no-repeat;
	padding-right: 20px;
	margin-left: 10px;
	font-weight: bold;
}

#panel .lower ul.panel_links {
	float: left;
}

#panel .lower ul.panel_links a.usercp {
	background-image: url(images/night/icons/usercp.gif);
}

#panel .lower ul.panel_links a.modcp {
	background-image: url(images/night/icons/modcp.gif);
}

#panel .lower ul.panel_links a.admincp {
	background-image: url(images/night/icons/admincp.gif);
}

#panel .lower ul.user_links {
	float: right;
}

#panel .lower ul.user_links li a {
	padding: 0;
}

#panel .upper {
	background: #0f0f0f url(images/night/tcat.png) repeat-x;
	color: #fff;
	border-top: 1px solid #444;
	border-bottom: 1px solid #000;
	padding: 7px;
}

#panel .upper a:link,
#panel .upper a:visited,
#panel .upper a:hover,
#panel .upper a:active {
	color: #fff;
}

#panel .lower {
	background: #efefef;
	color: #999;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #ccc;
	overflow: hidden;
	padding: 5px;
}

#panel .lower a:link,
#panel .lower a:visited {
	color: #666;
}

#panel .lower a:hover,
#panel .lower a:active {
	color: #333;
	text-decoration: none;
}

#panel .remember_me input {
	vertical-align: middle;
	margin: -3px 0 0 5px;
}

#panel input {
	margin: -3px 0;
}

#panel input.button {
	padding: 0;
}

#footer ul.menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

#footer ul.menu li {
	margin: 0 5px;
	display: inline;
}

#footer .upper {
	background: #0f0f0f url(images/night/tcat.png) repeat-x;
	padding: 6px;
	overflow: hidden;
	
	font-size: 12px;
}

#footer a:link,
#footer a:visited {
	color: #aaa;
}

#footer a:hover,
#footer a:active {
	color: #fff;
	text-decoration: none;
}

#footer .upper .language {
	float: right;
	margin: -2px;
}

#footer .upper .language select {
	border-color: #000;
}

#footer .upper ul.bottom_links {
	float: left;
	margin: 3px 0 0 -5px;
}

#footer .lower {
	background: #022338 url(images/night/thead.png) top left repeat-x;
	color: #fff;
	border-top: 1px solid #000;
	border-bottom: 1px solid #011929;
	overflow: hidden;
	padding: 6px;
	font-size: 11px;
}

#footer .lower a:link,
#footer .lower a:visited {
	color: #fff;
	font-weight: bold;
}

#footer .lower a:hover,
#footer .lower a:active {
	color: #fff;
	text-decoration: underline;
	font-weight: bold;
}

#footer .lower #current_time {
	float: right;
}

fieldset {
	border: 1px solid #ddd;
}

table {
	color: #000000;
	font-size: 13px;
}

.tborder {
	background: #fff;
	width: 100%;
	margin: auto auto;
	border: 1px solid #ccc;
	padding: 1px;
}

.thead {
	background: #022338 url(images/night/thead.png) top left repeat-x;
	color: #ffffff;
	border-bottom: 1px solid #011929;
	padding: 8px;
}

.thead a:link {
	color: #ffffff;
	text-decoration: none;
}

.thead a:visited {
	color: #ffffff;
	text-decoration: none;
}

.thead a:hover, .thead a:active {
	color: #ffffff;
	text-decoration: underline;
}

.tcat {
	background: #0f0f0f url(images/night/tcat.png) repeat-x;
	color: #fff;
	border-top: 1px solid #444;
	border-bottom: 1px solid #000;
	padding: 6px;
	
	font-size: 12px;
}

.tcat a:link {
	color: #fff;
}

.tcat a:visited {
	color: #fff;
}

.tcat a:hover, .tcat a:active {
	color: #fff;
}

.trow1 {
	background: #f5f5f5;
	border: 1px solid;
	border-color: #fff #ddd #ddd #fff;
}

.trow2 {
	background: #efefef;
	border: 1px solid;
	border-color: #fff #ddd #ddd #fff;
}

.trow_shaded {
	background: #ffdde0;
	border: 1px solid;
	border-color: #fff #ffb8be #ffb8be #fff;
}

.trow_selected td {
	background: #FFFBD9;
	color: #000;
	border-right-color: #F7E86A;
	border-bottom-color: #F7E86A;
}

.trow_selected td a:link,
.trow_selected td a:visited,
.trow_selected td a:hover,
.trow_selected td a:active {
	color: #000;
}

.trow_sep {
	background: #ddd;
	color: #000;
	border-bottom: 1px solid #c5c5c5;
	padding: 6px;
	font-size: 12px;
	font-weight: bold;
}

.tfoot {
	background: #022338 url(images/night/thead.png) top left repeat-x;
	color: #ffffff;
	border-top: 1px solid #fff;
	padding: 6px;
}

.tfoot a:link {
	color: #ffffff;
	text-decoration: none;
}

.tfoot a:visited {
	color: #ffffff;
	text-decoration: none;
}

.tfoot a:hover, .tfoot a:active {
	color: #ffffff;
	text-decoration: underline;
}

.thead input.textbox,
.thead select,
.tfoot input.textbox,
.tfoot select {
	border: 1px solid #011929;
}

.bottommenu {
	background: #efefef;
	color: #000000;
	border: 1px solid #4874a3;
	padding: 10px;
}

.navigation {
	color: #000000;
	font-size: 12px;
}

.navigation a:link {
	text-decoration: none;
}

.navigation a:visited {
	text-decoration: none;
}

.navigation a:hover, .navigation a:active {
	text-decoration: none;
}

.navigation .active {
	color: #000000;
	font-size: small;
	font-weight: bold;
}

.smalltext {
	font-size: 11px;
}

.largetext {
	font-size: 16px;
	font-weight: bold;
}

input.textbox {
	background: #ffffff;
	color: #000000;
	border: 1px solid #ccc;
	padding: 3px;
	
	font-family: Tahoma, Verdana, Arial, Sans-Serif;
}

textarea {
	background: #ffffff;
	color: #000000;
	border: 1px solid #ccc;
	padding: 2px;
	line-height: 1.4;
	
	font-family: Tahoma, Verdana, Arial, Sans-Serif;
	font-size: 13px;
}

select {
	background: #ffffff;
	padding: 3px;
	border: 1px solid #ccc;
	
	font-family: Tahoma, Verdana, Arial, Sans-Serif;
}

input.button {
	padding: 2px;
	cursor: pointer;
	font-family: Tahoma, Verdana, Arial, Sans-Serif;
}

.editor {
	background: #f1f1f1;
	border: 1px solid #ccc;
}

.editor_control_bar {
	background: #fff;
	border: 1px solid #ccc;
}

.autocomplete {
	background: #fff;
	color: black;
	border: 1px solid #ccc;
	padding: 1px;
}

.autocomplete_selected {
	background: #023a61;
	color: #fff;
}

.popup_menu {
	background: #fff;
	border: 1px solid #ccc;
}

.popup_menu .popup_item {
	background: #efefef;
	color: #000;
}

.popup_menu .popup_item:hover {
	background: #023a61;
	color: #fff;
}

.trow_reputation_positive {
	background: #ccffcc;
}

.trow_reputation_negative {
	background: #ffcccc;
}

.reputation_positive {
	color: green;
}

.reputation_neutral {
	color: #444;
}

.reputation_negative {
	color: red;
}

.invalid_field {
	border: 1px solid #f30;
	color: #f30;
}

.valid_field {
	border: 1px solid #0c0;
}

.validation_error {
	background: url(images/invalid.gif) no-repeat center left;
	color: #f30;
	margin: 5px 0;
	padding: 5px;
	font-weight: bold;
	font-size: 11px;
	padding-left: 22px;
}

.validation_success {
	background: url(images/valid.gif) no-repeat center left;
	color: #00b200;
	margin: 5px 0;
	padding: 5px;
	font-weight: bold;
	font-size: 11px;
	padding-left: 22px;
}

.validation_loading {
	background: url(images/spinner.gif) no-repeat center left;
	color: #555;
	margin: 5px 0;
	padding: 5px;
	font-weight: bold;
	font-size: 11px;
	padding-left: 22px;
}

/* Additional CSS (Master) */
img {
	border: none;
}

.clear {
	clear: both;
}

.hidden {
	display: none;
	float: none;
	width: 1%;
}

.hiddenrow {
	display: none;
}

.selectall {
	background: #FFFBD9;
	border-bottom: 1px solid #F7E86A;
	color: #000;
	text-align: center;
}

.float_left {
	float: left;
}

.float_right {
	float: right;
}

.expcolimage {
	float: right;
	width: auto;
	vertical-align: middle;
	margin-top: 3px;
}

img.attachment {
	border: 1px solid #E9E5D7;
	padding: 2px;
}

hr {
	background-color: #000000;
	color: #000000;
	height: 1px;
	border: 0px;
}

#debug {
	float: right;
	text-align: right;
	margin-top: 20px;
	
	font-size: 11px;
}

blockquote {
	border: 1px solid #ccc;
	margin: 0;
	background: #fff;
	padding: 4px;
}

blockquote cite {
	font-weight: bold;
	border-bottom: 1px solid #ccc;
	font-style: normal;
	display: block;
	margin: 4px 0;
}

blockquote cite span {
	float: right;
	font-weight: normal;
}

blockquote cite span.highlight {
	float: none;
	font-weight: bold;
	padding-bottom: 0;
}

.codeblock {
	background: #fff;
	border: 1px solid #ccc;
	padding: 4px;
}

.codeblock .title {
	border-bottom: 1px solid #ccc;
	font-weight: bold;
	margin: 4px 0;
}

.codeblock code {
	overflow: auto;
	height: auto;
	max-height: 200px;
	display: block;
	font-family: Monaco, Consolas, Courier, monospace;
	font-size: 13px;
}

.subforumicon {
	border: 0;
	vertical-align: middle;
}

.separator {
	margin: 5px;
	padding: 0;
	height: 0px;
	font-size: 1px;
	list-style-type: none;
}

form {
	margin: 0;
	padding: 0;
}

.popup_menu .popup_item_container {
	margin: 1px;
	text-align: left;
}

.popup_menu .popup_item {
	display: block;
	padding: 4px;
	white-space: nowrap;
	
	text-decoration: none;
}

.popup_menu a.popup_item:hover {
	text-decoration: none;
}

.autocomplete {
	text-align: left;
}

.subject_new {
	font-weight: bold;
}

.highlight {
	background: #FFFFCC;
	padding-top: 3px;
	padding-bottom: 3px;
}

.pm_alert {
	background: #FFF6BF;
	border: 1px solid #FFD324;
	text-align: center;
	padding: 5px 20px;
	margin-bottom: 15px;
	font-size: 11px;
}

.red_alert {
	background: #FBE3E4;
	border: 1px solid #A5161A;
	color: #A5161A;
	text-align: center;
	padding: 5px 20px;
	margin-bottom: 15px;
	font-size: 11px;
}

.high_warning {
	color: #CC0000;
}

.moderate_warning {
	color: #F3611B;
}

.low_warning {
	color: #AE5700;
}

div.error {
	padding: 5px 10px;
	border-top: 2px solid #FFD324;
	border-bottom: 2px solid #FFD324;
	background: #FFF6BF;
	font-size: 12px;
}

div.error p {
	margin: 0;
	color: #000;
	font-weight: normal;
}

div.error p em {
	font-style: normal;
	font-weight: bold;
	padding-left: 24px;
	display: block;
	color: #C00;
	background: url(images/error.gif) no-repeat 0;
}

div.error.ul {
	margin-left: 24px;
}

.online {
	color: #15A018;
}

.offline {
	color: #C7C7C7;
}

.pagination {
	font-size: 11px;
	padding-top: 10px;
	margin-bottom: 5px;
}

.tfoot .pagination, .tcat .pagination {
	padding-top: 0;
}

.pagination .pages {
	font-weight: bold;
}

.pagination .pagination_current, .pagination a {
	padding: 3px 6px;
	margin-bottom: 3px;
}

.pagination a {
	background: #f5f5f5;
	border: 1px solid #ccc;
}

.pagination .pagination_current {
	background: none;
	color: #000;
	border: none;
	
	font-weight: bold;
}

.pagination a:hover {
	background: #023a61;
	color: #fff;
	border-color: #022338;
	
	text-decoration: none;
}

.thread_legend, .thread_legend dd {
	margin: 0;
	padding: 0;
}

.thread_legend dd {
	padding-bottom: 4px;
	margin-right: 15px;
}

.thread_legend img {
	margin-right: 4px;
	vertical-align: bottom;
}

.forum_legend, .forum_legend dt, .forum_legend dd {
	margin: 0;
	padding: 0;
}

.forum_legend dd {
	float: left;
	margin-right: 10px;
	margin-top: 7px;
}

.forum_legend dt {
	margin-right: 10px;
	float: left;
}

.success_message {
	color: #00b200;
	font-weight: bold;
	font-size: 10px;
	margin-bottom: 10px;
}

.error_message {
	color: #C00;
	font-weight: bold;
	font-size: 10px;
	margin-bottom: 10px;
}

.post_body {
	padding: 5px;
}

.post_buttons {
	background: #f5f5f5;
	padding: 3px 3px 0 3px;
	border-bottom: 1px solid #ddd;
}

.post_content {
	padding: 5px 10px;
}

.quick_jump {
	background: url(images/jump.gif) no-repeat 0;
	width: 13px;
	height: 13px;
	padding-left: 13px; /* amount of padding needed for image to fully show */
	vertical-align: middle;
	border: none;
}

.repbox {
	font-size:16px;
	font-weight: bold;
	padding:5px 7px 5px 7px;
}

._neutral {
	background-color:#FAFAFA;
	color: #999999;
	border:1px solid #CCCCCC;
}

._minus {
	background-color: #FDD2D1;
	color: #CB0200;
	border:1px solid #980201;
}

._plus {
	background-color:#E8FCDC;
	color: #008800;
	border:1px solid #008800;
}

.pagination_breadcrumb {
	background-color: #efefef;
	border: 1px solid #fff;
	outline: 1px solid #ccc;
	padding: 5px;
	margin-top: 5px;
	
	font-weight: normal;
}

.pagination_breadcrumb_link {
	vertical-align: middle;
	cursor: pointer;
}

form #message
{
    width: 500px;
}

I don't know CSS, so I dont know really.

Forum link: So you know what it currently looks like:
http://www.forumjunkies.org/index.php

Here is what I kind of want;

Background where the white is, I want the color of HF or something similar. A dark grey
The text on the forum, I'd like white or a fine light grey.
Keep the blue
Then do whatever else you like that you think would look nice.

I need a new logo

I don't have the time to do my own GFX, is why I'm asking.

Depending on the quality of your work, is what makes up the price.

Thanks
 
Top