Page 1 of 2

CSS and design help

Posted: Fri Apr 25, 2008 3:52 am
by gaogier
Hello

I have 2 designs, one is old, and I have converted 90% of the whole site.

I now need as much help as you can give me, to sort out the CSS code (I have tried to learn CSS for about 4 years, still cant work it out) so if you can help out, it would be great.

At this time I am using CSS code from 2 designs, and my site looks a little stupid.

There are far too many files to show here... I can send you them via email...

Re: CSS and design help

Posted: Fri Apr 25, 2008 4:43 am
by matthijs
You can do a few things:
- post this question in the Volunteer section to find help
- post this question in the Job Hunt to find someone to do the work for you
- post the code (html+css) in the Client Side forum with a description of the problem in the hope that someone can help

Re: CSS and design help

Posted: Mon Apr 28, 2008 5:37 pm
by gaogier
can this post be moved?

or should i start again?

Re: CSS and design help

Posted: Tue Apr 29, 2008 10:37 am
by pickle
I can move this post. Where would you like me to move it?

Re: CSS and design help

Posted: Wed Apr 30, 2008 7:43 am
by gaogier
client side please

Re: CSS and design help

Posted: Wed Apr 30, 2008 9:56 am
by pickle
Done.

Re: CSS and design help

Posted: Fri May 02, 2008 1:19 pm
by RobertGonzalez
Ok, now that we have the forum location straightened up, what is the problem you are having? Baby steps at first. Let's see if we can tackle it one bit at a time.

Re: CSS and design help

Posted: Fri May 02, 2008 4:28 pm
by gaogier

Code: Select all

/* Quest */
#quest li, .text {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #efefef;}
 
#quest .qtitle {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; color: #F8DBA6; font-weight: bold; }
 
#quest .qtitles {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; color: #F8DBA6; text-decoration: underline; font-weight: bold; }
 
#quest .questheader {font-family: verdana; font-size: 23px; color: #F8DBA6; font-weight: bold; text-align: center;}
 
 
/* Tables */
 
