couple of questions

[koolaid]

First of all, awesome theme! and love the new look of DZ :thumbsup:

1. I changed the height of the header (where the logo is). This is what it currently looks like as the result of this change (circled in yellow)

http://img225.imageshack.us/img225/2825/header1cn2.jpg

which images would i have to modify in order to get the gray bit all the way to the top?

Here is the code for my style.css in case you need to look at it:

Code: [Select]

/* TP specific classes */
.sitemap {
margin: 0;
padding: 0;
list-style: none;
}

.sitemap_topheader {}

.sitemap_header {
display: block;
font-weight: bold;
margin: 2px;
padding: 4px;
background: #262626;
border-bottom: 1px solid #282828;
font-family: "Segoe UI", Tahoma, Arial, Helvetica, sans-serif;
}

.sitemap_header_active {
display: block;
font-weight: bold;
margin: 2px;
padding: 4px;
background: #fcfcfc;
border-bottom: 1px solid #eee;
}

.sitemap_header:hover, .sitemap_header_active:hover {
color: #9D7941;
background: #292929;
text-decoration: none;
}
/* TP other styles */

ul #articlelist {
margin: 0;
padding: 0.5ex 0;
list-style: none;
}

ul #catlist {
margin: 0;
padding: 0;
list-style: none;
border-top: solid 1px #6699FF;
}

ul #articlelist li {
margin: 0;
display: block;
padding: 0 0 0 3ex;
background: url(images/divider.gif) no-repeat 5px 3px;
}

ul #catlist li {
display: block;
padding: 0 0 0 3ex;
margin: 0;
}
/* TP rss feed styles */

.rss_title {
font-weight: bold;
}

.rss_body {
margin-bottom: 1ex;
}

.rss_image {
margin: 4px 0 4px 0;
}
/* The AJAX notifier */

#ajax_in_progress {
background: #32CD32;
color: white;
text-align: center;
font-weight: bold;
font-size: 18pt;
padding: 3px;
width: 75%;
position: fixed;
top: 0;
left: 0;
}
/* Normal, standard links. */

a:link, a:visited {
color: #6699FF;
text-decoration: none;
}

a:hover {
color: #9966FF;
}
/* Navigation links - for the link tree. */

.nav, .nav:link, .nav:visited {
color: #bfbfbf;
text-decoration: none;
}

a.nav:hover {
color: #bfbfbf;
text-decoration: none;
}
/* Tables should show empty cells. */

table {
empty-cells: show;
}
/* By default (td, body..) use verdana in black. */

body {
color: #645e50;
line-height: 135%;
font-family: tahoma, sans-serif;
font-size: 11px;
}

/* The main body of the entire forum. */

body {
margin: 0px;
padding: 0;
background: #252525 url(images/custom/bg.jpg) 0 0 repeat-x;
}
/* Input boxes - just a bit smaller than normal so they align well. */

input, textarea, button {
color: #353535;
font-family: verdana, sans-serif;
}

input, button {
font-size: small;
margin: 1px;
}

input, textarea {
background: #ccc;
font-size: small;
border: solid 1px #303030;
}

input:focus {
background: #bbb;
}

textarea {
font-family: verdana, sans-serif;
}
/* All input elements that are checkboxes or radio buttons. */

input.check {}

/* Selects are a bit smaller, because it makes them look even better 8). */

select {
border: solid 1px #303030;
background: #2d2d2d;
font-size: small;
font-weight: normal;
color: #838383;
font-family: verdana, sans-serif;
}
/* Standard horizontal rule.. ([hr], etc.) */

hr, .hrcolor {
height: 1px;
border: 0;
color: #313131;
background-color: #303030;
}
/* No image should have a border when linked */

a img {
border: 0;
}

/* A quote, perhaps from another post. */

.quote {
background: #272727 url(images/startquote.gif) 4px 4px no-repeat;
color: #afafaf;
border: 1px solid #212121;
margin: 10px 0pt;
padding: 10px 10px 20px 50px;
width: auto;
font-size: x-small;
line-height: 120%;
}
/* A code block - maybe even PHP ;). */

.code {
color: #afafaf;
background: #222;
font-family: Helvetica, Arial, sans-serif;
font-size: x-small;
line-height: 1.3em;
/* Put a nice border around it. */
border-bottom: 3px solid #5b5446;
border-top: 3px solid #5b5446;
margin: 1px auto 1px auto;
padding: 1px;
width: 99%;
/* Don't wrap its contents, and show scrollbars. */
white-space: nowrap;
overflow: auto;
/* Stop after about 24 lines, and just show a scrollbar. */
max-height: 24em;
}

