[SandraParticipant]

Hi,
I’m a novice with wordpress as well as website building so struggle with most things I try to do. I have, however, got a website done that I like. I’m now trying to set up the user community side of my project and decided to use buddypress since X theme specifically supports it. I’m having problems with the layout, colors and fonts on the default pages tho (by saying default I mean the ones that were set up when I activated the plugin). I’ve been trying to read up about it in the knowledge base and forum here, but I’m struggling. And I don’t want to spend time working out how to do this if it’s not going to solve the problem, hence my questions here. Specific issues are:

1. I have found out I shouldn’t be always updating to the latest version of buddypress, so that may be a problem, but I don’t know how to find an old version and replace the version I have with it. Is this would solve my other issues below, can you give me any assistance in how to do this? The version I currently have is 2.3.4 and it says somewhere you curently support buddypress 2.3.2.1?

1. The fonts and colors used on the pages aren’t the defaults I set up for my X theme and it’s very hard to read some of the words because of the color. I found somewhere how to change the font color and I did this in one place, but there are lots of places the color needs changing that weren’t changed so I must have put the font change bit of code in the wrong place? Also in lots of places the fonts are different to what was set up in customizer and clash with the bits of text that DO use the fonts set up in customizer. How do I make these buddypress pages use the font type/color set up in customize?

2. The layout of the pages is dead ugly, and I’m not being fussy I don’t think. I’d be happy if the forum page, for example, looked like your one, but it’s far from it. I know I can’t use cornerstone to make pages. I have read that you supply templates for buddypress pages – is this correct and how would I go about finding them? If not, can you point me in the right direction for a method to change page layouts please?

Please have a look at my site so you can see what I mean. I’ve put some of the buddypress pages in the menu so you can select them.

Website: http://www.groodlesinc.co.nz
X version: updated to latest version today
Wordpress version: 4.3.1
buddypress version: 2.3.4

Many thanks,
Sandra

[Rue NelModerator]

Hello There,

Thanks for providing the very detailed information. To assist you with this issue, we would suggest that the plugin should be active. We can override the fonts and colors via css. Please enumerate in which page and what element you want its color or font size changed.

Please also take note that after you have updated the theme or plugin, since you have installed a caching plugin, you must clear your plugin cache before testing your site. This can cause the changes to not take place on the front end. It will eventually show up when the cache regenerates, but it’s not ideal if you’re looking to see your changes immediately. Caching plugins are best to turn on only when you’ve finished building the site.

Hope this helps. Please let us know how it goes.

[SandraParticipant]

Hi,
Thanks, you seem to have beed spot on with the cache needing to clear, the one change I did to a text colour now seems to have changed on all pages.

When you say X is designed to integrate with buddypress, what form does this integration take? Because I was thinking it would pass on the default fonts and colours to the buddypress pages.
Also do you actually have templates for buddypress pages to change the layout?
How do you guys get your forum page looking nice – do you use buddypress?

Is it really necessary to change each item individually, cause that’s going to be tricky. There are still bits I’d like to change the colour of, but I don’t know the names of the elements, and don’t know how to find out. For example, there is a black box at the top of the activity page, has my username “Sandra” and then @sandra below that. then below again there is an “edit settings” box where the button is one of my default colours but the text in the button is white and hard to read. Below that is a grid of words that must be other buddypress pages or functions – profile, messages, friends, settings, etc, and when the mouse pointer is over them they change colour slightly but you can’t see it as the box is black, the colour they change to is dark grey. Below that is a row of five words – Personal, mentions, favourites, friends, groups. When they are highlighted by the mouse they go my default colour but otherwise they are dark grey. Then below that is a drop down list where the arrow box on the right is white, the box itself is dark grey, and the words themselves on the items in the list are a lighter grey – again vey hard to read. Below that is a fat-edged box where you can input messages etc, and the border is white.

It really looks to me like the problems are caused by changes in the new version that you guys haven’t matched X to yet. Would it just be better for me to revert back to the older version rather than patch-fix things? Are you able to point me to instructions of how to do this and where to find the old version?