table.pass {font-family: Tahoma; font-size: 11px; color:#565866; border-left:solid #96FE96 1px;  border-top:solid #96FE96 1px;  border-bottom:solid #96FE96 1px;  border-right:solid #96FE96 1px; }
table.monster{  font-family: Verdana;   font-size: 10px;    font-style: normal; color:#FFFFFF;  }
table.blueborder{font-family: Tahoma; font-size: 11px; color:#565866; border-left:solid #d1ddff 1px;  border-top:solid #d1ddff 1px;  border-bottom:solid #d1ddff 1px;  border-right:solid #d1ddff 1px; } 
table.logfail {font-family: Tahoma; font-size: 11px; color:#565866; border-left:solid #fe9898 1px;  border-top:solid #fe9898 1px;  border-bottom:solid #fe9898 1px;  border-right:solid #fe9898 1px; }
table.calcinput {   font-family: Verdana;   font-size: 10px;    font-style: normal; color:#FFFFFF;  }
table.calc {    font-family: Verdana;   font-size: 10px;    text-align: center; font-style: normal; line-height: normal;    font-variant: normal;   text-transform: none;   color: #FFFFFF; text-decoration: none;  border: 1px solid #0099CC;  margin-left: auto;  margin-right: auto; word-spacing: normal;   white-space: normal;}
table.monsterdb {   font-family: Verdana;   font-size: 10pt;    text-align: center; font-style: normal; line-height: normal;    font-variant: normal;   text-transform: none;   color: #FFFFFF; text-decoration: none;  border: 1px solid #F8DBA6;  margin-left: auto;  margin-right: auto; word-spacing: normal;   white-space: normal;}
.forumline  {background-color: #000000; border: 1px #303F56 solid;}
td.monsterdb {  text-align: center; border: 1px solid #0099CC;}
table.monsterdb2 {
    margin-left: auto;
    margin-right: auto;
    border: solid 1px #F8DBA6;
    border-width: 1px 1px 1px 1px;
    font-size: 10pt;
    text-align: center;
    border-collapse: separate;
}
 
 
td.calc {   text-align: center; border: 1px solid #F8DBA6;  padding: 3px;}
 
 
/** BASIC */
 
html, body {
    height: 100%;
}
 
body {
    margin: 0px;
    padding: 0px;
    background: #000000 url(images/subpage1.bg01.jpg) repeat-x left top;
}
 
/** FORMS */
 
form {
    margin: 0px;
    padding: 0px;
}
 
/** HEADINGS */
 
h1, h2, h3 {
    margin: 0px;
    color: #FBFAFA;
}
 
h1, h2 {
    font-weight: normal;
}
 
h1 {
    font-size: 22px;
}
 
h2 {
    font-size: 16px;
}
 
h3 {
    margin-bottom: 10px;
    font-size: 11px;
}
 
/** TEXTS */
 
body, th, td, input, textarea, select {
    font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #CADFE6;
}
 
p, blockquote, ul, ol, dl {
    margin-top: 0px;
    margin-bottom: 1em;
    text-align: justify;
}
 
ul, ol {
    margin-left: 0px;
    padding-left: 0px;
    list-style-position: inside;
}
 
.list1 {
    margin: 0px;
    padding: 0px;
    list-style-position: outside;
    list-style: none;
}
 
.list1 li {
    margin-bottom: 1px;
    padding: 10px 15px 5px 15px;
    background: #0F2229 url(images/homepage27.jpg) no-repeat left top;
}
 
.list1 li.alt {
    background: #09151A url(images/homepage28.jpg) no-repeat left top;
}
 
.list1 .date {
    float: right;
    color: #40524D;
}
 
.list2, .list3 {
    margin: 0px;
    padding: 0px;
    list-style-position: outside;
    list-style: none;
    line-height: normal;
}
 
.list2 li, .list3 li {
    margin-bottom: 20px;
}
 
.list2 p, .list3 p {
    margin: 0px;
    padding: 0px;display: inline;
    line-height: normal;
}
 
.list3 li {
    margin-bottom: 15px;
    padding-bottom: 25px;
    background: url(images/homepage29.jpg) repeat-x left bottom;
}
 
.list3 h3 {
    display: inline;
}
 
.list3 p {
    display: block;
}
 
/** LINKS */
 
a {
    text-decoration: none;
    color: #F8DBA6;
}
 
a:hover {
    text-decoration: underline;
}
 
/** STYLES */
 
.style1 {
    margin: 0px;
    padding: 15px;
    text-align: right;
}
 
.style2 {
    text-align: center;
}
 
.style3 {
    margin: 0px;
    padding: 0px;
    text-align: right;
}
 
/** BACKGROUNDS */
 
.bg1 {
}
 
/** MISC */
 
.align-justify { text-align: justify; }
.align-right { text-align: right; }
 
img { border: none; }
 
img.left {
    float: left;
    margin: 3px 15px 0px 0px;
}
 
img.right {
    float: right;
    margin: 3px 0px 0px 15px;
}
 
hr { display: none; }
 
.hr1 {
    height: 1px;
}
 
/** WRAPPER */
 
#wrapper {
    background: url(images/subpage1.bg03.jpg) no-repeat center top;
}
 
#wrapper-bg {
    background: url(images/subpage1.bg02.jpg) repeat-y center top;
}
 
.wide-subpage #wrapper {
    background-image: url(images/subpage2.bg01.jpg);
} 
 
.wide-subpage #wrapper-bg {
    background-image: url(images/subpage2.bg02.jpg);
} 
 
/** MENU */
 
#menu {
    background: url(images/homepage02.jpg) no-repeat left top;
}
 
#menu a {
    color: #F6F4EF;
}
 
/** PAGE */
 
#page {
    background: url(images/subpage1.bg04.jpg) no-repeat left bottom;
}
 
.wide-subpage #page {
    background-image: url(images/subpage2.bg03.jpg);
}
 
/** CONTENT */
 
#content {
}
 
.wide-subpage #content {
    background: url(images/subpage2.bg01.jpg) no-repeat 50% -188px;
}
 
