Changing main forum appeareance

[angel_of_night]

Hello.
I want to change some stuff on my forum.
This is how it looks right now:

So:
1: I want to add some lines between the posts/topics/last posts and between the sections.
2: I want to fill the whole title with an image, as right now it's not filled up for some reason.

Like this:



Forum URL: http://www.namelesscraft.org/

Thanks in advance.

[levy]

Hello , add that code in your CSS

Code:

li.row {
border-bottom: 1px solid rgb(53, 53, 53);
border-top: 1px solid black;
}

and you have the title centered ,you still want to move on the left the text ?

[angel_of_night]

Hello.

Thank you for helping me so far, I don't understand your question, I didn't ask about centering title on my topic, because I found out how to do it.

Now, the question 2 wasn't answered, I couldn't get the image to fill the whole title. Also, those lines are great, but they are only horizontal, isn't there any way to make vertical as well? Like how I posted in the second image.

Right now it's like this:


Also I realized a "border" (marked as blue) around the categories, but I want to get rid of it, I am not sure which code is making it.
I also still want lines between the forum icon/topics/lasts posts etc. though.

[Ange Tuteur]

For vertical lines you would use this:

Code:

dd.topics, dd.posts, dd.lastpost{
border-left:1px solid #353535 !important;
}

As for the background image for the header, remove your current image and add this code to your CSS. It needs to be applied to the forabg background so it can maintain the rounded corners.

Code:

div.forabg{
background-image:url('http://img715.imageshack.us/img715/3922/obsidianl.png');
background-repeat:repeat-x;
}

[angel_of_night]

That helped to fill the title, thank you, but it still has 1 pixel over the horizontal line, how to get rid of it?
Also, the vertical lines aren't straight, they are broken, I want them straight.
Also, how to make the horizontal lines to get filled until the section border?
Thank you.




Also, if I click a section, doesn't have any image in the titles. (TOPICS REPLIES VIEWS LAST POSTS)

[Ange Tuteur]

For the forumbgs remove the old one I gave you and add this:

Code:

div.forabg, div.forumbg{
background-image:url('http://img715.imageshack.us/img715/3922/obsidianl.png');
background-repeat:repeat-x;
background-size:29px;
}

Adjust background-size if it isn't sized correctly.

For the vertical borders, that will take some work. I've spent some time writing up a few formulas, but I've not found anything that worked perfect, yet.

[angel_of_night]

The above code is working perfectly fine, thank you very much.
Also thanks for trying a code to help me.

[Sanket]

Which problem is pending now?

[angel_of_night]

Vertical straight lines.

[Sanket]

I don't see any vertical lines as appearing in your screenshot.

[Ange Tuteur]

Okay, after some rest I decided to give it another go for the vertical borders.

Topics and posts are positioned absolutely which allowed me to expand their height without falling out of dl.icon. It also gave lastpost some more room, which will hopefully keep most of the content from wrapping. Anyhow the code is below, give it a try to see if it works properly for you.

Code:

dl.icon{
position:relative;
}
dd.topics{
position:absolute;
top:0px;
bottom:0px;
right:250px;
border-left:1px solid #353535 !important;
}
dd.posts{
position:absolute;
top:0px;
bottom:0px;
right:190px;
border-left:1px solid #353535 !important;
border-right:1px solid #353535 !important;
}
dd.lastpost{
float:right !important;
width:190px;
}
div.forabg > div > ul > li.header > dl > dd,
div.forumbg > div > ul > li.header > dl > dd{
border:none !important;
padding-bottom:3px !important;
}

If it does, this should be the result:


EDIT:

Before I forget, you need to add this for subjects: (I have also updated the codes above some, grab and paste them again in case you already have.)

Code:

dd.views{
position:absolute;
top:0px;
bottom:0px;
right:265px;
border-left:1px solid #353535 !important;
}
li.row1 > dl.icon > dd > strong.pagination,
li.row2 > dl.icon > dd > strong.pagination{
position:absolute;
right:370px;
}


[angel_of_night]

Thank you very much!!! Those codes are absolutely perfect!
Although I am still having some appearance problems in my forum.

1.
I need to center this (annoucement & sticky, topics titles).


2.
I've noticed that if I have sub-categories on a forum, the topic titles and numbers aren't centered:


3.
The number of topics/posts/views are floating on the top.


I intend to make them on the center, like this:


4.
The Who Is Online, doesn't have any lines as well, I want it to also have lines:


What I intend:


5.
Lastly, the member list also doesn't have any lines at all.


I want it like this:


Sorry for this many questions and I appreciate all your efforts to help me.  

[angel_of_night]

Bump.

[Sir Chivas™]

Im using my mobile to access the forum. Once i get home ill help you out!

[angel_of_night]

Thank you very much.

[Ange Tuteur]

1:

