would you recommend some plugin for design?

This topic has 17 replies, 4 voices, and was last updated 10 years by Laura.

Author
August 6, 2015 at 19:47 #72034

sunny0704
Participant

Hi there,

Would you recommend some plugin for design.

I don’t like profile page’s design of sweet date.

I want to change it to kleo’s profile page.

would you recommend some plugin for it?
August 8, 2015 at 05:43 #72221

Laura
Moderator
Hello, you dont need a plugin, just custom css, place this code in style.css or quick css
COPY CODE
```
.tabs.info dd a, .tabs.info li a, #main #object-nav ul li a {
    color: #6f6f6f;
    display: block;
    height: 40px;
    line-height: 40px;
    padding: 15px 20px;
    font-size: 12px;
    text-transform: uppercase;
    font-family: inherit;
    font-weight: normal;
}
.tabs.info dd a, .tabs.info li a, #main #object-nav ul li a {
    color: #C3C3C3 !important;
    display: block;
    font-size: 13px;
    height: 40px;
    line-height: 40px;
    padding: 0px 10px;
}
a#user-notifications:before {
    content: "\f0a2" !important;
}
a#user-activity:before {
    content: "\f039" !important;
}
a#user-xprofile:before {
    content: "\f007" !important;
}
.tabs.info dd.active a, .tabs.info li.active a, #object-nav ul li.current a, #object-nav ul li.selected a, .tabs.info dd.active, .tabs.info li.active, #object-nav ul li.selected, #object-nav ul li.current {
    border: none !important;
}
div#item-nav {
    margin-top: -10%;
    width: 160%;
}
a#user-messages:before {
    content: "\f003" !important;
}
a#user-friends:before {
    content: "\f0c0" !important;
}
a#user-friends:before {
    content: "\f118" !important;
}
a#user-forums:before {
    content: "\f0e6" !important;
}
.item-list-tabs.no-ajax#object-nav a:before {
    font: 400% "FontAwesome";
    content: "\f144";
    display: block;
    text-align: center;
    transition: all 0.4s ease-in-out 0s;
}
a#user-settings:before {
    content: "\f013" !important;
}
div.item-list-tabs#object-nav {
    margin-top: 0;
    color: #6f6f6f;
    display: block;
    height: 40px;
    line-height: 40px;
    padding: 15px 50px 50px;
    font-size: 12px;
    text-transform: uppercase;
    font-family: inherit;
    font-weight: normal;
}
div#item-nav {
    margin-top: -10%;
    width: 160%;
    padding-bottom: 60px;
}
.tabs.info, #object-nav ul {
    list-style: none;
    border-bottom: solid 1px #e6e6e6;
    display: block;
    height: 100px;
    padding: 0;
    margin-bottom: 40px;
}
div#bp_core_members_widget-7 {
    color: #777777;
    margin-top: 25%;
}
```
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution
August 13, 2015 at 16:18 #72867

sunny0704
Participant

Hi Laura,

Firstly, I want to say thank you for your supporting.

I applied your code on my website.

It looks very good, much much better than before.

But for IE, upper side of icons locate on bottom of profile image.

I attached images on IE and chrome.

Would you recommend some CSS code or something?

and for mobile, those icons make shrink profile page.

would you recommend some code for that also?

Thank you.

August 15, 2015 at 00:12 #73050

Laura
Moderator

Hello, could you share a link to your site and an user to test? 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

August 15, 2015 at 02:17 #73063

sunny0704
Participant

My site is http://www.mypeertutors.com

Thank you.

August 16, 2015 at 15:00 #73262

sunny0704
Participant

Hi Laura,

here is user id and pw

User ID : king4909
password: cccp123478

Thank you.

August 18, 2015 at 10:47 #73529

sunny0704
Participant

Hi Laura,

I didn’t any answer yet for the IE.

As I posted before, after applying your code.

Just IE looks strange. I changed some CSS code to wider some gaps between photo cover and Icon.

It’s the same.

Would you recommend some code for that?

Thank you.

August 20, 2015 at 01:46 #73834