/* The "Quote:" and "Code:" header parts... */

.quoteheader, .codeheader {
color: #505050;
text-decoration: none;
font-style: normal;
font-weight: bold;
font-size: x-small;
line-height: 1.2em;
}
/* Generally, those [?] icons.  This makes your cursor a help icon. */

.help {
cursor: help;
}

/* /me uses this a lot. (emote, try typing /me in a post.) */

.meaction {
color: red;
}

/* The main post box - this makes it as wide as possible. */

.editor {
width: 96%;
}

/* Highlighted text - such as search results. */

.highlight {
background-color: yellow;
font-weight: bold;
color: black;
}

/* Alternating backgrounds for posts, and several other sections of the forum. */

.windowbg {
padding: 5px;
border-bottom: 2px solid #1a1a1a;
}

.windowbg2 {
padding: 5px;
border-bottom: 2px solid #1a1a1a;
}

.windowbg3 {
background: #1f1f1f;
border-bottom: 2px solid #1a1a1a;
}

/* the today container in calendar */

.calendar_today {
background-color: #7c7360;
}

/* These are used primarily for titles, but also for headers (the row that says what everything in the table is.) */

.titlebg, tr.titlebg th, tr.titlebg td, .titlebg2, tr.titlebg2 th, tr.titlebg2 td {
color: #cfcfcf
font-style: normal;
background: #1e1e1e url(images/titlebg.gif) no-repeat;
padding: 10px;
line-height: 20px;
}

.titlebg, .titlebg a:link, .titlebg a:visited {
color: #cfcfcf;
font-style: normal;
}

.titlebg a:hover {
color: white;
}

/* same as titlebg, but used where bold text is not needed */

.titlebg2 a:link, .titlebg2 a:visited {
color: #cfcfcf;
font-style: normal;
text-decoration: underline;
}

.titlebg, .titlebg2 {
font-size: 120%;
font-family: "Segoe UI", "Lucida Grande", Tahoma, Arial, Helvetica, sans-serif;
font-weight: bold;
}

.titlebg2 a:hover {
text-decoration: underline;
}

/* This is used for categories, page indexes, and several other areas in the forum.
.catbg and .catbg2 is for boardindex, while .catbg3 is for messageindex and display headers*/

.catbg, tr.catbg td, .catbg3, tr.catbg3 td {
background: #1e1e1e;
color: #ababab;
padding-left: 10px;
padding-right: 10px;
border-top: 2px solid #7c7360;
}

.catbg2, tr.catbg2 td {
background: #1e1e1e;
color: #cdcdcd;
padding-left: 10px;
padding-right: 10px;
}

.catbg, .catbg2 {
font-size: 130%;
font-family: "Segoe UI", "Lucida Grande", Tahoma, Arial, Helvetica, sans-serif;
font-weight: bold;
}

.catbg, .catbg2 {
background: #1e1e1e;
line-height: 20px;
}

.catbg3, tr.catbg3 td, .catbg3 a:link, .catbg3 a:visited {
color: #cdcdcd;
text-decoration: none;
}

.catbg a:link, .catbg a:visited, .catbg2 a:link, .catbg2 a:visited {
color: #cdcdcd;
text-decoration: none;
}

.catbg a:hover, .catbg2 a:hover, .catbg3 a:hover {
color: #fff;
}

/* This is used for tables that have a grid/border background color (such as the topic listing.) */

.bordercolor {}

/* This is used on tables that should just have a border around them. */

.tborder {}

/* Default font sizes: small (8pt), normal (10pt), and large (14pt). */

.smalltext {
font-size: x-small;
font-family: tahoma, sans-serif;
}

.middletext {
line-height: 18px;
text-indent: 10px;
}

.normaltext {
font-size: small;
}

.largetext {
font-size: large;
}

/* Posts and personal messages displayed throughout the forum. */

.post, .personalmessage {
width: 100%;
overflow: auto;
line-height: 1.3em;
}

/* All the signatures used in the forum.  If your forum users use Mozilla, Opera, or Safari, you might add max-height here ;). */

.signature {
width: 100%;
overflow: auto;
padding-bottom: 3px;
line-height: 1.3em;
}
/* Sometimes there will be an error when you post */

