Jump to content

Recommended Posts

Hi,

1 hour ago, cyberderf said:

How can I install this bootstrap profile over it?

The short answer is that you can't. The long one is that ProcessWire site profiles are not like themes you can just simply replace. You need to refactor your current template files. Or am I misunderstanding your question perhaps?

  • Like 1

Share this post


Link to post
Share on other sites

I just had a look at the template files: Whatโ€™s the point in the numerous โ€žrowโ€œ and included โ€žclass=โ€šcol-xs-12โ€˜โ€œ-Containers in the template files? They can be skipped altogether.

Also the duplicating of the navigation for displaying a mobile navigation is not really state-of-the-art... bootstrap provides a mobile nav solution right out of the box...

Keep it simple! Cheers!

Share this post


Link to post
Share on other sites

@flydev ๐Ÿ‘Š๐Ÿปย Is pwbs4 minimal profile still compatible with PW 3.0.148? I would love to test Bootstrap4 Carousel in PW.ย I am getting Syntax error on a fresh PW installation.

SQLSTATE[42000]: Syntax error or access violation: 1067 Invalid default value for 'created'
SQLSTATE[42000]: Syntax error or access violation: 1067 Invalid default value for 'created'
SQLSTATE[42S02]: Base table or view not found: 1146 Table 'pw-bootstrap4minimal.modules' doesn't exist

ย 

  • Like 1

Share this post


Link to post
Share on other sites
On 1/8/2020 at 7:27 PM, howdytom said:

Take your time. No need to hurry.ย Merci

I checked it and I need to rebuild the profile - I will update Bootstrap to the latest version at the same time as this profile was shipped with the beta version. Stay tuned.

  • Thanks 1

Share this post


Link to post
Share on other sites

Finally, I rebuilt the profile andย updated it to the latest version of Bootstrap 4.4.1. I Alsoย updated the bsRender* helpers functions, removed the Bower dependency and added the possibility (as example) to minify and bundle assets for releasing the website in production.

With $config->debugย set to true, you will want to work with assetย files in site/assets/dev/src, and when ready, you will launch a terminal in this same directory and type yarn build to minify, concat and bundle assets, then set $config->debug to false to see the website with the assets minified.

  • Thanks 1

Share this post


Link to post
Share on other sites

@flydev ๐Ÿ‘Š๐Ÿป Thanks for that PW Bootstrap profile.

I get errors with yarn build though:

Spoiler


D:\laragon\www\pwbs\site\assets\dev>yarn build
yarn run v1.21.1
$ yarn build-css && yarn build-js && yarn bundle && copyfiles --flat ./build/js/bundle.min.js ../static/js/ && copyfiles --flat ./css-dist/styles.min.css ../static/css/ && copy
files --flat ./src/css/main.css ../static/css/
$ sass ./src/sass/styles.scss src/css/styles.css && css-minify --dir ./src/css
D:\laragon\www\pwbs\site\assets\dev\css-dist\main.min.css ็”ŸๆˆๆˆๅŠŸ!
D:\laragon\www\pwbs\site\assets\dev\css-dist\styles.min.css ็”ŸๆˆๆˆๅŠŸ!
$ uglifyjs ./src/js/scripts.js -c -m -o ./build/js/scripts.min.js
internal/fs/utils.js:220
ย ย ย  throw err;
ย ย ย  ^

Error: ENOENT: no such file or directory, open './build/js/scripts.min.js'
ย ย ย  at Object.openSync (fs.js:440:3)
ย ย ย  at Object.writeFileSync (fs.js:1265:35)
ย ย ย  at run (D:\laragon\www\pwbs\site\assets\dev\node_modules\uglify-js\bin\uglifyjs:286:12)
ย ย ย  at Object.<anonymous> (D:\laragon\www\pwbs\site\assets\dev\node_modules\uglify-js\bin\uglifyjs:172:5)
ย ย ย  at Module._compile (internal/modules/cjs/loader.js:959:30)
ย ย ย  at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
ย ย ย  at Module.load (internal/modules/cjs/loader.js:815:32)
ย ย ย  at Function.Module._load (internal/modules/cjs/loader.js:727:14)
ย ย ย  at Function.Module.runMain (internal/modules/cjs/loader.js:1047:10)
ย ย ย  at internal/main/run_main_module.js:17:11 {
ย  errno: -4058,
ย  syscall: 'open',
ย  code: 'ENOENT',
ย  path: './build/js/scripts.min.js'
}
error Command failed with exit code 1.

