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.

users profiles border styling

View previous topic View next topic Go down

Solved users profiles border styling

Post by Anzo on October 18th 2014, 5:46 pm

Hello.

I'd like to further customize our user's profile's data that appears on messages, I know the CSS to do It but from the look of it there is further codes needed to get this done, like JS for example - which I have absolutely no experience of.

Currently, our profiles are looking like this: http://i.imgur.com/XQH1jIY.png
While I'd like to have those extra borders on bottom of each profile, like this: http://i.imgur.com/zb1ezwr.png
(I made the 2nd one with PS just to make this easier to understand)

It's nothing big I believe, so thanks in advance Smile

Anzo
Forumember

Posts : 316
Reputation : 6
Language : English/Arabic
Location : Baghdad - Iraq

http://www.duelacademy.net/forum

Back to top Go down

Solved Re: users profiles border styling

Post by Ramdaman on October 18th 2014, 5:50 pm

I believe that's a horizontal line. Go to Administration Panel => Users & Groups => Users => Profiles => Click the Edit on the ones you want to edit => Separator : Horizontal Bar

Ramdaman
Active Poster

Male Posts : 1614
Reputation : 97
Language : English, Albanian, Macedonian, Russian | HTML, CSS
Location : New York City

http://ndihme.forumotion.com/forum

Back to top Go down

Solved Re: users profiles border styling

Post by Ange Tuteur on October 18th 2014, 5:55 pm

Hello Anzo,

You can also style the fields by adding a class.
Go to Administration Panel > Display > Templates > General > viewtopic_body

Find :
Code:
{postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}

Replace by :
Code:
<div class="userField">{postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}</div>

Save and publish. Add


Then you can use CSS to edit its style :
Display > Colors > CSS

Rule :
Code:
.userField {
 border-bottom:1px solid #333;
}

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: users profiles border styling

Post by Ramdaman on October 18th 2014, 5:58 pm

I was also going to add that if you use the horizontal line via profile option, you can color the lines with this:

Go to your CSS Stylesheet and insert this:
Code:
div.user-info hr {
  border-color: #484848;
  color: #484848;
}

Ramdaman
Active Poster

Male Posts : 1614
Reputation : 97
Language : English, Albanian, Macedonian, Russian | HTML, CSS
Location : New York City

http://ndihme.forumotion.com/forum

Back to top Go down

Solved Re: users profiles border styling

Post by Anzo on October 19th 2014, 1:44 am

Okay, I did what Ange said.

can i choose which profile fields I can add lines to and which I don't want to add lines to?

Note: I removed the CSS for now, because we have hidden profile fields that shouldn't have lines. When that happen, we're getting these issues:

1. There is hidden profile fields that still getting their lines: http://i.imgur.com/YPsfWwz.png
2. Those are supposed to float next to each other, yet after the new add, they look like this: http://i.imgur.com/6e38I21.png
3. When I removed the CSS, it looks like this now (cuz of template change i presume): http://i.imgur.com/JQbzIf5.png


Anzo
Forumember

Posts : 316
Reputation : 6
Language : English/Arabic
Location : Baghdad - Iraq

http://www.duelacademy.net/forum

Back to top Go down

Solved Re: users profiles border styling

Post by Ramdaman on October 19th 2014, 2:31 am

Try using my way, you can choose which fields get a line and which don't.

Ramdaman
Active Poster

Male Posts : 1614
Reputation : 97
Language : English, Albanian, Macedonian, Russian | HTML, CSS
Location : New York City

http://ndihme.forumotion.com/forum

Back to top Go down

Solved Re: users profiles border styling

Post by Ange Tuteur on October 19th 2014, 6:36 am

If you just want a line on specific fields, do as Ramdaman instructed. Smile

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: users profiles border styling

Post by Anzo on October 19th 2014, 6:45 am

Oh, okay, I'll try that out and get back to you Smile

EDIT: Ramadan method gets the job done, thanks for the help friends Wink

Anzo
Forumember

Posts : 316
Reputation : 6
Language : English/Arabic
Location : Baghdad - Iraq

http://www.duelacademy.net/forum

Back to top Go down

Solved Re: users profiles border styling

Post by Ange Tuteur on October 19th 2014, 8:15 am

Super

Topic archived

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


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