CSS code to fix the table

by Brandon October 18th 2008, 9:38 pm

I need to move the bar up so that it's flush with the top of the table. I'm not sure how to do it. Here is the CSS code for the table.

CSS code to fix the table 2rxaf76

Code:: /* Table-------------------------------------------------*/ .forabg { margin-bottom: 10px; clear: both; background-color: #393939; background-image: background-repeat: repeat-x; background-position: 0 0; border: 0px solid #101010; padding: 0px 0px; height: 1%; } .forumbg { background-color: #393939; background-image: background-repeat: repeat-x; background-position: 0 0; border: 0px solid #101010; padding: 0px 0px; margin-bottom:0px; clear: both; height: 1%; } .forumbg table.table1 { margin: 0 0px 0px 0px; } ul.topiclist { list-style-type: none; margin: 10; height: 1%; margin-top: 10px; background-image: url('http://upshizzle.com/temp/i_list_bg_orange.png') ; background-repeat: repeat-x; border-color: #000000; border: 1px; color: #fffff1; } ul.topiclist li { display: block; margin: 0; } * html ul.topiclist li { position: relative; } ul.topiclist li.row dl { padding: 2px 0; } ul.forums li.row dl { min-height: 30px; } * html ul.forums li.row dl { height: 30px; } ul.topiclist dt { display: block; float: left; width: 60%; font-size: 1.1em; padding-left: 2px; padding-right: 2px; } ul.topiclist dfn { display: none; } ul.topics li.header dl.icon dt { padding-right: 60px; } ul.topics dt { padding-left: 55px; display: block; float: left; width: 50%; } ul.topics dd { display: block; float: left; } ul.forums { background-color: #393939; background-image: none; } li.header dl.icon { min-height: 0; } li.header dl.icon dt { padding-left: 0; } li.header dt { font-weight: bold; } li.header dd { margin-left: 1px; } dl.icon { min-height: 35px; background-position: 10px 50%; background-repeat: no-repeat; height: auto !important; height: 35px; } dl.icon dt { background-repeat: no-repeat; background-position: 5px 95%; } li.header dt, li.header dd { line-height: 1em; border-left-width: 0; margin: 10px 0 10px 0; color: #ffffff; padding-top: 5px; padding-bottom: 5px; font-size: 1em; font-family: Arial,Helvetica,sans-serif,Verdana,Arial,Helvetica,sans-serif; text-transform: uppercase; } li.row { border-top: 0px solid #ffffff; border-bottom: 0px solid #ffffff; } li.row:hover { background-color: #343434; } ul.topiclist dd { border-left: 1px solid #ffffff; display: block; float: left; padding: 4px 0; } ul.topiclist li.header dl dd { border: none; } dd.lastpost span, ul.topiclist dd.searchby span, ul.topiclist dd.info span, ul.topiclist dd.time span, dd.redirect span, dd.moderation span { display:block; padding-left:5px; } ul.pmlist dt { padding-left: 45px; } ul.forums dd { border-color: #ffffff; border-left-style: solid; border-left-width: 0px; } li.row:hover dd { border-left-color: #ffffff; }

by Adiex October 18th 2008, 10:07 pm

hello,
im not sure if this can be done via editing CSS code. btw, maybe you can just rotate that bar using any image editor so that glowing part will be on top. just re upload it back and set it as bar Smile

by Brandon October 18th 2008, 10:35 pm

I think the way this theme is set up, you have to edit it through CSS...

by Adiex October 18th 2008, 10:48 pm

i mean you still need edit some CSS to upload you bar there. try follow this step and see if you can make it work.

1. save you current bar images to your computer hard disk.
2. Open this images using any image editor. let say using paint or photoshop. Rotate that images 180 degree & save it
3. Re-upload that images & after got an URL for that, put it on red mark on that code below

/* Table-------------------------------------------------*/
.forabg {
margin-bottom: 10px;
clear: both;
background-color: #393939;
background-image: url('image URL');
background-repeat: repeat-x;
background-position: 0 0;
border: 0px solid #101010;
padding: 0px 0px;
height: 1%;
}
.forumbg {
background-color: #393939;
background-image: url('image URL');
background-repeat: repeat-x;
background-position: 0 0;
border: 0px solid #101010;
padding: 0px 0px;
margin-bottom:0px;
clear: both;
height: 1%;
}
.forumbg table.table1 {
margin: 0 0px 0px 0px;
}

4. After putting that url to this code, copy all of it and paste to customize CSS stylesheet on admin panel.

hope it work!

ps: im sorry to use color letter but it needed to make this explanation more clear. Smile

by Brandon October 19th 2008, 12:29 am

that's just going to add another bar on top of the already existing bar. I want the existing bar to be moved up and to sit flush with the table..

by Adiex October 19th 2008, 4:11 pm

forget to mention that you need to clear up you previous bar. Replace it with empty images before added the customize CSS.

ACP > Display > pic & color management > picture management > advance mode > General / Explore

replace the images for 'Background picture (Row title)', 'Background picture (Row category left)' & Background picture (Row category right) with this empty images : https://2img.net/i/fa/empty.gif

dont forget to backup you current bar images incase this not working really well, or better you try it on your test forum if you got any.

try it, it work pretty well on my forum thumleft

by Brandon October 19th 2008, 6:49 pm

The theme's table is all controlled through the CSS. All of the images under pics mgmt are already set to empty.

by Adiex October 19th 2008, 7:09 pm

well that problematic, can you tell me what themes do you use so i can try it myself?

by Brandon October 19th 2008, 7:14 pm

http://en.hitskin.com/search-a-skin/midnight-blue-119168.htm

by Brandon October 19th 2008, 7:17 pm

the problem is, the table has a double bar. the blue bar has the words for the forum in it, and then there's a bar on top of the blue bar. if you take the bar that's on top of the blue bar off, then you're left with the blue bar being down too low on the table.

CSS code to fix the table Upl7360938410

by Brandon October 19th 2008, 7:18 pm

so I guess what I'm saying is, I need to flip flop the bars...

by Adiex October 19th 2008, 7:20 pm

well, i think there is option on CSS code to remove that double bar, just hold on there while i try look on it Smile

edit : im sorry brandon, it seem im almost got the answer for this problem but don't have enough time to complete it. its already late night on my place and i need to sleep because it working day tomorrow. btw, i think other member can help you there or just wait Sunny_D to online because he might can help you there.

sorry again =(

by Adiex October 20th 2008, 1:35 pm

hello brandon,

if your problem there still not fixed i think i already got solution for it, shall we continue?

first, you need to find this script on your CSS, it will be exact same because i got it on your theme at hitskin.com

Spoiler:

look on red letter because that part your gonna need to edit it.
replace this one

Spoiler:

with this :

Spoiler:

and replace this :

Spoiler:

with this :

Spoiler:

finally you need replace both of this images bar :

https://2img.net/h/i191.photobucket.com/albums/z301/lastfmbadges/topbar.png

with image bar you desired. In you dont forget to scretch your new images just same size with original picture or esle some annoying space will show up at top of your bar.

output :