BootSimple

[jomas]

BootSimple is a small theme based on Bootstrap. Its very small (only 3 files, about 8kB) and supports submenu's (1 level) out of the box. No plugins needed. Bootstrap itself is loaded from CDN.

File description: template.php is based on a Bootstrap example from their website with some additions of the Getsimple tag's. functions.php implements a replacement for the getnavigation tag by getbootsimple_navigation($currentpage). bootsimple.jpg is the header picture which you can replace by your own.

I made this theme just to play a little with PHP and Bootstrap. For a beginner all the plugins can be very overwhelming. So maybe this will people give some stuff to play with.

I'm not a experienced PHP programmer so I maybe it is not a good idea to use this theme on a proffesional site (functions.php is very inefficient but should be good to understand).

Update: Removed double get_header()
Update Feb 20, 2015: Include screenshot and changed template.php so that it is valid html5 code

Download

[datiswous]

Can you add a screenshot to your theme?

http://get-simple.info/wiki/themes:creat...of_a_theme

[simplycrazy]

navigation bar displays ok, however, parent links of page with child(ren) don't exist due to the nature of the 'responsive' menu. tap/click parent toggles the dropdown portion (needed because you can't, yet, 'hover' on a touch device) and as such cannot link to the parent page. the dropdown only contains the children.

[jomas]

I intentionally implemented it that way. The reason is what you already mentioned about the lack of hover on a portable device (tablet, phone)
I you want a "click/tab" on a menuitem with children to show that parentpage, you should modify functions.php. Around line 65 you see $menu .= '<a href="#"
The # should be replaced with the parentpage.

[ragou]

But how can i change the body backcolor for example?

[ragou]

I tried to edit the theme source, set background picture, color, etc - unsucsesfull

[ragou]

What is a theme for that cannot be edited. I tried with external css - nothing.

[jomas]

What is a theme for that cannot be edited. I tried with external css - nothing.

BootSimple uses the "standard" Bootstrap from CDN. The advantage is that you don't have to download Bootstrap yourself.

If you want to customize Bootstrap (I think that is what you want) You might better go to the Bootstrap Homepage. On the right side there is a menuitem "Customize". There you can customize and download your customized Bootstrap. Then put this customized Bootstrap on your website and replace

Code:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

in my template with your customized version.

[datiswous]

You should put some documentation about:

Code:

<!-- Custom css -->
    <!--   link rel="stylesheet" href="your_cusom_css.css">      -->

On the download page.


What is the function of

Code:

<a class="navbar-brand" href="#"><?php get_site_name(); ?></a>

? It does not seem to link to anything.

[jomas]

You should put some documentation about:

Code:

<!-- Custom css -->
    <!--   link rel="stylesheet" href="your_cusom_css.css">      -->

On the download page.

I think if people don't understand that they can put their custom css here, they should not try to customize this theme. This has to do with basic webdesign not with my theme.

What is the function of

Code:

<a class="navbar-brand" href="#"><?php get_site_name(); ?></a>

? It does not seem to link to anything.

This code displays the sitename in the navigation bar. It is not linked to anything at the moment. (As in the example(s) on the Bootstrap site). You can change this to anything you like.

It looks as some of the comments I get are more related to Bootstrap than my theme "BootSimple". So please also look at their site for customizing and using it. My "Simple" theme just uses a bare standard Bootstrap.

[datiswous]

It looks as some of the comments I get are more related to Bootstrap than my theme "BootSimple". So please also look at their site for customizing and using it. My "Simple" theme just uses a bare standard Bootstrap.

If a link is in the menu it should work as part of the menu, I think. Otherwise, just remove it by default, or at least remove the link function, otherwise it's just a broken part of your theme.

In the Bootstrap example (on their site) none of the menu links work, but both Home and Project Name point to /#
So I would say it is

Code:

<a class="navbar-brand" href="<?php get_site_url(); ?>"><?php get_site_name(); ?></a>

by default, or just remove it completly i.m.o.

[jomas]

So I would say it is

Code:

<a class="navbar-brand" href="<?php get_site_url(); ?>"><?php get_site_name(); ?></a>

by default, or just remove it completly i.m.o.

That looks like a good solution. I have updated the theme with this code.
I also updated to the latest Bootstrap version and removed an error in functions.php that caused an error in the html validation when using parent menu items. I also changed the comment on using custom css a bit.

[The_Shopkeeper]

I've just found this theme - nearly perfect for my requirements, but...

I've added 3 child pages to a parent page, I don't mind the click to activate the sub-pages.

Trouble I'm having is that as the sub-menu appears, only the text link for last of the 3 pages is visible - the first 2 are "covered" by the main header. The html shows that they are all there.

The image below shows the bottom of the third page, but the first 2 page links can't be seen!

Is this a feature of the theme that others can replicate or are there suggestions as to why they are hidden? (they are part of the menu)


Using FF and version 3.3.7

   

[The_Shopkeeper]

Trouble I'm having is that as the sub-menu appears, only the text link for last of the 3 pages is visible - the first 2 are "covered" by the main header. The html shows that they are all there.

Ok - I think I've cracked it - at approx line 63 in functions.php I changed this:

Code:

           // parent has children so use special bootstrap menuitems and classes
           $menu .= '<li class="dropdown ' . $parent_tab_class . '">';
           $menu .= '<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">'.strip_decode($ppage['menu']).'<span class="caret"></span></a>';
           $menu .= '<ul class="dropdown-menu" role="menu">';

to this:

Code:

           // parent has children so use special bootstrap menuitems and classes
           $menu .= '<li class="dropdown ' . $parent_tab_class . '">';
           $menu .= '<a href="'. find_url($ppage['url'],$ppage['parent']) . '" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">'.strip_decode($ppage['menu']).'<span class="caret"></span></a>';
           $menu .= '<ul class="dropdown-menu" role="menu">';

I appears to work now.
A sanity check from other users would be useful.