.error {
color: #ffffd0;
font-style: italic;
}
/* definitions for the main tab, active means the tab reflects which page is displayed */

.maintab_first, .maintab_back, .maintab_last, .maintab_active_first, .maintab_active_back, .maintab_active_last, .mirrortab_first, .mirrortab_back, .mirrortab_last, .mirrortab_active_first, .mirrortab_active_back, .mirrortab_active_last {
color: #ffffff;
vertical-align: top;
text-transform: uppercase;
}

.maintab_back, .maintab_active_back, .mirrortab_back, .mirrortab_active_back {
color: #ffffff;
text-decoration: none;
font-size: 10px;
font-family: tahoma, sans-serif;
padding: 5px 10px 5px 10px;
}

.maintab_first,.mirrortab_first {
display: none;
}

.maintab_back,.mirrortab_back {
background: #333333;
color: #ffffff;
}

.maintab_last,.mirrortab_last {
display: none;
}

.maintab_active_first, .mirrortab_active_first {
display: none;
}

.maintab_active_back, .mirrortab_active_back {
background: #FF9900;
}

.maintab_active_last, .mirrortab_active_last {
display: none;
}

/* how links behave in main tab. */

.maintab_back a:link, .maintab_back a:visited, .mirrortab_back a:link, .mirrortab_back a:visited {
color: #ccc;
text-decoration: none;
}

.maintab_active_back a:link, .maintab_active_back a:visited, .mirrortab_active_back a:link, .mirrortab_active_back a:visited {
color: #333;
text-decoration: none;
}

.maintab_back a:hover, .maintab_active_back a:hover, .mirrortab_back a:hover, .mirrortab_active_back a:hover {
text-decoration: underline;
}

.wrapper {
width: 980px;
min-width: 750px;
margin: auto;
background: #000;
}

/* very top -- logo area */

#header {
background: #262626 url(images/custom/head-bg.gif) 0 0 repeat-x;
position: relative;
height: 180px;

}

#hdr-l {
background: url(images/custom/head-l.gif) 0 100% repeat-y;
padding-left: 40px;
}

/* banner */

#hdr-r {
background: url(images/custom/head-r.gif) 100% 100% repeat-y;
padding-right: 40px;
height: 300px;
}

#bdy-tl {
background: url(images/custom/bdy-tl.gif) 0 0 no-repeat;
padding-left: 40px;
}

#bdy-tr {
background: url(images/custom/bdy-tr.gif) 100% 0 no-repeat;
padding-right: 40px;
}

#bdy-l {
background: url(images/custom/bdy-l.gif) 0 50% repeat-y;
}

#bdy-r {
background: url(images/custom/bdy-r.gif) 100% 50% repeat-y;
}

#logo {
position: absolute;
top: 0;
left: 250;
display: block;
width: 900px;
height: 173px;
background: url(images/custom/1zv.jpg) no-repeat;
cursor: pointer;
z-index: 0;
}

#bnr {
background: url(iamges/custom/banner.jpg) 0 0 repeat-x;
height: 170px;
padding: 0;
margin: 0;
}

#avatar {
float: left;
padding-right: 10px;
}

#userarea {
font-size: 11px;
color: #ffffff;
font-family: tahoma, sans-serif;
padding-top: 10px;
padding-left: 25px;
clear: both;
}

#userarea ul {
padding: 0;
margin: 0;
list-style: none;
}

#userarea a:link, #userarea a:visited {
color: #999999;
font-weight: bold;
}

#userarea a:hover {
text-decoration: underline;
}

.loginput {
background: #ebede2;
border: solid 1px #484132;
}

.logbutton {
background: #978f7e;
border: solid 1px #484132;
}

#toolbar {
height: 21px;
padding: 0;
margin: 0;
background: #000000 url(images/custom/tlb-bg.gif) 0 100% repeat-x;
}

#searcharea {
float: right;
padding: 13px 15px 0 0;
margin: 0;
clear: right;
z-index: 1; 
}

#time {
font-size: 13px;
font-family: "Segoe UI", "Lucida Grande", Tahoma,Arial, Helvetica, sans-serif;
float: right;
padding: 15px 20px 0 0;
z-index: 2;
}

#bodyarea {
background: #1a1a1a url(images/custom/top-m.gif) 0 0 repeat-x;
color: #afafaf;
padding: 0;
margin: 0;

}

#ftr {
background: #000 url(images/custom/foot-m.gif) 0 100% repeat-x;
}

