Forums

Unfortunately no one can be told what FluxBB is - you have to see it for yourself.

You are not logged in.

#1 2015-07-11 16:28:36

hcgtv
Member
From: Charlotte, NC
Registered: 2008-05-07
Posts: 463
Website

Mobile friendly theme

Hi,

I've spent the last week getting my sites to be mobile friendly, the Chrome Mobililty-Checker is a godsend, and it pisses me off at the same time.

Some of my domains can't be made to be mobile friendly, no matter how large I make the fonts, they'll require new themes. One of my domains runs FluxBB and I started looking around this forum for mobile friendly designs for Flux.

I came across the CrunchBang Linux Forums in a thread, well their forum gets a Mobile-Friendly score of 96!

That's amazing, how did he do it?

How about we incorporate his techniques into a new theme for Flux?

Offline

#2 2015-07-11 17:28:11

adaur
Developer
From: France
Registered: 2010-01-07
Posts: 843
Website

Re: Mobile friendly theme

I think this is how he did it tongue

/* Media Queries for responsive design -------------------------------------- */
#brdmenu ul {padding: 0;display:none;}
#brdmenu li {}
#brdmenu a:link, #brdmenu a:visited {
	border-top-style: solid;
	border-width: 1px;
	display: block;
	padding: 10px 0px 10px 0px;
	text-transform: uppercase;
	letter-spacing: 2px;
	text-align: center;
}

#brdmenu a:hover, #brmenu a:active, #brdmenu a:focus {
	text-decoration: none;
}
#brdmenu {
	background: #191C1E;
	-webkit-box-shadow: 0px 2px 4px #151617;
    -moz-box-shadow: 0px 2px 4px #151617;
    box-shadow: 0px 2px 4px #151617;
}

#brdmenu a, #brdmenu a:link, #brdmenu a:visited {
	background: #191C1E;
	border-color: #2E3436;
	color: #bfbfbf;
}

#brdmenu a:hover, #brdmenu a:active, #brdmenu a:focus {
	background: #000;
	border-color: #2E3436;
	color: #fff;
}
#brdmenu a#brdmenubutton {border:0;
	background:transparent url(http://crunchbang.org/css/images/menu.png) center no-repeat;
	text-indent: -9999px;
	outline:none;
}
#brdwelcome .conr {float:left;}
.tc2,.tc3,.tcr,p.modlist{display: none;}
.pun .blockpost .postright {padding:4px 110px 7px 18px;}
.pun .blockpost .postleft,
.pun .blockpost .postfootleft {width:70px;margin-left:-90px;}
.pun .blockpost .postbody, .pun .blockpost .postfoot {margin-right:-90px;}
.pun .blockpost .postfootright {padding:7px 110px 7px 18px;}
.pun .blockpost .postleft dd {display:none;}
.pun .blockpost .postleft dd.postavatar {display:block;}
.community_info {display:none;}
.datetimeposted {float:right;}
@media only screen and (min-width: 480px) {
  /* Style adjustments for viewports 480px and over go here */
    #masthead, .pun {
        position:relative;
        width:470px;
    }
    .tcr{display: table-cell;}
    #fini p {
        display:block;
        float:left;
        width:70%;
    }
    #fini .credit {
        display:block;
        float:right;
        margin:0 0 0 6px;
    }
}

