CSS and design help
Moderator: General Moderators
-
gaogier
- Forum Contributor
- Posts: 391
- Joined: Wed Mar 02, 2005 1:02 pm
- Location: Portsmouth, UK
- Contact:
CSS and design help
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...
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
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
- 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
can this post be moved?
or should i start again?
or should i start again?
Re: CSS and design help
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
client side please
Re: CSS and design help
Done.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
- RobertGonzalez
- Site Administrator
- Posts: 14293
- Joined: Tue Sep 09, 2003 6:04 pm
- Location: Fremont, CA, USA
Re: CSS and design help
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
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%;
}
here is one of the forms i want changed http://runehints.com/contact.php
- RobertGonzalez
- Site Administrator
- Posts: 14293
- Joined: Tue Sep 09, 2003 6:04 pm
- Location: Fremont, CA, USA
Re: CSS and design help
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
Just the text for all forms
- RobertGonzalez
- Site Administrator
- Posts: 14293
- Joined: Tue Sep 09, 2003 6:04 pm
- Location: Fremont, CA, USA
Re: CSS and design help
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
all text
Drop down menus, the text in the forms, the text headings
Drop down menus, the text in the forms, the text headings
- RobertGonzalez
- Site Administrator
- Posts: 14293
- Joined: Tue Sep 09, 2003 6:04 pm
- Location: Fremont, CA, USA
Re: CSS and design help
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>.
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
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...
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...
- RobertGonzalez
- Site Administrator
- Posts: 14293
- Joined: Tue Sep 09, 2003 6:04 pm
- Location: Fremont, CA, USA
Re: CSS and design help
Depending on which boxes you want the text to be colored different...
Code: Select all
.form textarea { color: #efefef;}