Skip to:
Content
Pages
Categories
Search
Top
Bottom

Mobile topic index page does not look nice


  • kwk
    Participant

    @kwakok

    The default bbpress topic index page does not look good on mobile at all. I would like to customize it. I could see that the bbpress.org topic index page looks good. They were able to remove stuff like this Started by: ollietubb1 in: Troubleshooting and also remove the freshness icon and name from the topic index page to get things well organized.

    Open this URL on your mobile to see: https://bbpress.org/forums/

    Please, could you guide me to do the same thing to improve the mobile view of the topic index page? I am using bbpress Version 2.6.9

    Thanks in advance.

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

  • Robin W
    Moderator

    @robin-w

    A lot of mobile changes depend on the theme being used.

    These are the css changes that this site uses for smaller devices

    /* Do not fix #header for non-desktops */
    @media screen and ( max-width: 782px ) {
    	#header {
    		top: 0;
    		z-index: 99999;
    		position: absolute;
    	}
    	#wpadminbar {
    		z-index: 88888;
    		height: 56px !important;
    		position: absolute;
    	}
    	#wp-toolbar {
    		width: 100%;
    	}
    	#main {
    		margin: 100px 10px 40px 10px;
    	}
    	body:not(.trac):not(.home-page) #main {
    		margin-top: 140px;
    	}
    	#footer {
    		padding: 10px;
    		margin: 10px;
    	}
    	#footer div.links,
    	#footer div.details {
    		float: none;
    		margin: 10px 0;
    	}
    	#bb-menu-icon,
    	#mobile-menu-button {
    		display: block;
    		position: absolute;
    		right: 0;
    		padding: 33px 20px 33px 33px;
    		text-decoration: none;
    	}
    	#header #nav,
    	#wporg-header #wporg-header-menu {
    		margin: 0;
    		float: right;
    		overflow: visible;
    	}
    	#header #bb-nav,
    	#wporg-header #wporg-header-menu {
    		position: absolute;
    		width: 100%;
    		right: 0;
    		top: 81px;
    		border-bottom: 1px solid #aaa;
    	}
    	#header #bb-nav li,
    	#wporg-header #wporg-header-menu li {
    		width: 100%;
    		text-align: center;
    		margin: 0;
    		padding: 0;
    	}
    	#header #nav #bb-nav li a,
    	#wporg-header #wporg-header-menu li :link,
    	#wporg-header #wporg-header-menu li :visited {
    		display: block;
    		margin: 0;
    		padding: 20px;
    		color: #000;
    		text-shadow: none;
    		border-radius: 0;
    	}
    	#header #nav #bb-nav li.current a,
    	#header #nav #bb-nav li a:hover {
    		color: #fff;
    	}
    	#header #bb-nav,
    	#bbpress-forums .bbp-pagination-count,
    	.bbp-topic-meta,
    	#wporg-header #wporg-header-menu {
    		display: none;
    	}
    	#header #nav:hover #bb-nav,
    	#header #nav:focus #bb-nav,
    	#wporg-header #wporg-header-menu.toggled {
    		background-color: #eee;
    		display: block !important;
    	}
    	#wporg-header #wporg-header-menu.toggled {
    		background: #eee;
    	}
    	#header #nav:hover #bb-menu-icon:before,
    	#header #nav:focus #bb-menu-icon:before,
    	#wporg-header #mobile-menu-button[aria-expanded="true"]:before {
    		color: #fff;
    	}
    	#wp-admin-bar-my-account img.avatar {
    		height: 38px !important;
    		width: 38px !important;
    	}
    }
    
    /* Mobile */
    @media only screen and (max-width: 480px) {
    	#bbpress-forums div.bbp-topic-author img.avatar,
    	#bbpress-forums div.bbp-reply-author img.avatar {
    		width: 72px;
    		height: 72px;
    		margin: -5px 0 0 -5px;
    		transform: rotate(-5deg);
    	}
    
    	#bbpress-forums .bbp-author-role {
    		border: none;
    		background: transparent;
    		padding: 0;
    		margin: 0;
    	}
    
    	#bbpress-forums p.bbp-topic-post-date,
    	#bbpress-forums p.bbp-reply-post-date {
    		position: absolute;
    		right: -13px;
    		top: -17px;
    		font-size: 10px;
    		margin: 0;
    	}
    
    	#bbpress-forums div.bbp-topic-author .bbp-author-avatar + br,
    	#bbpress-forums div.bbp-reply-author .bbp-author-avatar + br,
    	#bbpress-forums div.bbp-topic-ip,
    	#bbpress-forums div.bbp-reply-ip {
    		display: none;
    	}
    
    	#bbpress-forums li.bbp-body div.type-topic span.bbp-admin-links,
    	#bbpress-forums li.bbp-body div.type-reply span.bbp-admin-links {
    		display: block !important;
    		border-top: 1px dotted #ddd;
    		margin: 10px 10px 0 10px;
    		padding: 5px 0;
    		position: relative !important;
    		top: 0;
    		left: 0;
    	}
    }

    You can play with them to get your site looking nicer

    either add them to the custom css part of your theme, or use

    Code Snippets


    kwk
    Participant

    @kwakok

    It’s a pleasure to have people like you,@robin-w, around to get things fixed and get the job done. I’m still playing with the above CSS code and it is producing positive results. Thanks a bunch.


    kwk
    Participant

    @kwakok

    Still trying to customize bbpress, I’ve bumped into a little challenge with the topic reply headers which contain the date of reply and the reply number eg. #72.
    I have made the background of the topic reply header white. However, I realized that there are border lines on the left and on the right which I could not remove after many attempts. See

    Which one is stronger, leopard or hyena?

    I think, my page would look nicer, and also I will be able to do more customization if those left-right border lines are removed.
    I would appreciate any help in removing these border lines. Thanks in advance.

Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.
Skip to toolbar