@media only screen and (min-width: 768px) {
  /* Style adjustments for viewports 768px and over go here */
    #masthead, .pun  {
        position:relative;
        width:760px;
    }

    #sitemenu {
        float:right;
        padding:0;
        margin:0;
        overflow: hidden;
        list-style: none;
    }

    #sitemenu li {
        display:block;
    }
    #sitemenu li {
        float: left;
        padding:0;
        margin:0;
    }

    #sitemenu a:link, #sitemenu a:visited {
        border:0;
        color: #bfbfbf;
        border-color: #2E3436;
        text-transform: uppercase;
        letter-spacing: 2px;
        border-right-style: solid;
        border-width: 1px;
        display: block;
        min-width: 60px;
        padding: 12px 16px 7px 8px;
        white-space: nowrap;
        text-decoration: none;
    }

    #sitemenu a.siteabout {
        border-left-style: solid;
    }

    #sitemenu a.sitesearch,
    #sitemenu a.showmenu {
        border-left-style: solid;
        min-width: 24px;
        padding:0;
        width:24px;
        height:24px;
        padding: 10px 16px 7px 8px;

    }
    #sitemenu a.sitesearch {
        background:url(http://crunchbang.org/css/images/search.png) center no-repeat;
        border:none;
    }
    #sitemenu a:hover, #sitemenu a:active, #sitemenu a:focus {
        background:#000;
        color:#fff;
    }
    #sitemenu a:hover.sitesearch,#sitemenu a:active.sitesearch,#sitemenu a:focus.sitesearch {
        background:#000 url(http://crunchbang.org/css/images/search.png) center no-repeat;
    }

    #sitemenu a.std {
        display: block;
    }
    #sitemenu a.showmenu {
        display: none;
    }
    #mobmenu {
        display: none;
    }

	#brddesc p {
		padding: 0;
	}

	#brdmenu a#brdmenubutton{display:none;}

	#brdmenu ul {
		padding: 0;display:block;
	}

	#brdmenu li {
		float: left;
	}

	#brdmenu a:link, #brdmenu a:visited {
		border-top: 0;
		border-right-style: solid;
		border-width: 1px;
		display: block;
		min-width: 60px;
		padding: 12px 16px 7px 8px;
		white-space: nowrap;
		text-align: left;
		letter-spacing: 0;
		text-transform: none;
	}

	#brdmenu a:hover, #brmenu a:active, #brdmenu a:focus {
		text-decoration: none;
	}
	#brdmenu {
		background: #191C1E;
		-webkit-box-shadow: 0px 2px 4px #151617;
	    -moz-box-shadow: 0px 2px 4px #151617;
	    box-shadow: 0px 2px 4px #151617;
	}

	#brdmenu a, #brdmenu a:link, #brdmenu a:visited {
		background: #191C1E;
		border-color: #2E3436;
		color: #bfbfbf;
	}

	#brdmenu a:hover, #brdmenu a:active, #brdmenu a:focus {
		background: #000;
		border-color: #2E3436;
		color: #fff;
	}

    #brdwelcome .conr {float:right;}
    .tc2,.tc3 {display: table-cell;}
    .pun .blocktable .tcr {
		width: 20%;
	}
    /*p.modlist {display:inline;}*/
	.pun .blockpost .postright {padding:4px 230px 7px 18px;}
	.pun .blockpost .postleft,
	.pun .blockpost .postfootleft {width:194px;margin-left:-218px;}
	.pun .blockpost .postbody, .pun .blockpost .postfoot {margin-right:-218px;}
	.pun .blockpost .postfootright {padding:7px 270px 7px 18px;}
	.pun .blockpost .postleft dd {display:block;}
    .pun .blockpost .postleft dd.postavatar {display:block;}

    .pun .blockpost h2 .conr {
		display:block;
		float: right;
		text-align: right;
	}
	.datetimeposted {float:left;}
	.pun .crumbs li {
		white-space: nowrap;
		font-size: 90%;
	}

    .pun .community_info {
    	display:block;
    	padding:10px;
    	margin-bottom: 14px;
    	overflow: hidden;
    	border: 0px solid #3B4245;
    	position:relative;
    	background: #191C1E url(Air/img/2E3436.png) center repeat-y;
    	-webkit-box-shadow: 0px 2px 4px #151617;
	    -moz-box-shadow: 0px 2px 4px #151617;
	    box-shadow: 0px 2px 4px #151617;
    }
    .community_info .irc {
    	float:left;
    	width:40%;
    	padding-left: 60px;
    	background:url(Air/img/irc.png) left center no-repeat;
    	cursor: pointer;
    }
    .community_info .linode {
    	float:left;
    	width:40%;
    	padding-left: 60px;
    	background:url(Air/img/linode.png) left center no-repeat;
    	cursor: pointer;
    }
    .community_info .twitter {
    	float:right;
    	width:40%;
    	padding-left: 60px;
    	background:url(Air/img/twitter.png) left center no-repeat;
    	cursor: pointer;
    }
    .community_info .dreamhost {
    	float:right;
    	width:40%;
    	padding-left: 60px;
    	background:url(Air/img/dreamhost.png) left center no-repeat;
    	cursor: pointer;
    }
    .community_info_close {
    	position: absolute;
    	top:10px;
    	right:10px;
    	width:20px;
    	height:20px;
    	background: url(Air/img/close.png) center repeat-y;
    }

    .pun .foot {
    	margin-top:20px;
    	margin-bottom: 0px;
    }
    .pun .foot.additional{
    	margin-top:0px;
    	margin-bottom: 14px;
    	border-top: 1px solid #3B4245;
    }


}