.wide-subpage #content .box .content {
    padding: 30px 45px;
    background: url(images/subpage2_02.jpg) no-repeat left top;
}
 
#content .box .meta {
    margin-bottom: 20px;
    font-size: 11px;
    font-weight: normal;
    color: #52645D;
}
 
/** TWO-COLUMN SECTION */
 
.two-columns {
    background: url(images/homepage14.jpg) repeat-y left top;
}
 
.two-columns .column-one {
    width: 363px;
}
 
.two-columns .box .content {
    background: url(images/homepage26.jpg) no-repeat right top;
}
 
.two-columns .column-two {
    width: 362px;
}
 
/** SIDEBAR */
 
#sidebar {
}
 
#sidebar .box .content {
    background: url(images/homepage07.jpg) no-repeat right top;
}
 
#sidebar .box {
}
 
#sidebar .box .content {
    padding: 0px 0px 15px 0px;
}
 
#sidebar .box ul {
    margin: 0px;
    padding: 0px;
    list-style-position: outside;
    list-style: none;
}
 
#sidebar .box ul li {
    height: 20px;
    padding: 8px 0px 0px 35px;
    background: url(images/homepage11.jpg) no-repeat left top;
}
 
#sidebar .box ul li.first {
    background: none;
}
 
#sidebar .box ul li a {
    text-decoration: none;
    color: #CADFE6;
}
 
#sidebar .box ul li a:hover {
    text-decoration: underline;
    color: #F8DBA6;
}
 
#sidebar .box .padded {
    padding: 20px 35px;
}
 
 
/** FOOTER */
 
#footer {
    background: url(images/subpage1.bg05.jpg) no-repeat left top;
}
 
#footer p {
    margin: 0px;
    padding: 50px 0px 0px 0px;
    text-align: center;
    color: #354D4D;
}
 
/** BOX4 */
 
#box4 {
}
 
#box4 .content {
    padding: 20px 44px 30px 53px;
    background: url(images/subpage1_02.jpg) no-repeat left top;
    line-height: 170%;
}
 
I want forms to change font... but no idea how or what part i need to change...

here is one of the forms i want changed http://runehints.com/contact.php

Re: CSS and design help

Posted: Fri May 02, 2008 4:30 pm
by RobertGonzalez
The form elements or the text that is seen on the form?

Re: CSS and design help

Posted: Fri May 02, 2008 5:29 pm
by gaogier
Just the text for all forms

Re: CSS and design help

Posted: Fri May 02, 2008 5:42 pm
by RobertGonzalez
The text in the form elements themselves or the text labels? I am a little unclear of which text you are talking about.

Re: CSS and design help

Posted: Fri May 02, 2008 6:17 pm
by gaogier
all text

Drop down menus, the text in the forms, the text headings

Re: CSS and design help

Posted: Fri May 02, 2008 6:25 pm
by RobertGonzalez
Ok, so you are more than likely going to have to start with an ID that you can apply to your form (or a class to apply to all forms). Set the font properties of the form in this id/class.

Now you are going to need to set these same properties for each of the form elements (either globally or inside the form id/class). Each one has a default that must be overridden, so you are going to have to contend with <input>, <textarea>, <select> and <button>.

Re: CSS and design help

Posted: Fri May 02, 2008 6:44 pm
by gaogier
So, if i added a class to the form called, calc

I want everything the way it is, but the text you type in the boxes to be #efefef what would the code be?

I understand how it all works, but i dont understand how its put together...

Re: CSS and design help

Posted: Fri May 02, 2008 11:33 pm
by RobertGonzalez
Depending on which boxes you want the text to be colored different...

Code: Select all

.form textarea {    color: #efefef;}