#ftr-r {
background: url(images/custom/foot-r.gif) 100% 100% no-repeat;
height: 110px;
}

#ftr-l {
background: url(images/custom/foot-l.gif) 0 100% no-repeat;
}

#footerarea {
background: url(images/custom/ft-logo.gif) 95% 100% no-repeat;
padding: 15px 0 0 45px;
color: #888;
font-family:tahoma;
font-size: 11px;
}

#footerarea a:link, #footerarea a:visited {
color: #888;
}

#footerarea a:hover {
color: #FFFF66;
text-decoration: none;
}


2. The banner I have in the header (logo area), its covering the date and search area. I've tried to do z-index to put the date and search on top of my banner but it doesn't work. Any ideas?

3. You know the title (http://img86.imageshack.us/img86/3420/commentskg9.jpg), I would like to change the titles in the forum. How would i go about replacing it with my own? Also the "comments" title in the article section, could i take out the collapse/expand option because i think thats what makes the title look bigger than it should b/c of that image. Just looks awkward..

4. Could the comments in the articles have its own box to easily separate it from each other. An example of what i'm talking about: http://oborochann.deviantart.com/art/Baby-Onigiris-50567594 --> Scroll to the bottom

Thanks!

[Bikken]

Hi there, thx for your comments 

1. These images would be: head-l.gif / head-r.gif

2. Try to add "position: relative;" to div searcharea, div time

3. What do you mean by "replacing forum titles with my own"? To take out the expand/collapse option, you'll need to remove the upshrink part in TPortal.template file.

4. The articles are a TinyPortal feature, so you'll get better answers on their forum.

[koolaid]

Thanks for the quick reply =)

1. I changed the height of the images, tweaked the css and fixed it
2. I tried adding it before float: right but it didn't work =\
3. Like changing the design/color, but i figured it out after playing around with the css I successful removed the upshrink. Looks much better XD
4. Ohh i thought it had to do with theme b/c if you view the default theme, classic yabb and babylon, you can see a slight color diff separating the comments. Like this: (Classic yabb) http://img89.imageshack.us/img89/7475/aaaaaahi5.jpg

[Metorks]

4. Ohh i thought it had to do with theme b/c if you view the default theme, classic yabb and babylon, you can see a slight color diff separating the comments.

In your style.css, find:

Code: [Select]

/* Alternating backgrounds for posts, and several other sections of the forum. */
You will see several tags named windowbg, windowbg2, etc.  These are what gives the tables an alternating look, in posts, comments, etc.  If two or more of these are the same, then the posts, comments, etc. may not alternate.  Try changing one to a slightly lighter shade.  Be advised, though, that if you do this, it will most likely cause your topic posts to alternate as well.  Which may or may not be a bad thing.

Hope that helped.

Met

[koolaid]

Thanks Metorks for pointing me in the right direction! That did help

You were right, changing the color does change things in the forum but not just the posts... every aspect of smf and tp! I found that you couldn't just change the color of windowbg or rename it to a new one named windowbg4 in the tportal.template and css. This particular line of code is tied to many things, so i had to go into the diff templates and change all the windowbg manually to windowbg2 since the css is same as windowbg2 Its going to take awhile. Unless i'm going about this all wrong and taking the long way to do it 

[Metorks]

I may be wrong, but there's no easier way that I know of.  On one of mine I made a new "windowbg" class and tied a lot to that too.  Maybe you could try "Find and Replace" if your editing program has it.  That's made my life easier a time or two for those mass changes.  Good luck with it. 

[koolaid]

Ahh of course! Find and Replace. Can't believe i forgot about that . After playing around with the code.. i managed to pull it off

Heres how it looks: http://img209.imageshack.us/img209/2875/ohyeahex2.jpg

[Bikken]

2. I tried adding it before float: right but it didn't work =\

Are you sure you tried it like this and it didn't work?

Code: [Select]

#searcharea {
                 position: relative;
float: right;
padding: 13px 15px 0 0;
margin: 0;
clear: right;
z-index: 1; 
}

#time {
                 position: relative;
font-size: 13px;
font-family: "Segoe UI", "Lucida Grande", Tahoma,Arial, Helvetica, sans-serif;
float: right;
padding: 15px 20px 0 0;
z-index: 2;
}

[koolaid]

oops i removed the z-index when i tried it. I didn't combine position: relative + z-index. It works now .

Thanks Bikken!~

[Bikken]

  Good to hear you got it working.