@media only screen and (min-width: 920px) {
  /* Style adjustments for viewports 920px and over go here */
    #masthead, .pun  {
        position:relative;
        width:920px;
    }
    .community_info .irc,
    .community_info .linode {
    	width:40%;
    }
    .community_info .twitter, 
    .community_info .dreamhost{
    	width:42%;
    }

}

.req_user {
	display:none;
}

Have you checked these?
https://fluxbb.org/resources/styles/air-2/
https://fluxbb.org/resources/styles/vic … xbb-style/


FeatherBB - A simple and lightweight new generation forum system
Based on FluxBB, written in PHP, using Slim Framework for a proper OOP-MVC architecture.

Offline

#3 2015-07-11 18:23:38

hcgtv
Member
From: Charlotte, NC
Registered: 2008-05-07
Posts: 463
Website

Re: Mobile friendly theme

adaur wrote:

I think this is how he did it tongue

Yeah, I started rummaging through the HTML and CSS also, then I landed here to ask before I undertook a disammbly of sorts.

Should of looked on the main site, I tend to hang out in these forums all the time, and search.

Trying them out now, will report back the Google Mobile-Friendliness of these 2 styles.

Thanks.

Offline

#4 2015-07-11 20:30:14

hcgtv
Member
From: Charlotte, NC
Registered: 2008-05-07
Posts: 463
Website

Re: Mobile friendly theme

Air2 doesn't pass the mobility test, Air and Air2 get a 64 on the test, we need to get to 80.

We get penalized 33 points for Fonts and 14 points for links being too close.

Must pick CrunchBang's brains wink

Offline

#5 2015-07-12 11:11:08

adaur
Developer
From: France
Registered: 2010-01-07
Posts: 843
Website

Re: Mobile friendly theme

Maybe you should try your extension on a "light" website...  wink


FeatherBB - A simple and lightweight new generation forum system
Based on FluxBB, written in PHP, using Slim Framework for a proper OOP-MVC architecture.

Offline

#6 2015-07-12 11:58:32

hcgtv
Member
From: Charlotte, NC
Registered: 2008-05-07
Posts: 463
Website

Re: Mobile friendly theme

adaur wrote:

Maybe you should try your extension on a "light" website...  wink

Hey, you score a 99, light as a Feather wink

Offline

#7 2020-03-20 13:12:24

JesusIsGodAlmighty.Life
Member
Registered: 2020-03-15
Posts: 35

Re: Mobile friendly theme

Hmmmm, Yea... I'm looking into how to do something of the nature of Arch Linux and Netbunsen as well... I have no idea why this would not be default in FluxBB.... Terrible hmm Just Terrible sad
So 5 years later this has apparently not been sorted.


Many perceive the truth to be offensive - others sees lies and deceptions as resentful. It all depends on who you're working for.

Offline

Board footer

Powered by FluxBB