This should center those titles, though with the positioning changes applied they may not fully center as they should.

Code:

li.header > dl > dt,
li.header > dl > dd.dterm{
text-align:center;
}

2:

This may have been a positioning error on my part. Replace the old dd.topics with this one to see if it clears up:

Code:

   dd.topics{
    position:absolute;
    top:0px;
    bottom:0px;
    right:267px;
    border-left:1px solid #353535 !important;
    }

3:

I will have to look into this when I'm not busy, currently I've no idea on vertically aligning the strings inside.

4 & 5:

Those lines should already be present. They're set by the forumbg background colors.

Try this to see if they apply:

Code:

.forabg, .forumbg{
background-color:#353535;
}

[angel_of_night]

1. This one is solved. Thank you.

2. This one didn't work, it's weird because it's only affecting the SUB-Forums. If I do that code, the Topics titles and numbers in the index will move. It fixes the sub-forums one though. http://www.namelesscraft.org/f22-namelesscraft-10 check it here.

3. Thank you

4. They are not That code only changed the background color of the Forum.

If you don't mind, I will PM you a test account so you can check up to those issues. Thank you!

[Sir Chivas™]

Hi,

Problem #2:
Find this inside your CSS:

Code:

dd.topics {
border-left: 1px solid #353535!important;
bottom: 0;
position: absolute;
right: 250px;
top: 0;
}

Replace it with this:

Code:

dd.topics {
border-left: 1px solid #353535!important;
bottom: 0;
position: absolute;
right: 265px !important;
top: 0;
}

Let me know if anything on the index changes, thank you.

Problem #3:
Add this into your CSS:

Code:

table.table1 tbody td {
border-top: 1px solid #353535 !important;
border-left: 1px solid #353535 !important;
padding: 5px;
}

If you don't like the way the code above gives you the border lines, try this one instead:

Code:

table.table1 tbody td {
padding: 5px;
border-left: 1px solid #353535 !important;
border-top: 1px solid #353535 !important;
}

If you have anymore concerns or issues, please let me know.

Note: Please make sure to remove the first code first before adding the second option. If you don't, sometimes small bugs pop-out.

Regards,
Sir Chivas.

[Ange Tuteur]

4. They are not :(That code only changed the background color of the Forum.

If you don't mind, I will PM you a test account so you can check up to those issues. Thank you!

Thanks, I made a few edits but this should return those lines:

Code:

dl.icon{
background-color:#111 !important;
}
li.header > dl.icon{
background-color:transparent !important;
}
.forabg, .forumbg{
background-color:#353535;
}
tr.row1 > td,
tr.row2 > td{
background-color:#111;
}
.forumbg table.table1{
margin-top:5px;
}

We still have to recolor the forumbg, but the old color is still present in the data cells. It should look like this:


and this:


If it needs any adjusting say. We could try to fill the entire forumbg by decreasing margin, and removing the border radius for only the bottom.

[angel_of_night]

Sir Chivas none of those codes worked .
For the problem 2. it is only affecting the topics on the sub-forums, and indeed changed the index ones, as it's changing every single one of them. You can check here what I am talking about: http://www.namelesscraft.org/f22-namelesscraft-10
For some reason, the TOPICS here are aligning to the right, instead of the center, but the index ones are fine.

For the problem 3. none of those codes worked either.

----
SethC1995,  Thank you that worked fine! However for the member list, I want a line that separates the avatar from the username, as it's looking weird right now. Is it possible?
Also, it's not possible to put the black line under the gray line like it's showing in the index?
Like this:


Thank you very much.

[Ange Tuteur]

Oh I forgot, you should add this for the quick login:
The text was black on black background when I used

Code:

input.post{
color:#fff;
}

Okay for the avatar separator I used a border to the right of the image. To adjust it I had to add some padding, remove margin, and increase the cell size to prevent large usernames from breaking the border, as well as some centering for the usernames.

Code:

.avatar-mini img{
border-right:1px solid #353535;
padding-right:5px;
background-color:transparent !important;
padding-top:13px;
padding-bottom:11px;
margin-top:-6px;
margin-bottom:-6px;
}
td.avatar-mini{
width:22%;
}
tr.row1 > td > a > span,
tr.row2 > td > a > span{
margin-top:9%;
}

Adjust width:22%; on avatar img to increase/decrease the cell size.

It should look like this when applied:


As for the black border, I am not sure on that, as I am not able to add a border to the data cells or rows in the memberlist.

[angel_of_night]

Hello. I added that code but I can't notice any changes to the quick login.

And I am sure it's possible to add that black separator as well as I checked some forums that have it. For example this one: http://demo.nicetheme.com/memberlist?theme_id=153126
Has the background lines plus the black one, and I want it on my forum

Also.. I know I am being picky, but it's not possible to separate the avatar to the username? Instead of AVATAR - USERNAME to be AVATAR  USERNAME without the dash..
Also, it's is possible to center eveything?

LIKE THIS:


Thank you very much

[Ange Tuteur]

You're welcome,

Use this to rename 'AVATAR - USERNAME' to 'AVATAR USERNAME' and fix the position of the text.

Code:

th.name:after{
content:"Avatar Username";
position:absolute;
left:105px;
word-spacing:50px;
color:#fff !important
}
th.name{
color:transparent !important;
}

Try this for centering the text:

Code:

#memberlist.table1{
text-align:center;
}
.avatar-mini img{
float:left;
}

