Dadabase - A Social Network for Dads

Are you a lover of dad jokes? I am.

What if there was a social network for dads to talk about cliche “dad stuff” like controlling the thermostat, Home Depot, and sneezing waaaaaay too loud.

Here at Tadabase, we’ve gone full meta and turned a dad joke into a fully functional…dad joke.

In all seriousness, this is a social media template. The foundation and data structure is very simple, but the styling and use of the Custom Component is more advanced.

Click here for a demo!

Demo Login:
Password: 1234


  • Custom Component must be enabled


  • Knowledge of CSS
  • Knowledge of JavaScript

Click to Install


Hi @tim.young

I’d like a copy of this app, however the install link doesn’t work. Any chance you could share, or post it in templates?

Neil Campbell

Try this link instead:

1 Like

Thanks, @moe - that works.

I copied the menu CSS but my menu buttons ended up aligned left. I’ve combed through the Dadabase pages, but can’t think why this would be. (I’m an amateur CSSer)

@safetyinmind I kinda forgot about this app! Still makes me laugh :joy:

Can you post a screenshot and a link to the Live App? I’ll take a look for you.

I just copied the app to my account and do not see an issue but I’m sure we can figure it out.

Hi @tim.young,

It made me laugh too.

I copied the app to my account and it’s works perfectly. When I copy the CSS from the layout menu to my own app (I’m after a menu that might be good for mobile), it’s aligned left. Weird. I’m clearly overlooking some setting - perhaps some JS?


(I have currently fixed it to the bottom of my page - but even when it was at the top, it was still aligned left)

Ah ok! That makes way more sense.

The CSS for the Dadabase app is specific to the components for that app. It targets components by their ID, instead of class, and IDs will change per app.

This might help you until I get a chance to properly respond.

Finding the specific element to update

In the case of Dadabase, if you look at the CSS - you’ll see there’s code that references #x-element_page_1_11 or something like that. That’s the page specific component ID