Support Forums
Help Customizing Colors on my Theme - Printable Version

+- Support Forums (https://www.supportforums.net)
+-- Forum: Categories (https://www.supportforums.net/forumdisplay.php?fid=87)
+--- Forum: Webmaster Support (https://www.supportforums.net/forumdisplay.php?fid=36)
+---- Forum: Website Development (https://www.supportforums.net/forumdisplay.php?fid=43)
+---- Thread: Help Customizing Colors on my Theme (/showthread.php?tid=25368)

Pages: 1 2

Help Customizing Colors on my Theme - RedKarma - 02-27-2012

I really like the greys that Support Forums has and I was wondering if someone that is familiar with editing .css files could help me change my global.css to a similar look to this? right now my theme is grey background boarder and green theme with white everywhere and I dont like the amount of white i have, I want my whites to be changed to the greys Support Forums uses. and the text right now is black but obviously I'd like that to change as well so it's not hard to see...

My website is GameSourceHQ if anyone wants to check it out.

Here's my Global.css code:

Code:
body {
    background: #464646;
    color: #000;
    text-align: center;
    line-height: 1.4;
    
    font-family: Verdana, Arial, Sans-Serif;
    font-size: 13px;
}

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

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

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

#container {
    background: #fff;
    width: 95%;
    color: #000000;
    border: 1px solid #000000;
    margin: auto auto;
    padding: 0;
    text-align: left;
}

#content {
    width: auto !important;
    padding: 20px;
}

.menu ul {
    color: #000000;
    font-weight: bold;
    text-align: right;
    padding: 4px;
}

.menu ul a:link {
    color: #000000;
    text-decoration: none;
}

.menu ul a:visited {
    color: #000000;
    text-decoration: none;
}

.menu ul a:hover, .menu ul a:active {
    color: #4874a3;
    text-decoration: none;
}

#panel {
    background: #efefef;
    color: #000000;
    font-size: 11px;
    border: 1px solid #D4D4D4;
    padding: 8px;
}

table {
    color: #000000;
    font-family: Verdana, Arial, Sans-Serif;
    font-size: 13px;
}

.tborder {
    background: #5b9400;
    width: 100%;
    margin: auto auto;
}

.thead {
    background: #8ac000 url(images/GreenNight/thead.gif) top left repeat-x;
    color: #ffffff;
}

.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: #000000 url(images/GreenNight/tshead.gif) top left repeat-x;
    color: #FFFFFF;
    font-size: 12px;
}

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

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

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

.trow1 {
    background: #f5f5f5;
}

.trow2 {
    background: #EFEFEF;
}

.trow_shaded {
    background: #ffdde0;
}

.trow_selected td {
    background: #FFFBD9;
}

.trow_sep {
    background: #e5e5e5;
    color: #000;
    font-size: 12px;
    font-weight: bold;
}

.tfoot {
    background: #8ac000 url(images/GreenNight/tfoot.gif) top left repeat-x;
    color: #ffffff;
}

.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;
}

.bottommenu {
    background: #000000 url(images/GreenNight/bmenu.gif) top left repeat-x;
    color: #FFFFFF;
    border: 1px solid #000000;
    padding: 10px;
}

.bottommenu a:link, .bottommenu a:active, .bottommenu a:visited {
color: #FFFFFF;
}

.bottommenu a:hover {
color: #8ac000;
text-decoration: underline;
}

.navigation {
    color: #000000;
    font-size: 13px;
    font-weight: bold;
}

.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 #0f5c8e;
    padding: 1px;
}

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

select {
    background: #ffffff;
    border: 1px solid #0f5c8e;
}

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

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

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

.autocomplete_selected {
    background: #adcee7;
    color: #000;
}

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

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

.popup_menu .popup_item:hover {
    background: #C7DBEE;
    color: #000;
}

.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%;
}

.float_left {
    float: left;
}

.float_right {
    float: right;
}

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

.menu li {
    display: inline;
    padding-left: 5px;
}

.menu img {
    padding-right: 5px;
    vertical-align: top;
}

#panel .links {
    margin: 0;
    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;
}

