Bootstrap compatibility

This page will help you adapt your theme to work with Bootstrap required changes. 1.8.1 will ship just a couple of themes with compatibility examples within. At some point, even those themes will not be included.

Table of Contents The Easy Way Control Panel MiniAdmin H1

The Easy Way

As we start converting module templates, we are moving the old copies to a theme names "compat." If you copy that templates/ directory to your own theme, phpWebSite will use those templates instead of the updated ones. Now your theme works as before. Be aware, however, that we assume you will deprecate use of those templates through time.

Control Panel

The Control Panel has been simplified. No longer a series of divs within divs, it is now just a basic list. This said, you may still need your tabs and icons.

In this example, I am just going to add a new style sheet. So, in my theme.tpl file, I will add a link tag:

<link rel="stylesheet" type="text/css" href="{THEME_HTTP}compat.css" />

The {THEME_HTTP} plugs in an address to the site's currently set theme directory. So if your theme was 'simple', {THEME_HTTP} would be replaced with something like "http://yoursiteaddress.com/themes/simple/".

Below is what your compat.css file might look like. It is based on the "simple" theme. First we style the control panel tabs:

#body-content ul.nav-tabs {
    margin : 0px;
    margin-bottom : 1em;
    padding-bottom : 4px;
    border-bottom : 1px solid black;
}
#body-content ul.nav-tabs li {
    display : inline;
}

#body-content ul.nav-tabs li.active a {
    background-color : #DAE3DE;
    color : black;
}
#body-content ul.nav-tabs li.inactive a {
    color : gray;
}
#body-content ul.nav-tabs li a {
    min-width : 100px;
    border-left : 1px solid black;
    border-top : 1px solid black;
    border-right : 1px solid black;
    padding : 4px 6px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

This gives the tabs rounded top corners with a border underneath. The active tab is colored to overlap the border below it to make it look "selected." The inactive tabs have lighter text.

Next we shuffle our control panel links:

div.media {
    float : left;
    width : 160px;
    height : 150px;
    margin-right : 20px;
    margin-bottom : 20px;
}

MiniAdmin

ul.miniadmin-content {
    padding : 5px 5px;
}
ul.miniadmin-content li {
    list-style-type: none;
    margin-top : 5px;
}
ul.miniadmin-content li a {
    margin-left : 10px;
    font-weight : normal;
}

ul.miniadmin-content li.nav-header {
    font-weight : bold;
    font-size : 120%;
    border-bottom : 1px solid white;
    margin-top : 5px;
}

Again, MiniAdmin has been changed to a simpler list. This will make the components of that list stand out more. Down the road, MiniAdmin will merge with ControlPanel, but we'll cross that plank when we get to it.

H1

Like a certain ring, or maybe the Highlander, there can be only one - header. The H1 tag is reserved for the site name or logo. All other headers should be of H2 or lower in stature (or higher in number). So reduce your theme's header numbers to correspond with the change in templates.