CSS and design help

JavaScript and client side scripting.

Moderator: General Moderators

gaogier
Forum Contributor
Posts: 391
Joined: Wed Mar 02, 2005 1:02 pm
Location: Portsmouth, UK
Contact:

CSS and design help

Post 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...
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Re: CSS and design help

Post 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
gaogier
Forum Contributor
Posts: 391
Joined: Wed Mar 02, 2005 1:02 pm
Location: Portsmouth, UK
Contact:

Re: CSS and design help

Post by gaogier »

can this post be moved?

or should i start again?
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: CSS and design help

Post by pickle »

I can move this post. Where would you like me to move it?
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
gaogier
Forum Contributor
Posts: 391
Joined: Wed Mar 02, 2005 1:02 pm
Location: Portsmouth, UK
Contact:

Re: CSS and design help

Post by gaogier »

client side please
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: CSS and design help

Post by pickle »

Done.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Re: CSS and design help

Post 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.
gaogier
Forum Contributor
Posts: 391
Joined: Wed Mar 02, 2005 1:02 pm
Location: Portsmouth, UK
Contact:

Re: CSS and design help

Post 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
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Re: CSS and design help

Post by RobertGonzalez »

The form elements or the text that is seen on the form?
gaogier
Forum Contributor
Posts: 391
Joined: Wed Mar 02, 2005 1:02 pm
Location: Portsmouth, UK
Contact:

Re: CSS and design help

Post by gaogier »

Just the text for all forms
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Re: CSS and design help

Post 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.
gaogier
Forum Contributor
Posts: 391
Joined: Wed Mar 02, 2005 1:02 pm
Location: Portsmouth, UK
Contact:

Re: CSS and design help

Post by gaogier »

all text

Drop down menus, the text in the forms, the text headings
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Re: CSS and design help

Post 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>.
gaogier
Forum Contributor
Posts: 391
Joined: Wed Mar 02, 2005 1:02 pm
Location: Portsmouth, UK
Contact:

Re: CSS and design help

Post 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...
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Re: CSS and design help

Post by RobertGonzalez »

Depending on which boxes you want the text to be colored different...

Code: Select all

.form textarea {    color: #efefef;}
Post Reply