Profile icon

[Zlato]

Hi i use this code from Laura

.tabs.info dd a, .tabs.info li a, #main #object-nav ul li a {
color: #40FF00;
display: block;
height: 20px;
line-height: 20px;
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: #743349 !important;
display: block;
font-size: 13px;
height: 20px;
line-height: 20px;
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: 250% “FontAwesome”;
content: “\f144”;
display: block;
text-align: left;
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: 20px;
line-height: 20px;
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%;
}

my issues :
1. how to increase the spacing between the icons and sidebar
2. how to change the color profile icons
3. how to change the color alert icon
4. mouse hover, I would like another color, now it’s all the same
5. or there are other icons

and last one is any way to put edit user profile in sidebar. ( basic yet they know how to change additionally been unable to find more in order to supplement their profile)

thx guys

Attachments:

You must be logged in to view attached files.

[Laura]

Hello, please share admin credentials so i can adjust it 🙂

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

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Zlato]

This reply has been set as private.

[Laura]

Hello, add this to style.css of child theme 🙂

COPY CODE

.bbp-user-page .widgets-container.sidebar_location {
    padding-top: 90px;
}
a#user-xprofile:before {
    margin-left: 15%;
}
a#user-notifications:before {
    margin-left: 20%;
}
a#user-messages:before {
    margin-left: 20%;
}
a#user-friends:before {
    margin-left: 20%;
}
li#groups-personal-li a:before {
    margin-left: 20%;
}
a#user-forums:before {
    margin-left: 15%;
}
li#album-personal-li a:before {
    margin-left: 15%;
}
a#user-settings:before {
    margin-left: 25%;
}
div.item-list-tabs ul li a span {
    margin-left: 10px;
}

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

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Zlato]

Hi Laura
this code fix my problem No 1 :).
PLS 2,3,4, 5…

[Laura]

Hello, the code should fix all, try this

COPY CODE

.bbp-user-page .widgets-container.sidebar_location {
    padding-top: 90px !important;
}
a#user-xprofile:before {
    margin-left: 15% !important;
}
a#user-notifications:before {
    margin-left: 20% !important;
}
a#user-messages:before {
    margin-left: 20% !important;
}
a#user-friends:before {
    margin-left: 20% !important;
}
li#groups-personal-li a:before {
    margin-left: 20% !important;
}
a#user-forums:before {
    margin-left: 15% !important;
}
li#album-personal-li a:before {
    margin-left: 15% !important;
}
a#user-settings:before {
    margin-left: 25% !important;
}
div.item-list-tabs ul li a span {
    margin-left: 10px !important;
}
.tabs.info dd.active a:after, #object-nav ul li.current a:after, #object-nav ul li.selected a:after {
    border: none !important;
}

To change icon colors

COPY CODE

.item-list-tabs.no-ajax#object-nav a:before {
    color: black;
}

To change specific icon color, for example, profile icon

COPY CODE

a#user-xprofile:before {
    color: green !important;
}

Notification alert text color + background color

COPY CODE

.tabs.pill.custom dd.active a, .tabs.pill.custom li.active a, div.item-list-tabs ul li a span, #profile .pmpro_label {
    background: green !important;
    color: white !important;
}

You can use any icon you want, just need to change the icons code at the first code, for example, this is the icon code for profile \f007

COPY CODE

a#user-xprofile:before {
content: “<strong>\f007</strong>” !important;
}

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

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Zlato]

Thx Laura

[Laura]

It was a pleasure 🙂

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

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Zlato]

Laura my icons now It’s not responsive

Attachments:

You must be logged in to view attached files.

[Laura]

Hello, this is a custom code, still not polished it may have those issues, i will check it out

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

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Laura]

Right now the best is to hide icons on mobile, replaced your code with this one

COPY CODE

@media screen and (min-width: 800px) {
.tabs.info dd a, .tabs.info li a, #main #object-nav ul li a {
    color: #40FF00;
    display: block;
    height: 20px;
    line-height: 20px;
    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: #743349 !important;
    display: block;
    font-size: 13px;
    height: 20px;
    line-height: 20px;
    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: 250% "FontAwesome";
    content: "\f144";
    display: block;
    text-align: left;
    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: 20px;
    line-height: 20px;
    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

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Zlato]

thx Laura, now is OK

[Laura]

Glad it worked 🙂

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

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[rhino5ice]

Hi Laura – was this code specific to Zlato? I tried to use it by coping and pasting into my style.css in my child theme. Did not seem to work… ?

thanks for any help!

[Laura]

Hello, it should work for anyone, what is your issue? 🙂

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

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Author]

Posts