#copyright {
    background: #8ac000 url(images/GreenNight/thead.gif) top left repeat-x;
    font: 11px Verdana, Arial, Sans-Serif;
    margin: 0;
    padding: 10px 10px 0 10px;
    border: 1px solid #5b9400;
    height: 25px;
}

#copyright a:link, #copyright a:active, #copyright a:visited {
    color: #000000;
}

#debug {
    float: right;
    text-align: right;
    margin-top: 0;
}

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;
}

.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: 3px;
    text-decoration: none;
    white-space: nowrap;
}

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

.autocomplete {
    text-align: left;
}

.subject_new {
    font-weight: bold;
}

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

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

.red_alert {
    background: #FBE3E4;
    border: 1px solid #A5161A;
    color: #A5161A;
    text-align: center;
    padding: 5px 20px;
    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: 2px 6px;
    margin-bottom: 3px;
}

.pagination a {
    border: 1px solid #81A2C4;
}

.pagination .pagination_current {
    background: #F5F5F5;
    border: 1px solid #81A2C4;
    font-weight: bold;
}

.pagination a:hover {
    background: #F5F5F5;
    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;
}

.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_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;
}

#header {
background-image: url(images/GreenNight/header_bg.png);
background-repeat: repeat-x;
}

.navbar {
    color: #FFFFFF;
margin: 0;
padding: 0;
font-weight: bold;
}

.navbar ul {

list-style: none;
color: #FFFFFF;
background-image: url(images/GreenNight/subhead_bg.png);
background-repeat: repeat-x;
margin: 0;
padding-top: 10px;
height: 39px;
text-align: center;
margin: 0;
}

.navbar li {
color: #FFFFFF;
display: inline;
height: 39px;
width: 156px;
margin: 0;
padding-top: 10px;
text-align: center;
}

.navbar a:link, .navbar a:visited {
color: #FFFFFF;
padding: 0px 1em 6px 1em;
margin: 0;
}

.navbar a:hover {
color: #8ac000;
text-decoration: none;
}

#useravatar {
position: absolute;
left: 63%;
top: 63px;
}

#userinfo {
float: right;
margin-right: 5px;
margin-top: 65px;
}

#userinfo a:link, #userinfo a:active, #userinfo a:visited {
color: #000000;
text-decoration: none;
}

#userinfo a:hover {
color: #000000;
text-decoration: underline;
}


Thanks guys.

RE: Help Customizing Colors on my Theme - AceInfinity - 02-27-2012

You post an Adf.ly link for those trying to help you out? And it also links to an invalid link. It says "not found" for me.

Open up inspect element and start finding the id's and classes from there to edit, and you're looking at changing the background and color CSS properties.

RE: Help Customizing Colors on my Theme - BreShiE - 02-27-2012

http://community.mybb.com/thread-33809.html

That helped me out a lot when I made my first theme.

RE: Help Customizing Colors on my Theme - RedKarma - 02-27-2012

awesome thank you. can you tell me how to repeat a background image? i have repeat x but thats only one row horizontal...

RE: Help Customizing Colors on my Theme - Fragma - 02-27-2012

(02-27-2012, 02:40 PM)RedKarma Wrote: awesome thank you. can you tell me how to repeat a background image? i have repeat x but thats only one row horizontal...

you need repeat-y as well.

RE: Help Customizing Colors on my Theme - RedKarma - 02-27-2012

so write it like this? repeat-xy

RE: Help Customizing Colors on my Theme - Fragma - 02-27-2012

I think you can just do:
background: #000 url("/link/") repeat;

That should automatically do x & y.

RE: Help Customizing Colors on my Theme - RedKarma - 02-27-2012

it worked Smile but the image is off :S working on that now. thanks Smile
ok, so i like the brackground image from Support Forums, so i figured I'd use it...
[Image: FGLMh.gif]

Only thing is that it just wont repeat itself properly, and im wondering why?
[Image: jTBGx.gif]

please let me know what im doing wrong Smile
Also what do I edit to change the text color in the forum?

RE: Help Customizing Colors on my Theme - AceInfinity - 02-27-2012

You're images don't align vertically then.

RE: Help Customizing Colors on my Theme - RedKarma - 02-27-2012

What do I change to change the text to grey in trow1 and trow2? i dont see an option for it and it's black right now...