Subscribe to RSS - Derrick's blog

Derrick's blog

Submitted by Derrick on

I maintain an open source project called DB-SVG (for Database Scalar Vector Graphics). It is a Java Tomcat application that helps development teams understand and document database designs. You can view a partial demo and get the source code from http://dbsvg.com/. The project is still under development, if you would be interested in contributing I'd be happy to give you permission on the Google Code site.

Submitted by Derrick on

I was playing with the theme on our family blog today, and found a place in Blogger's default theme designer where you can add custom CSS. So of course I decided to add media queries to make the blog more smartphone friendly (since that is the main way I interact with the web now)

First, you need to add the content meta tag to the header of your theme html: (Blogger blog settings-> Design -> Edit HTML)

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Then you add this to the Extra theme CSS section: (Design -> Template Designer -> Advanced -> Add CSS)

@media screen and (max-width: 699px) {
#navbar {
display:none !important;
height: 0 !important;
visibility: hidden  !important;
}
body {
min-width: 320px !important;
}
img {
max-width:100%;
}
div, span {
max-width:699px;
}
.content-inner {
padding: 0;
}
.main-inner {
padding:0;
}
.main-inner .columns {
padding-left: 0 !important;
padding-right: 0 !important;
}
.section {
margin: 0;
}
.content-outer, .content-fauxcolumn-outer, .region-inner {
max-width: auto !important;
min-width: 400px !important;
width: auto !important;
}
.post-outer {
max-width:100%;
background-color: #1C1C1C;
border: 1px solid transparent;
border-radius: 0 0 0 0;
margin: 0 0px 20px;
padding: 15px 10px;
}
.main-inner .fauxcolumn-center-outer {
left: 0;
right: 0;
}
.fauxcolumn-outer {
width: 100%!important;
position: relative !important;
float: left !important;
}
.main-inner .fauxcolumn-right-outer {
width: 100%;
}
.fauxcolumn-right-outer {
right: 0;
}
.header-inner .Header .titlewrapper, .header-inner .Header .descriptionwrapper {
padding-left: 5px;
padding-right: 5px;
}
.header-inner .Header .titlewrapper {
padding: 10px 5px 0;
}
.Header h1 {
font-size:36px;
}
.main-inner .column-right-outer {
margin-right:0px !important;
width: 100% !important;
background-color:#1C1C1C !important;
}
.column-right-inner {
padding: 10px !important;
}
.date-header{
font-size:85%;
}
#blog-pager {
text-align:left;
padding-left:10px;
}
#blog-pager-older-link {
float: right;
padding-right: 10px;
}
}
@media screen and (max-width: 480px) {
.Header h1 {
font-size:24px;
}
}

UPDATE:

Blogger has a built in mobile theme engine, you can enable without all this work. It's not quite so pretty, but it will load faster on mobile devices.
Go to http://draft.blogger.com, click Settings for your blog, click the Email & Mobile tab, and then click Yes to "Show mobile template."

Pages