Thanks so much for your time,
Sandra

[John EzraMember]

Hi there,

Thanks for updating the thread! Our integration with BuddyPress is by putting styling wrapper around it so it matches the theme. We have not changed any functionalities of the plugin whatsoever so basic styles should carry over.

We’re currently supporting BP v2.3.3 and have not updated yet to 2.3.4. You can download older versions of BP from their site:

https://buddypress.trac.wordpress.org/browser/tags

This should fix most issues until we release an X version supporting the latest release.

Please always check our changelog so you know the latest versions we support.

https://theme.co/changelog/

If you still have issues after that and you are wanting changes related to styling. Please list what you would like and point us to references so it’s easier to understand, then we do our best to tailor our advice to your site.

Hope this helps – thanks!

[SandraParticipant]

Hi, thanks for the link to the old version. I actually found this page better for the download – https://wordpress.org/plugins/buddypress/download/ , the page you listed didn’t load a plugin, don’t know why, but thanks to you I was looking in the right place.
I now have version 2.3.3 installed, so the version you are supporting. Unfortunately none of my issues have been resolved.

First main problem – font colors and button colors.

Example: Activity page – edit settings button has white text on a gold colored button (gold button is default for my site). Also buttons that show number of notifications, groups etc have the same white text on a gold button. There is a large white box where the user can enter things which is ugly. The only words that are in the default font colors I have set up are the ones I’ve manually changed on the page. So basically it’s not using my default colours for anything.

Second main problem – layout. The pages that were automatically created – activity, messages, forums – don’t look like the example pages on the buddypress website at all, they are very ugly. I’ve tried to get rid of the sidebar to see if the problem is that there isn’t enough space for a better layout, by editing the page and choosing a different page template, but the sidebar was still there.

Third main problem – probably related to the layout – there are lines of words that look like they’re supposed to be types of items (eg notifications), and small colored boxes with numbers in them, but the boxes don’t line up with the words.

I’d love it if you could have a look at these pages and give me some clue as to why my buddypress doesn’t look like the demos say buddypress should look like. My website details and an admin login details are below.

thanks for your continued attention,
Sandra

[SandraParticipant]

This reply has been marked as private.

[RadModerator]

Hi Sandra,

Thanks, I’d like to check but your site is inaccessible on my end just like you said. While we’re waiting, please also provide your FTP login credentials in your next reply. 🙂

Thanks!

[SandraParticipant]

This reply has been marked as private.

[RadModerator]

Hi there,

Thanks, but I’m actually confused with button issues. You said that edit settings button has white text and gold background color, which is your default button colors. Should it use your default colors or not? Would you mind providing the exact colors you’re expecting and screenshots of elements where you wish to apply the color?

As for white box, please add this css at Admin > Appearance > Customizer > Custom > CSS

.bpfb_form_container {
background-color: transparent;
}

As for the layout, it uses X theme’s template. You could be looking on other sites that uses default templates, or other theme templates. The designs are actually imposed by the theme but it still customisable. If you can provide the area or element that you wish to change then you can tell us and maybe we can provide you some css.

About the sidebar, please set your bbpress/buddypress layout to full-width at Admin > Appearance > Customizer > Buddypress | bbPress > Layout, or you can simply edit your activity/groups/member page at Admin > Pages and choose Fullwidth or Blank – Container layout.

Hope this helps 🙂

[SandraParticipant]

Hi, thanks for your continued attention.

There seems to be a bit of confusion, I think maybe I’m not explaining myself very well.

I had already put in some changes to make the pages readable from getting bits of css code from other forum topics. To show you the problem I started with I’ve taken this code out so you can see the pages as they are being created without any alterations with css.

So, if you look at the bbpress and buddypress pages now, you’ll see that a lot of the text is unreadable. I’ve managed to find out how to turn off the sidebar so it’s more spread out, which is great. These are the problems that are here:

