• Hello, I am using buddypress with my custom theme that I made and I have everything working perfectly. There are some bland styling problems with the buddyopress template pack so I decided to style things my way. I did well untill I got to the part about the members pages menus. The little menu that says Activity – Profile – Messages – Friends – Groups… ect. I want to use the same custom menu that I made for my theme with those links or menu items but I can not figure out for the life of me how to get them in there, Can anyone help me to see how to get this go, lol. I have tried things like copying and pasting the css for my theme menu into the buddypress files but its not working to style them. Any help on this would be greatly appreciated. Thanks

Viewing 13 replies - 1 through 13 (of 13 total)
  • There are different ways to address this. So assuming you used BP Template Pack plugin to make your WP theme compatible with BP

    Target the “Activity – Profile – Messages etc” with:

    div#item-nav { }
    div#item-nav div.item-list-tabs {  }
    div#item-nav div.item-list-tabs ul {  }
    div#item-nav div.item-list-tabs ul li {  }
    div#item-nav div.item-list-tabs ul li a {  }

    Target the links (subnav) below the div#item-nav with:

    div#subnav {  }
    div#subnav div.item-list-tabs {  }
    div#subnav div.item-list-tabs ul {  }
    div#subnav div.item-list-tabs ul li {  }
    div#subnav div.item-list-tabs ul li a {  }

    Thread Starter jamesg371

    (@jamesg371)

    I assume that I put the links to my nav bar and buttons gif in those { } spaces for the menu states right?
    something like \\\ ul li a {<img src=”/wp-content/themes/customtheme/images/activebutton.gif”/>} ///
    or something? lol. Im, so brain dead with this at this point, lol. Sorry if the question is stupid, lol.

    Thread Starter jamesg371

    (@jamesg371)

    Oh also, would I be working in the extra fiolders and files that the template pack instaklled into my theme for this or should Ibe doing this from the gbuddypress plugin itself? Im not great with php. I know enough to bring sidebars and call things like recent post on to pages and stuff but I dont understand it much at all. So it leaves me with the issues of having to track things back thru files and I get headaches, lol. But I am making progress, I do know html 5 and css real good though, that and flash are my strong points. I really want to learn wordpress design so that I cna build buddypress themes. i just mnake simple themes now and they arent that great.

    using buddypress with my custom theme that I made and I have everything working perfectly. There are some bland styling problems with the buddyopress template pack so I decided to style things my way.

    I posted the selectors (div#item-nav, etc.) above, because you said you wanted to “style things your way” specifically for the Articles-Messages- etc. You add those I gave at the bottom of your WP theme’s style.css and you would have to add declarations to each respective selector to style accordingly. e.g. div#item-nav { background-color: #000000; }

    would I be working in the extra fiolders and files that the template pack instaklled into my theme

    Yes, you would have to work on the folders/files moved by template pack into your active WP theme.
    https://codex.buddypress.org/theme-development/bp-template-pack-walkthrough-level-easy-2/

    Thread Starter jamesg371

    (@jamesg371)

    Sorry for the way that sounded, I didnt mean that it has a problem , I was basically saying that I was styling the divs for things like h3 and h4 and p tags in some of the page templates that buddypress theme pack adde to my theme. But – Basically, I just have my menu that I made for the site theme – it does not show for the buddypress members pages menu , the profile freinds ect menu. those are just text so i need to add the menu bar and the active, hovered and passive gifs to them. I will take a look at this codex and see what I can figure out.

    Thread Starter jamesg371

    (@jamesg371)

    ok here is what icame up with, this is a detailed menu with gif and pngs for rollovers and things. All this code did was make my menu disappear all together. Am I missing something?

    large code block removed, use a pastebin

    1. Do not post big blocks of code in this forum because it will be deleted by Mods. Post it in wordpress.pastebin.com and copy the URL generated and post it here. e.g. your code is now here https://wordpress.pastebin.com/1FuwgHsW

    2. Got to see actual site/webpage to identify why your styling is not working.

    3. If you don’t have it yet, get the Firebug Add-on for Mozilla to help you ID selectors and put appropriate declarations for your theme.

    Thread Starter jamesg371

    (@jamesg371)

    well, I actually have it semi working now, lol. but it is not working on the second line of links . can I post like 10 lines?
    heres the direction Im going now and it worked for the top line but the second one I can not get it to take. It does show the background nav.png, just not the menu buttons. Also, I cant figure the rollovers out for this, lol.

    div#item-nav {
     padding: 6px 6px 6px 6px;
     position: relative;
      min-height: 33px;
      z-index: 100; }
    
    div#item-nav div.item-list-tabs {   
    
      background-image: url('images/nav.png');
    
      }
    
    div#item-nav div.item-list-tabs ul {  }
    
    div#item-nav div.item-list-tabs ul li { 
    
      background-image: url('images/menuitem.png'); 
    
      }
    
      div#item-nav div.item-list-tabs ul li a {
      color: #fff;
      display: block;
      text-align: center;
      white-space: nowrap;
      height: 20px;
      width: 300px;
      overflow: hidden;
      line-height: 20px;
      background-image: url('images/menuitem.png');
      background-position: left top;
      background-repeat: repeat-x;
      border-width: 1px;
      border-style: solid;
      border-color: #636363;  }
    
    div#subnav {  background-image: url('images/nav.png'); }
    div#subnav div.item-list-tabs {  background-image: url('images/subitem.png'); }
    div#subnav div.item-list-tabs ul { background-image: url('images/menuitem.png'); }
    div#subnav div.item-list-tabs ul li { background-image: url('images/menuitem.png'); }
    div#subnav div.item-list-tabs ul li a { display: block;
      text-align: center;
      white-space: nowrap;
      height: 20px;
      width: 300px;
      overflow: hidden;
      line-height: 20px;
      background-image: url('images/subitem.png');
      background-position: left top;
      background-repeat: repeat-x;
      border-width: 1px;
      border-style: solid;
      border-color: #636363; }
    Thread Starter jamesg371

    (@jamesg371)

    Sorry, I didnt mean to post a large block of code. Here is the paste bin link for my new menu css

    Thread Starter jamesg371

    (@jamesg371)

    I have to repeat this

    2. Got to see actual site/webpage to identify why your styling is not working.

    Thread Starter jamesg371

    (@jamesg371)

    Yes I did, I am a web designer. I use firefox and firebug weveryday but it will not show me accuratly where its coming from. Also, adding the css to the stuyle.css does not effect the menu below it. the menu on the members pages that says Activity – Profile – Messages – Friends – Groups… ect is now fine. I have rebuilt those just fine. how ever the submenu wont work and firebug is saying that the css is coming from bp.css and I go to style that and it makes every menu dissappere, lol. Firebug dont bug it and firefinder dont find it.

    Thread Starter jamesg371

    (@jamesg371)

    oh, and tyhiose instructions that are for ther buddypress comaptabiltiy walk thru do not in anyway pertain to my design.

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘Buddypress pages menu help!!!’ is closed to new replies.