Group page navigation

[Loyal_Customer]

Hello,

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

[Laura]

Hello, what icons do you mean? There are no icons at the demo site groups

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 🙂

[Loyal_Customer]

Hello,

I am referring to the FontAwesome icons in the screenshot that I sent to you in the other forum (https://archived.seventhqueen.com/forums/topic/would-you-recommend-some-plugin-for-design). I would like to change the circle icons on the group page to a different icon.

[Laura]

Hello, as its not something that is in the demo i need to check it out at your website an as i know it was offline?

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 🙂

[Loyal_Customer]

Which template file is responsible for the design and wordings of the individual group pages? (The pages labeled “Home,” “forum,” “Members,” “Send Invites,” “Manage,” etc.)

[Laura]

Hello, that can be translated using plugins like Loco Translate

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 🙂

[Loyal_Customer]

Hello,

I am not trying to translate it. I am trying to add icons above the words on the profile page and group page navigation bar like KLEO (Please see the attached photo). Instead of symbols, I would like to add images that are saved in my wp-content/uploads. Similar to this, but for Sweetdate —> https://archived.seventhqueen.com/forums/topic/icons-profile.

Thank you.

Attachments:

You must be logged in to view attached files.

[Laura]

Hello, try adding this to style.css

COPY CODE

@media (max-width: 991px) {
li.dropdown.pull-right.tabdrop.open li a:before {
    height: 50px !important;
    width: 50px;
    margin-bottom: 10px;
}
a#user-members-compliments:before {
    margin-left: 0% !important;
}
#buddypress div#item-nav ul #settings-personal-li a:before, #buddypress div#item-nav ul #admin-groups-li a:before {
    width: 50px !important;
}
}
a#user-album {
    width: 70px;
}
a#user-media:before {
    background-image: url('http://seventhqueen.com/wp-content/themes/kleo/assets/ico/favicon.png');
    background-size: cover;
    display: block;
    height: 57px;
    margin-bottom: -4px !important;
}
a#user-album:before {
background-image: url('http://seventhqueen.com/wp-content/themes/kleo/assets/ico/favicon.png');

    background-size: cover;

    display: block;
}
a#user-forums:before {
background-image: url('http://seventhqueen.com/wp-content/themes/kleo/assets/ico/favicon.png');

    background-size: cover;

    display: block;
}
a#user-activity:before {

    background-image: url('http://seventhqueen.com/wp-content/themes/kleo/assets/ico/favicon.png');

    background-size: cover;

    display: block;

}
a#user-xprofile:before {

    background-image: url('http://seventhqueen.com/wp-content/themes/kleo/assets/ico/favicon.png');

    background-size: cover;

    display: block;

}
a#user-media:before {
    background-image: url('http://seventhqueen.com/wp-content/themes/kleo/assets/ico/favicon.png');

    background-size: cover;

    display: block;
}
a#user-messages:before {

    background-image: url('http://seventhqueen.com/wp-content/themes/kleo/assets/ico/favicon.png');

    background-size: cover;

    display: block;

}

a#user-friends:before {

    background-image: url('http://seventhqueen.com/wp-content/themes/kleo/assets/ico/favicon.png');

    background-size: cover;

    display: block;

}

a#user-notifications:before {

    background-image: url('http://seventhqueen.com/wp-content/themes/kleo/assets/ico/favicon.png');

    background-size: cover;

    display: block;

}

a#user-members-compliments:before {

    background-image: url('http://seventhqueen.com/wp-content/themes/kleo/assets/ico/favicon.png');

    background-size: cover;

    display: block;

}

a#user-settings:before {

    background-image: url('http://seventhqueen.com/wp-content/themes/kleo/assets/ico/favicon.png');

    background-size: cover;

    display: block;

}
a.dropdown-toggle:before {
   background-image: url('http://seventhqueen.com/wp-content/themes/kleo/assets/ico/favicon.png');

    background-size: cover;

    display: block;

}
a#user-notifications:before {
    background-image: url('http://seventhqueen.com/wp-content/themes/kleo/assets/ico/favicon.png');
    background-size: cover;
    display: block;
    margin-left: 15%;
}
ul.responsive-tabs li a:before {
    color: transparent !important;
    width: 50px;
}
.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;
    color: transparent;
    width: 60px;
    height: 56px;
    margin-bottom: -4px;
}
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;
}
.tabs.info dd.active a:after, #object-nav ul li.current a:after, #object-nav ul li.selected a:after {
    display: none;
}
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%;
}
.buddypress .widgets-container.sidebar_location {
    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 🙂

[Laura]

This for mobile

COPY CODE

@media only screen and (max-width: 940px) {
div#item-nav {
    margin-top: -10%;
    width: 100%;
    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;
    border: none;
    width: 300px !important;
    margin-left: -50px;
}
#object-nav ul li {
    display: block;
    float: left;
    padding: 0;
    margin: 0;
    position: relative;
    border-top: none;
    border-bottom: 2px solid #fff;
    margin-bottom: 40px;
}
}

Add to style.css

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 🙂

[Loyal_Customer]

Thank you for your help 🙂

It worked for the user profile page, but the group page still doesn’t have an image icon.

How can I apply the favicon “background image” that you placed in the code (‘http://seventhqueen.com/wp-content/themes/kleo/assets/ico/favicon.png’) into the the group page navigation as well?

Attachments:

You must be logged in to view attached files.

[Laura]

Hello, can you share the css you used for the groups page 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 🙂

[Loyal_Customer]

Hello,

Okay 🙂 I used this—-

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

[Laura]

Hello, but those are not the group ones

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 🙂

[Loyal_Customer]

That is the only code I put in the Sweetdate Child: Stylesheet (style.css), and the circles with the little triangles that I showed you in the screenshot appeared on the group page navigation. I don’t know why…

If you put that code in the Sweetdate child Stylesheet, it affects the group ones too for some reason, and I’m not able to change the icons. I would like to use the right code to change the circles to something else.

[Laura]

Hello, i can test that if i see the site, but you are still offline?

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 🙂

[Loyal_Customer]

Hello,
Yes, I’m still offline, but I know you can still help even though I’m still offline.

[Laura]

Hello, try maybe

COPY CODE

li#home-groups-li a:before {
    content: "\f007" !important;
}
li#members-groups-li a:before {
    content: "\f007" !important;
}
li#admin-groups-li a:before {
    content: "\f007" !important;
}
li#invite-groups-li a:before {
    content: "\f007" !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 🙂

[Author]

Posts