Laura
Moderator

Hello, will deal with this issue in the custom request

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

August 22, 2015 at 13:11 #74150

sunny0704
Participant

Hi Laura,

After applying your code on my web site, icons on mobile is very strange.

I attached capture image.

Would you give me some tips like CSS code for that?

thank you.

August 25, 2015 at 20:42 #74607

Laura
Moderator

Hello, will fix that in the custom request 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

December 4, 2015 at 18:44 #91245

Loyal_Customer
Participant

Hello,

I used the code below to add icons to the profile page navigation. It worked, but it also added the circle icon to all of the buttons on the group page navigation (Please see attached image).

How can I change the icons on the group page navigation (“Home,” “Members,” “Send Invites,” “Manage”) to something else?

Thank you.

.tabs.info dd a, .tabs.info li a, #main #object-nav ul li a {
color: #6f6f6f;
display: block;
height: 40px;
line-height: 40px;
padding: 15px 20px;
font-size: 12px;
text-transform: uppercase;
font-family: inherit;
font-weight: normal;
}
.tabs.info dd a, .tabs.info li a, #main #object-nav ul li a {
color: #C3C3C3 !important;
display: block;
font-size: 13px;
height: 40px;
line-height: 40px;
padding: 0px 10px;
}
a#user-notifications:before {
content: “\f0a2” !important;
}
a#user-activity:before {
content: “\f039” !important;
}
a#user-xprofile:before {
content: “\f007” !important;
}
.tabs.info dd.active a, .tabs.info li.active a, #object-nav ul li.current a, #object-nav ul li.selected a, .tabs.info dd.active, .tabs.info li.active, #object-nav ul li.selected, #object-nav ul li.current {
border: none !important;
}
div#item-nav {
margin-top: -10%;
width: 160%;
}
a#user-messages:before {
content: “\f003” !important;
}
a#user-friends:before {
content: “\f0c0” !important;
}
a#user-friends:before {
content: “\f118” !important;
}
a#user-forums:before {
content: “\f0e6” !important;
}
.item-list-tabs.no-ajax#object-nav a:before {
font: 400% “FontAwesome”;
content: “\f144”;
display: block;
text-align: center;
transition: all 0.4s ease-in-out 0s;
}
a#user-settings:before {
content: “\f013” !important;
}
div.item-list-tabs#object-nav {
margin-top: 0;
color: #6f6f6f;
display: block;
height: 40px;
line-height: 40px;
padding: 15px 50px 50px;
font-size: 12px;
text-transform: uppercase;
font-family: inherit;
font-weight: normal;
}
div#item-nav {
margin-top: -10%;
width: 160%;
padding-bottom: 60px;
}
.tabs.info, #object-nav ul {
list-style: none;
border-bottom: solid 1px #e6e6e6;
display: block;
height: 100px;
padding: 0;
margin-bottom: 40px;
}
div#bp_core_members_widget-7 {
color: #777777;
margin-top: 25%;
}

December 6, 2015 at 06:14 #91450

Laura
Moderator

Hello, please open a new topic for that 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

March 13, 2016 at 08:20 #110179

liam62244
Participant

Laura, ive added the above code to change the style but its not centered properly. and too large icons. Can you send me code that is about 30% smaller icons and more centered bar or more to the left. See my problem on my screenshot of my website.

March 15, 2016 at 04:11 #110638

Laura
Moderator

Hello, can you share an user so i can see your issue and give you the proper code? 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

March 15, 2016 at 05:54 #110657

liam62244
Participant

I have taken the code off because it is too big and overlaps into the sidebar.
here is a random user / member
http://www.bkksingles.com/members/siriphat_l/

March 18, 2016 at 00:19 #111401

Laura
Moderator

Hello, lets stay at your topic 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

March 18, 2016 at 02:32 #111423

liam62244
Participant

?? you asked me to share a user

March 19, 2016 at 14:53 #111737

Laura
Moderator

Hello, i ment as we already have a topic for that lets do that there 🙂 Sorry for the misunderstanding

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution
Author

Posts