Page Builder by SiteOrigin and CSS Framework - wordpress

If I was creating a custom WP theme using ZURB Foundation, but my client needed a page builder to help build pages and/or posts in the future (say it's for a photographer who constantly posts photos in a structured grid), would it be poor practice to combine using a CSS framework and Page Builder? Is there any forks of Page Builder that have implemented a popular CSS framework (Bootstrap, ZURB Foundation)?

I am using Pagebuilder with a Foundation6 Framework. Works like a charm, as PB overrides styles and is responsive out of the box. But you can easily add new widgets. I combined the custom widgets (with F6 styles) and the original PB Widgets. So i got a perfect install.
you can get started here: https://siteorigin.com/docs/widgets-bundle/getting-started/creating-a-widget/ I really recommend to download the example files from github which are found here: https://github.com/siteorigin/so-dev-examples
good luck ;) If you need support for custom F6 Widgets tell me :)
All the best

Related

Piranha CMS and different css frameworks

Piranha CMS uses Bootstrap 4.1.1 out of the box. The question is just this, is there any opportunity to use other css framework? I mean to use it in client part of the project. I understand that it's possible to customize WYSIWYG editor to use any classes from any css framework, but in preview in manager module of Piranha CMS one will not see correct page view as cms uses Bootstrap 4.1.1.
As Piranha is a decoupled CMS you can use any css framework you want in your client application. The wysiwyg editor in the Admin UI can be styled with custom style sheets, but the concept here is not to mimic 100% the front end application, rather give the editor a good hint of what he/she is doing.
When you click preview in the admin it will actually open a new page that contains an iframe with the actual site, so here the editor will see the actual layout of the content.
Best regards

Create own css template or buy ready made css template in bootstrap

I'm confused with some css templates in bootstrap.
I've been a developer for years already but I never worked in a company that let me create an entire website as front-end developer say for example an e-commerce site.
So if someone would say "do an e-commerce site", do I have to ask them for a ready made css template? If so, then is it possible there are already other sites that bought it, other than me, e.g. we may have the same web face?
I am not really an expert in css nor an artist. I have created a website for personal use but it was pure bootstrap. I can see other templates in bootstrap; they have other components manipulated, like a different menu which is not present in their list of components.
How did they do that? Is it another individual css, js, html component? Do I have to create my own component sometimes?
For you to understand me, I can create relatively easily any site written in either React or Angular but I cannot create my own css design.
The examples and templates that you see in Bootstrap uses the Bootstrap framework, but the CSS and JS design components are changed to better define what the user wants it to be like.
For example
form-group-lg select.form-control{height:46px;line-height:46px}
This is the pre-defined CSS value from Bootstrap CDN, changing this CSS value to something else, changes your design, but you still are based on Boostrap. Basically, Bootstrap is not only about design, it's following a library, a framework, a skeleton to make your web development (specially frontend) easier.

Sencha: Is it possible to keep the touch theme instead of Modern theme?

I'm working on converting my existing sencha touch 2.4 to sencha 6.0.2. Here i thought of loading my application with the old touch theme instead of new modern theme.
Is this possible to include the touch.css instead on current css which is auto generated using sencha cmd.I tried this but all my component ui get collapsed.
Is there any way to omit the modern theme css included in generated css?
Or else i need to create a new theme which resemble same as touch theme?
Its like upgrade the SDK framework without upgrading or changing the UI design of the application.
You will have to create a new theme which resembles your existing theme.
Your requirement of
upgrade the SDK framework without upgrading or changing the UI design of the application.
isn't as straightforward as just swapping a few files. Since there are a lot of differences in the way UI elements are tied to the underlying API between Sencha touch and ExtJs Modern Toolkit, I suggest you look here for the upgrade process, and here for the theming.

Responsive wordpress site using Twitter Bootstrap

I am working on a blog redesign and I am well acquainted with responsive design. I am not so familiar with wordpress though, so I am thinking of using twitter bootstrap. My question is, if I customize my stylesheets and other files(like header.php etc) can a bootstrap update erase all my changes? What would be the bets way to keep bootstrap as a base and building from there? I have my design specs from a designer, so I have to customize or build from scratch.

Can I prevent DotNetNuke css from conflicting with other frameworks?

I started to look into DotNetNuke recently as a client asked me to do so.
I noticed straight away that DNN is different from other CMS I'm familiar with in a way that it mixes its own controls with site's presentation. (Other cms like Umbraco, Wordpress, Orchard have separate interfaces for content management).
I'm building a responsive website and using Zurb foundation for it. The problem I have is that DNN's css start to mess Zurb's css. I don't want to edit neither css and the problem seems very serious. Is it addressed somehow in DNN?
Bearing in mind how popular mobile browsing has become responsive desings and hence frameworks like Zurb or Twitter bootstrap will gain more and more popularity. And it looks like DNN doesn't play nicely with them, it may become a huge no no for DNN.
The whole idea of mixing site's presentation with cms controls looks wrong to me. Is it possible to prevent them from mixing and messing with each other?
Cheers.
There is a Portal.css file that always gets loaded no matter what DNN skin you use. Then each DNN skin loads a skin.css file associated with the skin/theme and any other specific CSS files it needs to reference.
The issue you are probably having is that the default styles set in Portal.css are conflicting with your theme. What you may need to do is override the CSS that is causing trouble at the top of your skin file.
But yes, this does happen since DNN declares styles for modal popups, dropdowns, links etc that are used in the admin functionality and since that is inline with the actual site design they can conflict if you are using a framework like bootstrap, etc.
We created a Foundation DNN Skin specifically to solve what you're looking for - https://github.com/Ethanhackett/foundation-5-dnn-skin
It avoids the CSS conflicts and has some jQuery no conflict resolutions which need to be addressed since DNN is on jQuery v1... and Foundation is using jQuery 2...
I hope that helps.

Resources