ย 

I don't see a build folder anywhere. Where is that supposed to be? Is that the static folder?

Also, in package.json, what are these hard-coded paths?

Spoiler

"rename": "node -e \"require('fs').rename('/www/sites/pwbs4/wwwroot/site/assets/dev/build/js/jquery.min.js', './build/js/1-jquery.min.js', function(err) { if (err) console.log(err); console.log('jQuery File renamed!') })\"",

ย 

  • Thanks 1

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

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By rafaoski
      This profile can be used as a business card or very simple blog.
      Requires the latest version processwire 3.0.101 !!!
      Milligram Site Profile For Processwire 3x with include functions like:
      MarkupRegions
      FunctionsAPI
      wireIncludeFile | wireRenderFile
      Essentially, this structure uses minimalist CSS framework Milligram and the Flexbox Grid System Gridlex
      ย 
      Live Example
      CAN DOWNLOAD FROM THIS LINK ( Basic Version and simple Blog Version )
      https://github.com/rafaoski/site-milligram
      https://github.com/rafaoski/site-milligram-blog
      Screenshot:

      If you want to use Laravel Mix you must first ensure that Node.js and NPM are installed on your machine.
      Basic example to Debian and Ubuntu based Linux distributions:
      Node.js
      curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash - sudo apt-get install -y nodejs
      See more installation options LINK
      npm is installed with Node.js just check in linux terminal like below:
      node -v
      npm -v
      Set BrowserSync inside folder /templates/webpack.mix.js and change your dev url
      proxy: 'http://localhost/mix/', to your installation processwire folder like:
      proxy: 'http://localhost/your-processwire-installation-folder/',
      Next install npm packages in your templates folder with command npm install
      Now, boot up the dev server npm run watch, and you're all set go!
      On completion, use the command npm run production to build styles and scripts in the dist folder
      Simple Usage ( Basic Command )
      Run npm install Watch npm run watch Build npm run production All files to Webpack build steps is inside file ( webpack.mix.js )
      Folder With all SCSS files is inside templates/src/scss
      All build styles and scripts is inside the ( dist ) folder
      References:
      Milligram
      Gridlex
      Laravel Mix
      Feather Icons
      Web Font Loader
      Verlok Lazy Load
      Cookie Consent
      Particles.js
      ย 
      ย 
      ย 
      ย 
    • By MateThemes
      Hello everyone!
      I use Ryan's site profile blog for my new website. Everything works great, but i am not able to change the url of the blog categories. Currently the url is root_url/categories. My client wants the url root_url/news/categories.ย 
      If change the url in the tab url from /categories to news/categories Processwire change it to news-categories!
      How can I change that or can I change it in the php file too?
      Thanks for your help for a beginner!
    • By Marcel
      Hey all,
      I want to customize the mywebsite/processwire/profile page. It's almost all good but I want to get rid of the sections 'Admin Theme' and 'Language' so that the user can just set a new password. (see image)
      Do I have to modify the admin template or how can I do that? Because when I go tree>Admin>Profile there are no fields to add or remove.
      Or where can I find the php file?
      I would appreciate your help.

    • By Marcel
      Hey,ย 
      I am very new to processwire and bootstrap. I have a field (text area) and there I want to be able to insert an image which is responsive. I tryed it with Sourceย but in the end the page doesn't seem to like it when I insert in Sourceย the following code
      <img src="<?php echo $homepage->content_img->url; ?>" class="img-fluid" alt="Responsive image"> What can I do to make it possible to insert reponsive images in a text area?
      Thank you in advance.
      Marcel
ร—
ร—
  • Create New...