1. Button text color and text color for some parts are not the defaults that are set up in Customizer – note this is only some parts – other parts ARE the default colors. For example in the Activity screen, there are words that I think are on a menu bar and are menu items – All Members and My Groups, and these are grey until you have the mouse pointer on them and then they convert to the color they are supposed to be as per customizer. Also the text in the drop down menu where the default item is “Show: Everything” – it is grey. The text on the squares showing numbers of different items, for example messages, is white – not the default button text color. This makes these parts of the page hard to read.

2. On the lines where it shows numbers of items, for example “Messages [colored square with number]” the colored square is not on the same line as the text, and actually overlays the fat white box that is around the “What’s new” section.

There are also things I’d like to change. I’d really appreciate some css code for these please:

3. the fat white box around the “what’s new” section. I’d like to change color and line thickness.

4. The drop down menu box – I’d like to change the length of the box, and the color of the arrow at the end of the box that is currently white.

5. The menu bars (sorry not sure if this is what they are called – the parts where there are words that are selectable such as “favourite” and “delete” at the bottom of the activity screen) – they are currently a shade of black and since my main theme color for the pages is black, it’s hard to tell these are a different part of the page. Id like to be able to change the colors of these too.

I hope I’ve not included too much here … and I really appreciate your help.

Many thanks
Sandra

[FriechModerator]

Hi Sandra,

For the #2 and #3 you can add this under Custom > CSS in the Customizer.

.buddypress .bpfb_form_container {padding: 0;}

Regarding the other query; Would you mind providing us with a little more clarification, perhaps provide us some screenshots. I’m sorry but I’m having a hard time locating those element you’re referring to (like the white arow of a dropdown box), we’ll be happy to provide you with a response once we have a better understanding of the situation.

Cheers!

[SandraParticipant]

Hi,

Thanks for the script, it seems to have taken care of the fat white box – I guess it was padding?
I don’t know how to provide you with screenshots. I have attached a word document that has some in, hope you are able to see this. If you tell me how to do it another way, I’ll definitely make some others for you.

cheers,
Sandra

[Rue NelModerator]

Hello Sandra,

Thanks for providing the screenshots. To change the colors of the said buttons, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.buddypress .x-item-list-tabs-nav>ul>li>a, 
.buddypress .x-item-list-tabs-nav>ul>li>span,
.buddypress .x-item-list-tabs-subnav>ul>li>a {
    color: #fff;
    box-shadow: inset 0 0 10px rgba(255,255,255,0.35)
}

Feel free to change the colors and even add your other custom styling.
Hope this helps. Kindly let us know.

[SandraParticipant]

Thanks very much, that has sorted the colour of the text in the tabs. I can also now see that each of the words is in it’s own box or tab as there is a slight colour change in the tab now, which is great. It hasn’t changed the white text in the gold coloured boxes tho, where it shows the number of messages, posts etc, and in the box where it says “edit settings”. Also the boxes with the white numbers in are in the very top far right corner of the tab area, crossing over into the tab area above, and I’d like them to be in the middle far right. Do you have any other suggestions?

An additional question – I’ve been working on the portfolio page, and I’ve realised that the “sort portfolio” text and the “search” text are in the same light grey colour that these words above were before your ccs code changed them. So obviously it wasn’t something specific to buddypress as I had assumed, it is something general to my whole website that these types of text are all in a grey colour. Is there a setting somewhere for changing this text on all pages? I’ve checked in the typography settings in customise, but can’t see where I have any grey text set. I’d much appreciate some help on this as well please.

Many thanks,
Sandra

[ChristopherModerator]

Hi there,

Please add this ass well :

.x-btn, .button, [type="submit"],.buddypress .x-bp-count {
    color: #000000 !important;

}
.buddypress .x-bp-count, .buddypress .x-item-list-tabs-nav>ul>li>a span {
    top: 9px;
    right: -7px;
}

.x-portfolio-filters, .x-portfolio-filter{
color:red;
}
select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input{
color:red;
}

Hope that helps.

[Author]

Posts