CSS | Themes

Create Responsive Theme For WordPress With Twenty Ten

August 24, 2016 / 382 views

In order for the blogs or website to be popular, they must be mobile friendly since mobile devices are on the rise. I’m sure there are many efficient themes for WordPress that support mobile devices, but I like to create a simple one for my blogs using Twenty Ten WordPress theme. This is how I modify the original theme since it’s no longer supported and updated. The goal is to have a theme that adjust the viewports to accommodate all screen sizes to read clearly and easily with both fonts, images and videos. I did create 2 css’s: 1 for the index and 1 for the single

  • For all screens width above 1280px, full screen design.
  • For all screens width greater than 800px but less than 1280px, we should have sidebar and content resized to fit (35% and 65% respectively), the footer widgets (50%).
  • For all screens width less than 800px, we should have content, footer, sidebar widths = 100%, we increase font size t0 105%.
  • For all screens width max-width = 600px, include all smart phones, we increase font size 110%.

Page Speed Test Google

Responsive Theme Checked with PageSpeed Insights

PageSpeed Insights Desktop Score Check     PageSpeed Insights Mobile Score Check

 

To solve Android browsers NOT scrolling, use <meta name=“viewport” content=“width=device-width, initial-scale=1.02”>, increase the initial-scale=1.02 instead of 1.0.

Or we can remove all “overflow: hidden” in the CSS.

Or we can use the script that I found on the web.
<script type="text/javascript">
window.onload=function(){
var ua = navigator.userAgent;
if(ua.indexOf("Android")>=0){
var androidversion=parseFloat(ua.slice(ua.indexOf("Android")+8));
if(androidversion<=2.3){
document.getElementsByName("viewport")[0].setAttribute("content","width=device-width, initial-scale=1.02");
}
}
};
</script>

Bootstrap: word-wrap:break-word for collapsible button.
Find .btn, replace whitespace:nowrap with word-wrap:break-word;

whitespace_nowrap     word-wrap_break-word

Autosize iframe youtube to fit mobile = add codes to css.
embed,
iframe,
object {
max-width: 100%;
}

css for code
pre {
font-family: "Courier 10 Pitch", Courier, monospace;
font-size: 95%;
line-height: 140%;
}
code {
font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
font-size: 95%;
line-height: 140%;
}
#content code {
display: block;
padding: 0.5em 1em;
border: 1px solid #666;
background: #0d0200;
color:#ffb499;
}

If we’re using fotorama and we want it to display the gallery in the center at all time, we need to add the codes

.fotorama__wrap {margin: 0 auto;}

For Body .custom-background using images or special color, we need to add codes
body.custom-background{
height:auto;
background: url('images/black_linen2.jpg')repeat;}

For numbers and bullets, we have to define in the css with codes
.entry-content ul li { margin-left:20px; list-style-type: circle; }
.entry-content ol li { margin-left:20px;list-style-type: decimal;}

I use FontAwesome for tags and stuff, I need to define them in the CSS also, make sure to load the FontAwesome.css in the head, change the font color to match the background.
.genericon:before,
.menu-toggle:after,
.featured-post:before,
.date a:before,
.entry-meta .author a:before,
.format-audio .entry-content:before,
.comments-link a:before,
.tags-links a:first-child:before,
.categories-links a:first-child:before,
.edit-link a:before,
.attachment .entry-title:before,
.attachment-meta:before,
.attachment-meta a:before,
.comment-awaiting-moderation:before,
.comment-reply-link:before,
.comment-reply-login:before,
.comment-reply-title small a:before,
.bypostauthor > .comment-body .fn:before,
.error404 .page-title:before {
-webkit-font-smoothing: antialiased;
display: inline-block;
font: normal 16px/1 Genericons;
vertical-align: text-bottom;
text-align:left;
}
.featured-post:before {
font-family: FontAwesome;
content: "\f08d";/*"\f308";*/
margin: 0 2px;
font-size:150%;
color: #fff;
padding:0 .5%;
}
.entry-meta .date a:before {
font-family: FontAwesome;
content: "\f073";/*"\f303";*/
margin: 0 2px;
font-size:150%;
color: #fff;
padding:0 .5%;
}
.comments-link a:before {
font-family: FontAwesome;
content: "\f086";/*"\f300";*/
position: relative;
top: -1px;
margin: 0 2px;
font-size:150%;
color: #fff;
padding:0 .5%;
}
.entry-meta .author a:before {
font-family: FontAwesome;
content: "\f007";/*"\f304";*/
position: relative;
top: -1px;
margin: 0 2px;
font-size:150%;
color: #fff;
padding:0 .5%;
}
.categories-links a:first-child:before {
font-family: FontAwesome;
content: "\f022";/*"\f301";*/
margin: 0 2px;
font-size:150%;
color: #fff;
padding:0 .5%;
}
.tags-links a:first-child:before {
font-family: FontAwesome;
content: "\f02b";/*"\f302";*/
position: relative;
top: -1px;
margin: 0 2px;
font-size:150%;
color: #fff;
padding:0 .5%;
}
.edit-link a:before {
font-family: FontAwesome;
content: "\f044";/*"\f411";*/
position: relative;
top: -1px;
margin: 0 2px;
font-size:150%;
color: #fff;
padding:0 .5%;
}

will continue

Paid Links

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.