Changing main forum appeareance
The forum of the forums :: Support forum :: Forum Design & Appearance Help :: Design & Appearance Problems Archives
Page 1 of 2 • Share •
Page 1 of 2 • 1, 2
Changing main forum appeareance
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.
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.
Last edited by angel_of_night on November 2nd 2013, 3:46 pm; edited 1 time in total
angel_of_night- Forumember
-
Posts : 565
Reputation : 10
Language : portuguese
Re: Changing main forum appeareance
Hello , add that code in your CSS
- Code:
li.row {
border-bottom: 1px solid rgb(53, 53, 53);
border-top: 1px solid black;
}
Re: Changing main forum appeareance
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.

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.
angel_of_night- Forumember
-
Posts : 565
Reputation : 10
Language : portuguese
Re: Changing main forum appeareance
For vertical lines you would use this:
- Code:
dd.topics, dd.posts, dd.lastpost{
border-left:1px solid #353535 !important;
}
- Code:
div.forabg{
background-image:url('http://img715.imageshack.us/img715/3922/obsidianl.png');
background-repeat:repeat-x;
}
Re: Changing main forum appeareance
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)

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)

angel_of_night- Forumember
-
Posts : 565
Reputation : 10
Language : portuguese
Re: Changing main forum appeareance
For the forumbgs remove the old one I gave you and add this:
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.
- Code:
div.forabg, div.forumbg{
background-image:url('http://img715.imageshack.us/img715/3922/obsidianl.png');
background-repeat:repeat-x;
background-size:29px;
}
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.
Re: Changing main forum appeareance
The above code is working perfectly fine, thank you very much.
Also thanks for trying a code to help me.
Also thanks for trying a code to help me.

angel_of_night- Forumember
-
Posts : 565
Reputation : 10
Language : portuguese
Re: Changing main forum appeareance
Vertical straight lines.
angel_of_night- Forumember
-
Posts : 565
Reputation : 10
Language : portuguese
Re: Changing main forum appeareance
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.

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.)
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;
}

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;
}
Re: Changing main forum appeareance
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.
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- Forumember
-
Posts : 565
Reputation : 10
Language : portuguese
angel_of_night- Forumember
-
Posts : 565
Reputation : 10
Language : portuguese
Re: Changing main forum appeareance
Im using my mobile to access the forum. Once i get home ill help you out! 

Sir Chivas™- Support Moderator
-
Posts : 6810
Reputation : 433
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||
Re: Changing main forum appeareance
Thank you very much. 

angel_of_night- Forumember
-
Posts : 565
Reputation : 10
Language : portuguese
Re: Changing main forum appeareance
1:
This should center those titles, though with the positioning changes applied they may not fully center as they should.
This may have been a positioning error on my part. Replace the old dd.topics with this one to see if it clears up:
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:
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;
}
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;
}
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;
}
Re: Changing main forum appeareance
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!

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

If you don't mind, I will PM you a test account so you can check up to those issues. Thank you!
angel_of_night- Forumember
-
Posts : 565
Reputation : 10
Language : portuguese
Re: Changing main forum appeareance
Hi,
Problem #2:
Find this inside your CSS:
Problem #3:
Add this into your CSS:
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.
Problem #2:
Find this inside your CSS:
- Code:
dd.topics {
border-left: 1px solid #353535!important;
bottom: 0;
position: absolute;
right: 250px;
top: 0;
}
- Code:
dd.topics {
border-left: 1px solid #353535!important;
bottom: 0;
position: absolute;
right: 265px !important;
top: 0;
}
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;
}
- Code:
table.table1 tbody td {
padding: 5px;
border-left: 1px solid #353535 !important;
border-top: 1px solid #353535 !important;
}
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.
Sir Chivas™- Support Moderator
-
Posts : 6810
Reputation : 433
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||
Re: Changing main forum appeareance
Thanks, I made a few edits but this should return those lines:@angel_of_night wrote: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!
- 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;
}

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.
Re: Changing main forum appeareance
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.


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.

angel_of_night- Forumember
-
Posts : 565
Reputation : 10
Language : portuguese
Re: Changing main forum appeareance
Oh I forgot, you should add this for the quick login:
The text was black on black background when I used
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.
The text was black on black background when I used
- Code:
input.post{
color:#fff;
}
- 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%;
}
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.
Re: Changing main forum appeareance
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
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

angel_of_night- Forumember
-
Posts : 565
Reputation : 10
Language : portuguese
Re: Changing main forum appeareance
You're welcome,
Use this to rename 'AVATAR - USERNAME' to 'AVATAR USERNAME' and fix the position of the text.
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.
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;
}
- Code:
#memberlist.table1{
text-align:center;
}
.avatar-mini img{
float:left;
}
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;
}
Re: Changing main forum appeareance
Allright! Thank you very much for also suggesting to improve my forum. 
I encountered a few problems though.
1. On the memberlist, the code
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?

I encountered a few problems though.
1. On the memberlist, the code
- Code:
.avatar-mini img{
float:left;
}
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?

angel_of_night- Forumember
-
Posts : 565
Reputation : 10
Language : portuguese
Re: Changing main forum appeareance
Ah I just noticed that, the float rendered our top margin useless. I'll try relative positioning to vertically align the usernames:
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:
tr.row1 > td > a > span,
tr.row2 > td > a > span{
position:relative;
top:30%;
}
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;
}
- Code:
.forumbg table.table1{
text-align:center;
}
- Code:
.name, .active, .info{
text-align:center !important;
}
Re: Changing main forum appeareance
- Code:
tr.row1 > td > a > span,
tr.row2 > td > a > span{
position:relative;
top:30%;
}

"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

angel_of_night- Forumember
-
Posts : 565
Reputation : 10
Language : portuguese
Re: Changing main forum appeareance
My apologies I misread your last post. This should center the Joined title text:
So for the viewonline you want to try and evenly distribute width for the cells? I believe this should do it:
- Code:
.joined{
text-align:center !important;
}
- Code:
tr.row1 > td > a > span,
tr.row2 > td > a > span{
position:relative;
top:15px;
}
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%;
}
Re: Changing main forum appeareance
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

I never though customizing a forum would be such a pain... is getting me frustrated as well, lol.
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;
}

- Code:
.forumbg table.table1 tr > td{
width:30%;
}
I never though customizing a forum would be such a pain... is getting me frustrated as well, lol.

angel_of_night- Forumember
-
Posts : 565
Reputation : 10
Language : portuguese
Re: Changing main forum appeareance
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.

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;
}
- Code:
#memberlist.table1 tr > td > a > span{
position:relative;
top:15px;
}

Re: Changing main forum appeareance
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!

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

angel_of_night- Forumember
-
Posts : 565
Reputation : 10
Language : portuguese
Page 1 of 2 • 1, 2
The forum of the forums :: Support forum :: Forum Design & Appearance Help :: Design & Appearance Problems Archives
Page 1 of 2
Permissions in this forum:
You cannot reply to topics in this forum