For the quick login, I was talking of this one:
The text was black when I used it, its white now.


Thanks for linking me to that theme, this should add the black border:
It wont break the other borders though.

Code:

table.table1 tbody td {
border-top: 1px solid #000;
}

[angel_of_night]

Allright! Thank you very much for also suggesting to improve my forum.

I encountered a few problems though.
1. On the memberlist, the code

Code:

.avatar-mini img{
float:left;
}

is messing up with the username, which makes it floating to the top, instead of floating to the middle, like everything else.
Also the titles "JOIN DATE"/"LAST VISIT" aren't centered.

2. On the "Who is Online" list, the "USERNAME" was replaced by "AVATAR USERNAME" now, because of the memberlist codes.
Also, could you help me center everything in the "Who is online" list? The titles and text. Also the "LAST UPDATED" tab is located too much to the right, can you help me move it more to the center?

[Ange Tuteur]

Ah I just noticed that, the float rendered our top margin useless. I'll try relative positioning to vertically align the usernames:

Code:

tr.row1 > td > a > span,
tr.row2 > td > a > span{
position:relative;
top:30%;
}

Last date and visit are centered for me, perhaps you should try clearing your cookies/cache to see if that clears it up?

Since .name affects multiple tables and there really isn't any parents for me to use, your other option would be renaming it to something else, or just remove it altogether.

This is all I had for now:

Code:

.name:after{
content:"Profile";
color:#fff !important
}
.name{
color:transparent !important;
}

To center the content in viewonline, we'll have to edit the forumbg which could edit other parts of the forum as well, but I think this should only modify the viewonline table.

Code:

.forumbg table.table1{
text-align:center;
}

Use this to center the table titles:

Code:

.name, .active, .info{
text-align:center !important;
}

[angel_of_night]

Code:

tr.row1 > td > a > span,
tr.row2 > td > a > span{
position:relative;
top:30%;
}

That didn't help centering vertically the usernames (I replaced for the code you gave me before)

"LAST VISIT" Title is centered now but "JOIN DATE" isn't, I even checked another browsers and it's the same.

Also, would be possible to add avatar to the "Who is Online" list? If so, that would be awesome, I wouldn't have to delete the code.

I also mean by centering the "Who is Online" center everything, not just the names, do something like this:


Thanks alot again

[Ange Tuteur]

My apologies I misread your last post. This should center the Joined title text:

Code:

.joined{
text-align:center !important;
}

It may be the use of percentage, try with pixels to see if the names align properly on the memberlist:

Code:

tr.row1 > td > a > span,
tr.row2 > td > a > span{
position:relative;
top:15px;
}

Adding an avatar in viewonline would have to be done with javascript to edit the DOM, and I am not skilled with that right now.

So for the viewonline you want to try and evenly distribute width for the cells? I believe this should do it:

Code:

.forumbg table.table1 tr > td{
width:30%;
}


[angel_of_night]

It's ok, and thanks again for the help!

Awww, those codes makes the memberlist perfect, but they mess up with the who is online one

Code:

tr.row1 > td > a > span,
tr.row2 > td > a > span{
position:relative;
top:15px;
}

This code is making the usernames on the who is online to go down as well

Code:

.forumbg table.table1 tr > td{
width:30%;
}

and this code is making the memberlist messed up, too big, though it makes the who is online pretty good.

I never though customizing a forum would be such a pain... is getting me frustrated as well, lol.  

[Ange Tuteur]

Thanks for pointing that out, I think I almooost have it!

Try this for the cell width, I added another piece to prevent the width being modified on the memberlist. It looked to be only the numbers.

Code:

.forumbg table.table1 tr > td{
width:30%;
}
#memberlist.table1 tr > td:nth-child(1){
width:auto;
}

I believe using the memberlist ID should keep the alignment only to the memberlist, so remove the old one and try this code:

Code:

#memberlist.table1 tr > td > a > span{
position:relative;
top:15px;
}

That's how it can go sometimes when redesigning..You fix one thing, then you find out it breaks something else!

[angel_of_night]

Awesome!!! That worked perfectly now it's just the usernames on the who is online that needs to be fixed.

And yea, it's true, I guess it's not an easy job at all to make forums to look good!