The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Changing main forum appeareance

Page 1 of 2 1, 2  Next

View previous topic View next topic Go down

Solved Changing main forum appeareance

Post by angel_of_night on October 25th 2013, 6:04 pm

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.


Last edited by angel_of_night on November 2nd 2013, 3:46 pm; edited 1 time in total

angel_of_night
Forumember

Female Posts : 565
Reputation : 10
Language : portuguese

Back to top Go down

Solved Re: Changing main forum appeareance

Post by levy on October 25th 2013, 9:07 pm

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 ?

levy
Hyperactive

Male Posts : 2566
Reputation : 344
Language : Romanian, English
Location : Romania | Feel free to tag me into your topic if you have a problem

http://help.forumotion.com/

Back to top Go down

Solved Re: Changing main forum appeareance

Post by angel_of_night on October 25th 2013, 10:23 pm

Hello. Very Happy

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. Smile

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

Female Posts : 565
Reputation : 10
Language : portuguese

Back to top Go down

Solved Re: Changing main forum appeareance

Post by Ange Tuteur on October 26th 2013, 12:24 am

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

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Changing main forum appeareance

Post by angel_of_night on October 27th 2013, 2:10 am

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)

angel_of_night
Forumember

Female Posts : 565
Reputation : 10
Language : portuguese

Back to top Go down

Solved Re: Changing main forum appeareance

Post by Ange Tuteur on October 27th 2013, 4:54 am

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.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Changing main forum appeareance

Post by angel_of_night on October 27th 2013, 12:22 pm

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

angel_of_night
Forumember

Female Posts : 565
Reputation : 10
Language : portuguese

Back to top Go down

Solved Re: Changing main forum appeareance

Post by Sanket on October 27th 2013, 12:48 pm

Which problem is pending now?

Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

Solved Re: Changing main forum appeareance

Post by angel_of_night on October 27th 2013, 1:20 pm

Vertical straight lines.

angel_of_night
Forumember

Female Posts : 565
Reputation : 10
Language : portuguese

Back to top Go down

Solved Re: Changing main forum appeareance

Post by Sanket on October 27th 2013, 1:28 pm

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

Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

Solved Re: Changing main forum appeareance

Post by Ange Tuteur on October 27th 2013, 2:03 pm

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

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Changing main forum appeareance

Post by angel_of_night on October 27th 2013, 5:30 pm

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. Smile 

angel_of_night
Forumember

Female Posts : 565
Reputation : 10
Language : portuguese

Back to top Go down

Solved Re: Changing main forum appeareance

Post by angel_of_night on October 29th 2013, 3:45 pm

Bump.

angel_of_night
Forumember

Female Posts : 565
Reputation : 10
Language : portuguese

Back to top Go down

Solved Re: Changing main forum appeareance

Post by Sir Chivas™ on October 29th 2013, 6:22 pm

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

Sir Chivas™
Support Moderator
Support Moderator

Male Posts : 6756
Reputation : 428
Language : English, Spanish, and French
Location : || CSS || HTML || Graphics Designs || Support ||

Back to top Go down

Solved Re: Changing main forum appeareance

Post by angel_of_night on October 29th 2013, 6:24 pm

Thank you very much. Smile

angel_of_night
Forumember

Female Posts : 565
Reputation : 10
Language : portuguese

Back to top Go down

Solved Re: Changing main forum appeareance

Post by Ange Tuteur on October 29th 2013, 8:34 pm

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

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Changing main forum appeareance

Post by angel_of_night on October 29th 2013, 10:37 pm

1. This one is solved. Thank you. Smile

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 Smile

4. They are not Sad 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!

angel_of_night
Forumember

Female Posts : 565
Reputation : 10
Language : portuguese

Back to top Go down

Solved Re: Changing main forum appeareance

Post by Sir Chivas™ on October 30th 2013, 3:28 am

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.

Sir Chivas™
Support Moderator
Support Moderator

Male Posts : 6756
Reputation : 428
Language : English, Spanish, and French
Location : || CSS || HTML || Graphics Designs || Support ||

Back to top Go down

Solved Re: Changing main forum appeareance

Post by Ange Tuteur on October 30th 2013, 8:37 am

@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!
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.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Changing main forum appeareance

Post by angel_of_night on October 30th 2013, 12:42 pm

Sir Chivas™ none of those codes worked Sad.
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. Sad

----
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. Smile

angel_of_night
Forumember

Female Posts : 565
Reputation : 10
Language : portuguese

Back to top Go down

Solved Re: Changing main forum appeareance

Post by Ange Tuteur on October 30th 2013, 1:48 pm

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.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Changing main forum appeareance

Post by angel_of_night on October 31st 2013, 4:57 pm

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 Smile

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 Very Happy

angel_of_night
Forumember

Female Posts : 565
Reputation : 10
Language : portuguese

Back to top Go down

Solved Re: Changing main forum appeareance

Post by Ange Tuteur on October 31st 2013, 7:20 pm

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

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Changing main forum appeareance

Post by angel_of_night on November 1st 2013, 4:16 pm

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

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. Sad
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? Smile


angel_of_night
Forumember

Female Posts : 565
Reputation : 10
Language : portuguese

Back to top Go down

Solved Re: Changing main forum appeareance

Post by Ange Tuteur on November 1st 2013, 5:47 pm

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

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Changing main forum appeareance

Post by angel_of_night on November 1st 2013, 7:32 pm

Code:
tr.row1 > td > a > span,
tr.row2 > td > a > span{
position:relative;
top:30%;
}
That didn't help centering vertically the usernames Sad(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 Very Happy

angel_of_night
Forumember

Female Posts : 565
Reputation : 10
Language : portuguese

Back to top Go down

Solved Re: Changing main forum appeareance

Post by Ange Tuteur on November 1st 2013, 8:08 pm

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%;
}

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Changing main forum appeareance

Post by angel_of_night on November 1st 2013, 8:22 pm

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 Sad

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 Sad

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. pale 

angel_of_night
Forumember

Female Posts : 565
Reputation : 10
Language : portuguese

Back to top Go down

Solved Re: Changing main forum appeareance

Post by Ange Tuteur on November 1st 2013, 8:40 pm

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! Razz

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Changing main forum appeareance

Post by angel_of_night on November 1st 2013, 9:03 pm

Awesome!!! That worked perfectly Very Happy 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! Razz

angel_of_night
Forumember

Female Posts : 565
Reputation : 10
Language : portuguese

Back to top Go down

Page 1 of 2 1, 2  Next

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum