Jump to content
TNG Community
David Lovrien

Twitter Bootstrap theme?

Recommended Posts

David Lovrien

I've had TNG running for several years, and I find the included templates very dated and inflexible, so I figured I'd try my hand at a theme based on Twitter Bootstrap. I'm not terribly good at it, nor am I at PHP, but I got something up and working and I'm enjoying it so far.

http://www.lovrien.com/genealogy

However, the effort seems incomplete as it really only addresses the main page. To even get that far, hacks are needed to genlib.php to get the required CSS included. It might be a worthy project to allow for Bootstrap-based themes more easily. Anyone else tried this?

P.S. Try the site above on your phone - it's mobile responsive!

David Lovrien

Plano, TX

Share this post


Link to post
Share on other sites
cmhbob

Mobile! Yes! Awesome!

Seriously, this looks pretty neat. I really like the roll-up effect when using a mobile device (both Android phone and iPad).

Share this post


Link to post
Share on other sites
cclonch

LOL I was thinking this morning that I should investigate using Bootstrap to completely redo TNG for my site. My thought went beyond just TNG themes. I've been mauling over this idea of really separating data from display, and Bootstrap seems like a logical fit. Then I thought, hey let me google for TNG and Bootstrap first. Low and behold you've had a similar idea.

Would you mind sharing what you've accomplished so far? I'm technical but not with web development; I can input and output some PHP/HTML/CSS but it is usually hackish and not pretty. I'm really curious how to get started with Bootstrap.

Share this post


Link to post
Share on other sites
David Lovrien

LOL I was thinking this morning that I should investigate using Bootstrap to completely redo TNG for my site. My thought went beyond just TNG themes. I've been mauling over this idea of really separating data from display, and Bootstrap seems like a logical fit. Then I thought, hey let me google for TNG and Bootstrap first. Low and behold you've had a similar idea.

Would you mind sharing what you've accomplished so far? I'm technical but not with web development; I can input and output some PHP/HTML/CSS but it is usually hackish and not pretty. I'm really curious how to get started with Bootstrap.

Here's how I left it: http://www.lovrien.com/genealogy/bootstrap-changes.zip

It's just hard-coded patching. I copied Template 11 (I think) and just started making changes. Plus the inclusion of the Bootstrap CSS added to genlib.php. Do your worst :razz:

Share this post


Link to post
Share on other sites
JoeLouie

The looks great. It's been years since I've done any real coding, and my web coding knowledge pretty much stops at HTML, and a bit of very rusty PHP, otherwise I'd love to see what I could do with it.

Share this post


Link to post
Share on other sites
JoeLouie

I've been playing around with this for the last 2 weeks or so. So far I've replaced all the hard-coded stuff, played around with the position of a few things, and just kind of gotten a feel for how all the bootstrap stuff works. Like I said in my last post, it's been a few years since I've done any major coding, so I'm a little rusty, but it's all coming back to me now.

Here is what I have so far: http://tngtest.joelouie.ca

Share this post


Link to post
Share on other sites
Martin J Mosley

I like it.. A Lot!

Interestingly you have the same issue as I've been having with the scale slider on google maps being broken. I put mine down to the theme changes I made with a WP integration.. But given you have the same issue, it looks like it could well be something else.

It's good to see an entirely new look for tng, the old templates are beginning to look long in the tooth.

Share this post


Link to post
Share on other sites
JoeLouie

I've been more focused on getting all my information into TNG (that was previously all over the place) that I never even noticed any issues with Google maps.

Obviously the template is a work in progress, and I'm learning the ins and outs to how TNG works behind the scenes as I go, so I'm sure it'll be a while before it's "finished", but if at any time anyone wants the files to have a whack at it, let me know and I'll gladly share. Suggestions are also welcome :)

Share this post


Link to post
Share on other sites
JoeLouie

However, the effort seems incomplete as it really only addresses the main page. To even get that far, hacks are needed to genlib.php to get the required CSS included. It might be a worthy project to allow for Bootstrap-based themes more easily. Anyone else tried this?

I've created a config file for the Mod Manager to add the required lines into genlib.php. I've done some digging through some of the other php files, discovered that everything other than the main page, and the header and footer on the other pages is hard-coded into the individual php files. It is definitely doable to modify everything else, but it's no easy task. But, I'm going to take a look at a few of them and see if I can mess around with it a bit to make things blend in a bit more with the bootstrap theme.

Share this post


Link to post
Share on other sites
DelG

I've had TNG running for several years, and I find the included templates very dated and inflexible, so I figured I'd try my hand at a theme based on Twitter Bootstrap....

On a related note, free for combo commenting/forum - see at Forums & Commenting reimagined.

I came to find the above via a referral WebAppers.com from the twitter Bootstrap - featured sites.

I posted this also elsewhere in the TNG forum recently introducing & discussing Commentics. Obviously, this is something that may interest those of you working with Bootstrap for TNG. I'm not tech-saavy enough to know if this is workable as is on a standard TNG site?

I'm interested in the Bootstrap theme but not currently technically capable of implementing it.

---------------

After looking further I guess this combo commenting/forum is not specifically a Bootstrap implementation - but rather a hosted service. Still might be interesting.

Share this post


Link to post
Share on other sites
JoeLouie

On a related note, free for combo commenting/forum - see at Forums & Commenting reimagined.

I came to find the above via a referral WebAppers.com from the twitter Bootstrap - featured sites.

I posted this also elsewhere in the TNG forum recently introducing & discussing Commentics. Obviously, this is something that may interest those of you working with Bootstrap for TNG. I'm not tech-saavy enough to know if this is workable as is on a standard TNG site?

I'm interested in the Bootstrap theme but not currently technically capable of implementing it.

---------------

After looking further I guess this combo commenting/forum is not specifically a Bootstrap implementation - but rather a hosted service. Still might be interesting.

I can see how it could be useful for some people, although not quite what I'd be looking to use for my site. I'd be interested to see what someone else could do with it though, as I've got my hands with the bootstrap implementation.

Share this post


Link to post
Share on other sites
DelG

Thanks for proving the bootsrap-changes zip. I took your work and tried to implement it with my previously modified Template_4. I'm not a coder (as is obvious) & currently I use mostly the trial & error method. I deployed today on my live site. Though there are more customizations that need be done it looks like a more modern template - if lacking in functionality.

Much appreciated that you shared.

Our Family Saga

Share this post


Link to post
Share on other sites
jantum

Hello,

is there any reportable progress for that topic?

I already started with migrating my WP Theme into a light Bootstrap 3.0 theme (httt://www.tummoscheit.de/?theme=wpbootstrap_jan). The next logical step will be the design of a TNG Bootstrap Theme as you started.

Therefore I would like to ask you for any news about your progress or example data.

I'm not sure but I tought that I read a request from Darian regarding new templates? Did any of you contacted him with your bootstrap project? May be there will be a way to implement new css style more easier into the different pages.

Thanks.

Cheers from Berlin (Germany)

Jan

http://www.tummoscheit.de

Share this post


Link to post
Share on other sites
William Vincent

How do you incorporate this theme into the Suffusion WordPress theme? The home page, just like it does on every other template, takes up the whole page; instead, I would like the WP theme to 'surround' it in the manner of the individual profile pages.

http://www.gnomi.co.uk

Share this post


Link to post
Share on other sites
annzerega

Here's how I left it: http://www.lovrien.com/genealogy/bootstrap-changes.zip

It's just hard-coded patching. I copied Template 11 (I think) and just started making changes. Plus the inclusion of the Bootstrap CSS added to genlib.php. Do your worst :razz:

Hi David - This was a very useful post - thank you! I've successfully incorporated bootstrap into a custom theme I've created based on Theme 4 following the steps here http://tng.lythgoes.net/wiki/index.php?tit...mplate_-_TNG_V9

Do you (or anyone for that matter) know what CSS file I need to edit to change the appearance of the left navigation panel? I'm not a big fan of white text on a dark background and links out of alphabetical order are annoying. This is based on Template #4 which I chose because search is on every page.

Here's the site with bootstrap plus my current tweaks. http://www.zerega-genealogy.com/genealogy/index.php. Thanks in advance. :) Ann Zerega

Share this post


Link to post
Share on other sites
Ken Roy

Hi David - This was a very useful post - thank you! I've successfully incorporated bootstrap into a custom theme I've created based on Theme 4 following the steps here http://tng.lythgoes.net/wiki/index.php?tit...mplate_-_TNG_V9

Do you (or anyone for that matter) know what CSS file I need to edit to change the appearance of the left navigation panel? I'm not a big fan of white text on a dark background and links out of alphabetical order are annoying. This is based on Template #4 which I chose because search is on every page.

Here's the site with bootstrap plus my current tweaks. http://www.zerega-genealogy.com/genealogy/index.php. Thanks in advance. :) Ann Zerega

Ann,

You would need to edit the templatestyle.css for your new theme that you copied from the templates\template4\css folder

If you have hints or corrections to the Creating a New Template article, please feel free to edit and update the article.

If you do not have a TNG Wiki Username, please request one.

Share this post


Link to post
Share on other sites
Anke

Hi all,

although I prefer TNG to all other genealogy software I tried out and although TNG is really offering great features, I'm dearly missing the freedom to layout the pages the way I want.

We're in 2017, the era of HTML5 and CSS3, of efficient js libraries and powerful CSS frameworks. It would be nice to have the possibility to easily integrate the Foundation, W3C, or Bootstrap framework, but replacing table layouts with update-safe flexbox grids seems to be nearly impossible, having 400 something pages loading dynamic content into table markup, making a mockery of TNG's template concept. 

Are there any plans for the future to develop a template system that will seperate the content from all layout options?

Anke

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×