I'd Like To Create A Full Bootstrap Theme at Oxwall Software Forum

Anitaku Aug 11 '16

Hi Miss N. Welcome welcome welcome!

#61

Leader

Darryl B Aug 11 '16

@ Phil W Feel free to jump in.

#62

Anitaku Aug 11 '16

I wish i knew enough to actually help lol

If something comes up that i have an idea on, i'll definitely help.

#63

Leader

Darryl B Aug 11 '16

lol. You think I know stuff? I'm just throwing in on what I know as well. This is something that everyone could have a part in, and maybe learn a little along the way.

#64

Miss Nookie Aug 12 '16

And obviously, I'm JUST learning Oxwall. I have experience in other types of CMS/Open Source systems, but I'm primarily a UX/UI designer, so learning the code base is not easy for me.

I think everyone can contribute who desires.

*smiles*

#65

Ebenezer from Bluetide Webs Aug 12 '16

This looks really rough but I'm sure you can improve on it. I have added a boostrapped menu component to the Boostrap plugin. Navigate to /ow_plugins/bootstrap/views/components to see the html content. Are you good with PHP?

I also added {component class='BOOTSTRAP_CMP_MainMenu'} to my theme template to call the Boostrap menu component.

Finally, I removed main_menu styles from base.css.

I have attached base.css, general.html and OW Booststrap v4 to this post.

Attachments:

ow_bootstrap_tutorial.zip (214Kb)

#66

Ebenezer from Bluetide Webs Aug 12 '16

In general.html, I removed:

<div class="ow_menu_fullpage"><div class="ow_menu_fullpage_wrap">{$main_menu}</div></div><div class="ow_site_panel clearfix"><a class="ow_logo ow_left" href="{$siteUrl}"></a><div class="ow_nav_btn"></div><div class="ow_console_right">{component class='BASE_CMP_Console'}</div><div class="ow_menu_wrap">{component class='BASE_CMP_MainMenu' responsive=true}</div></div>

And replaced it with:

<nav class="navbar navbar-inverse navbar-fixed-top">

<div class="container-fluid">

<div class="navbar-header">

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#owMainMenu">

<span class="icon-bar"></span>

</button>

<a class="ow_logo navbar-brand" href="{$siteUrl}">{$siteName}</a>

</div>

<div class="collapse navbar-collapse" id="owMainMenu">

{component class='BOOTSTRAP_CMP_MainMenu'}

<ul class="nav navbar-nav navbar-right">

<div class="ow_console_right">

{component class='BASE_CMP_Console'}

</div>

</ul>

</div>

</nav>

#67

Ebenezer from Bluetide Webs Aug 12 '16

I forget to add some glyphicons here and there... Maybe in the next one...

#68

Miss Nookie Aug 12 '16

I get by in php. I'm not great at it. I usually hire that out, so I can focus on what I'm good at.

*smiles*

I'm excited to play with this step over the weekend!

#69

Miss Nookie Aug 12 '16

I've gotten the changes in place. *smiles*

It's a start! I'm going to have to play, as I have some thoughts about what I want, exactly, and I'll need to combine some PHP changes with the template to get it.

That said, it's a good beginning.

Can plugins like Bootstrap affect other plugins? Could it override and rearrange the contents into new views?

#70

Ebenezer from Bluetide Webs Aug 12 '16

Depends on the order. For demonstration, try setting order to 'After Theme' on the plugin settings and notice how all the system and theme styles are overridden.

#71

Ebenezer from Bluetide Webs Aug 12 '16

BTW, you can use $('.ow_className').addClass('bootstrap_className); to add bootstrap classes to Oxwall system. You don't have to add components all the time. Just a simple tweaking of the element will do just fine.

#72

Miss Nookie Aug 12 '16

Quote from Ebenezer Obasi BTW, you can use $('.ow_className').addClass('bootstrap_className); to add bootstrap classes to Oxwall system. You don't have to add components all the time. Just a simple tweaking of the element will do just fine.

Can you clarify a bit more on this? This is interesting.

The Forum post is edited by Miss Nookie Aug 12 '16

#73

Miss Nookie Sep 3 '16

Just wanted to update. Ebenezer & I have been working on this project. I'm learning a lot more about the oxwall file layout, and wrapping my head around how I will make all of this work.

Ebenezer's new Bootstrap plugin is very close to perfect, and needs a good CSS styler on the other end. That's what I'm working on, so that I can explain what I did, and how to integrate Bootstrap more natively into Oxwall/SkaDate.

*smiles*

#74

Miss Nookie Sep 3 '16

A note about the above class additions.

For example, I'd like to use col-sm-5 for ow_narrow and col-sm-7 for ow_wide.

So, thanks to Ebenezer, I added $('.ow_narrow').addClass('col-sm-5'); and $('.ow_wide').addClass('col-sm-7'); to js/script.js then commented out all .ow_narrow and .ow_wide CSS in base.css.

Perfect! It uses Bootstrap classes flawlessly.

*smiles*

#75

Leader

Darryl B Sep 3 '16

That's cool. I've been playing around with the .addClass script on something else. It has various uses. I am using it to add classes based on a specific word to add a font awesome icon. I noticed your sample site is not available anymore. I was checking progress from time to time.

#76

Miss Nookie Sep 3 '16

Yeah, I'm moving it.

I'm working on two projects, so I'm working between them. I'll get that one back up in a week or so, I think.

#77

Leader

Darryl B Dec 21 '16

I've been playing around with the bootstrap CDN a little. I have been able to integrate a bootstrap sidebar push menu, and put a couple of other bootstrap elements in. The full CDN has it's own css, and overrides that does affect a handful of some elements since it applies the border-box box sizing to elements that don't have it defined. I just let the bootstrap do it's thing then fixed those items with css. There will be no way to do a full bootstrap theme, but elements can be placed in certain areas. I guess the upside from playing around with it is that I'm learning something new.

#78

Miss Nookie Dec 23 '16

We have a bootstrap theme, thanks to Ebenezer, running on my live site. Unfortunately, that one is SkaDate, so I know it's verboten to share much about it here.

It's working mostly smoothly, although it could use some tweaks, when we can find the time from the other developing we're doing and the growth we're experiencing.

*smiles*

#79

Leader

Darryl B Dec 24 '16

That's cool. I know very little about bootstrap, but I am thinking that it could be used for the base page structure. As long as it doesn't interfere with global use items like console, and place sections that are used by developers to place items.

#80

Oxwall Software

Please sign in

We build. You grow.

Start a social network, a fan-site, an education project with oxwall - free opensource community software

I'd Like To Create A Full Bootstrap Theme | Forum