Topic: How to make nice looking tabs in groups

How to make nice looking tabs in groups

Participant

@ostralopithicus

I wasn’t happy with the look of the groups menu, so I made some CSS over-ride rules which can be used in your (child) theme CSS or in one of those CSS over-ride plugins.

Here is the before image:

Before CSS changes

And here is the after:

After CSS changes

And here is the code:



/* buddypress tabs */
#buddypress #object-nav, #buddypress #subnav {outline:0;margin:0;text-align:center;}
#buddypress #object-nav ul, #buddypress #subnav ul {display:table;width:100%;table-layout:fixed;font-size:.75em;}
#buddypress #subnav ul {width:96%;font-size:.65em;margin:0 2%;}
#buddypress #object-nav li, #buddypress #subnav li {display:table-cell;float:none;text-align:center;height:2em;padding-top:.5em;background-color:#ddd;border:1px solid #c6c6c6;border-bottom: 1px solid #999;text-decoration: none;outline:0;margin:0;}
#buddypress #object-nav li a, #buddypress #subnav li a{display:block;text-align:center;padding:0!important;color:#666;outline:0;}
#buddypress #object-nav li a:hover, #buddypress #subnav li a:hover {color:#000;outline:0}
#buddypress #object-nav li.current, #buddypress #subnav li.current {pointer-events:none;cursor:default;color:#555;font-weight:700;border-color:#999;border-bottom-color:transparent;background-color:transparent;}
#buddypress #object-nav li.current a:hover, #buddypress #subnav li.current a:hover {color:#555;font-weight:700;}
#buddypress div#subnav.item-list-tabs {margin:0!important;padding-top:1em;}
#buddypress #subnav ul

Viewing 6 replies - 1 through 6 (of 6 total)

Philosopher Rex

Participant

@ostralopithicus

9 years, 1 month ago

Please share changes/improvements you make.

Cheers

Philosopher Rex

Participant

@ostralopithicus

9 years, 1 month ago

Note that this doesn’t just change tabs in groups, but in the profile as well. I had some issues ‘fitting’ in some words without making the text too small or resorting to wrapping the word (another CSS rule); so instead I used poedit to change the menu text.

You can read about how to do that here: https://codex.buddypress.org/getting-started/customizing/customizing-labels-messages-and-urls/

Philosopher Rex

Participant

@ostralopithicus

9 years, 1 month ago

Found a few more things to tweak, so here’s an update:



/* buddypress tabs */
#buddypress #object-nav, #buddypress #subnav {outline:0;margin:0;text-align:center;}
#buddypress #object-nav ul, #buddypress #subnav ul {display:table;width:100%;table-layout:fixed;font-size:.7em;}
#buddypress #subnav ul {width:98%;font-size:.6em;margin:0 1%;}
#buddypress #object-nav li, #buddypress #subnav li {display:table-cell;float:none;text-align:center;height:2em;padding-top:.5em;background-color:#ddd;border:1px solid #c6c6c6;border-bottom: 1px solid #999;text-decoration: none;outline:0;margin:0;}
#buddypress #object-nav li a, #buddypress #subnav li a{display:block;text-align:center;word-wrap: break-word;padding:0!important;color:#888;text-shadow: 1px 1px #ccc;outline:0;}
#buddypress #object-nav li a:hover, #buddypress #subnav li a:hover {color:#000;outline:0;text-shadow: 1px 1px #eee;}
#buddypress #object-nav li.current, #buddypress #subnav li.current {border-color:#999;border-bottom-color:transparent;background-color:transparent;}
#buddypress #object-nav li.current a, #buddypress #subnav li.current a {pointer-events:none;cursor:default;color:#222;font-weight:700;}
#buddypress #object-nav li.current a:hover, #buddypress #subnav li.current a:hover {color:#222;font-weight:700;}
#buddypress div#subnav.item-list-tabs {margin:0!important;padding-top:1em;}
#buddypress div.item-list-tabs ul li a span {display: block!important;}
#buddypress select#activity-filter-by {font-size:.8em;}

Philosopher Rex

Participant

@ostralopithicus

9 years, 1 month ago

probably my final update for this:

#buddypress #object-nav, #buddypress #subnav, #buddypress #groups-directory-form .item-list-tabs {outline:0;margin:0;text-align:center;}
#buddypress #object-nav ul, #buddypress #subnav ul, #buddypress #groups-directory-form .item-list-tabs ul {display:table;width:100%;table-layout:fixed;font-size:.65em;}
#buddypress #subnav ul {width:98%;font-size:.6em;margin:0 1%;}
#buddypress #object-nav li, #buddypress #subnav li, #buddypress #groups-directory-form .item-list-tabs li {display:table-cell;float:none;text-align:center;height:2em;padding-top:.5em;background-color:#ddd;border:1px solid #c6c6c6;border-bottom: 1px solid #999;text-decoration: none;outline:0;margin:0;}
#buddypress #object-nav li a, #buddypress #subnav li a, #buddypress #groups-directory-form .item-list-tabs li a{display:block;text-align:center;word-wrap: break-word;padding:0!important;color:#888;text-shadow: 0 0 1px #ddd;outline:0;}
#buddypress #object-nav li a:hover, #buddypress #subnav li a:hover, #buddypress #groups-directory-form .item-list-tabs li a:hover {color:#000;outline:0;text-shadow: 0 0 1px #fff;}
#buddypress #object-nav li.current, #buddypress #subnav li.current, #buddypress #groups-directory-form .item-list-tabs li.selected {border-color:#999;border-bottom-color:transparent;background-color:transparent;}
#buddypress #object-nav li.current a, #buddypress #subnav li.current a, #buddypress #groups-directory-form .item-list-tabs li.selected a {pointer-events:none;cursor:default;color:#222;font-weight:700;}
#buddypress #object-nav li.current a:hover, #buddypress #subnav li.current a:hover, #buddypress #groups-directory-form .item-list-tabs li.selected a:hover {color:#222;font-weight:700;}
#buddypress div#subnav.item-list-tabs {margin:0!important;padding-top:1em;}
#buddypress div.item-list-tabs ul li a span {display: block!important;border:none!important;background-color:transparent!important;padding:0!important;margin:0!important;}
#buddypress select#activity-filter-by {font-size:.8em;}