Responsive mode is not working in Joomla template made with Artisteer - css

I have a website with Joomla 2.5 CMS and template (theme) made with Artisteer 4.1.
Responsive (mobile) mode is not working, but template.responsive.css file is there and seems to be ok and general template structure seems to be ok too (in comparison to other templates which have no problems with responsive mode).
Under problem with responsive mode I mean that changing web site resolution make no changes which should be in this case.
How to fix responsive mode problem?

Several things spring to mind:
Joomla 2.5 is very old and not supported any longer.
Since Joomla is old, it is very likely that the template that works with it does not proper support responsiveness.
Artisteer has never been known for it being responsive. Actually more that it does not work.
Solution is primarily to use another or more modern template (that you know is responsive). And better to first update to Joomla 3 (Joomla 4 is soon here).
If not, then you might have to make the template responsive your self - it only takes CSS skills and perhaps a Joomla module for a better module.

Related

Is it bad to use bootstrap in a Wordpress theme?

Most "regular" websites I've seen generally use Twitter Bootstrap, at least for the grid layout.
Most themes I've seen to WordPress does not use Bootstrap, they are often built with a custom grid layout.
Is Wordpress + bootstrap a bad solution? Or why do so few Wordpress themes use bootstrap?
I'd agree with most of the comments, but I'd argue that this is NOT an opinion based question. There's nothing empirically WRONG or BAD about using Bootstrap in WordPress themes. In fact, I do it every single work day. Sage theme is a popular starter theme that uses Bootstrap, and there's plenty others that do as well.
The technologies are perfectly compatible, it's ultimately just up to your design / development goals for the theme. If you desire finer control and don't want to do a bunch of style overrides for a very specific look-and-feel, then maybe Bootstrap isn't right for that particular project. However, there's nothing from the WordPress side of things that would make this a bad solution.

Recommended way to redefine Bootstrap features in Wordpress plugin

I have to develop a plugin for Wordpress. Most of the styles are based on the Bootstrap CSS library. However, for some design decisions I have to redefine the default behaviour of bootstrap. What is the recommended way how Bootstrap features are to be redefined?
One example: I need a zebra striped table. The bootstrap class table-striped has already much of the features I need. However the stripes should be green not gray and the contrast should be a bit stronger. In addition some of the features of the Bootstrap class table must e changed – for example padding and font-size.
The clients who are installing my plugin may or may not update to new versions of Wordpress and Bootstrap. Some of the might be unable to change the Wordpress or Bootstrap installation which exists already on their web host. For this reason it is probably not a solution to modify Wordpress files or the Bootstrap original CSS. In addition: The solution must work with various browsers – not just browsers of the last generation.
I have looked in various forums and found a number of suggestions – including .less and recompiling a modified version of Bootstrap. However, many of these solutions look more like hacks or “work-arounds” rather than a “recommended software architecture” - a kind industrial standard. Other solutions work only with very new browsers.
To summarize my question: How should we integrate modifications like these outlined above into a Wordpress / Bootstrap environment?
If you're worried about Bootstrap updates you could always do some kind of "child theme" type of treatment: You can be using your main style.css to overwrite the bootstrap styles. Then your WordPress theme and Bootstrap styles can be independent.

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.

Integrate Joomla CSS system with Twitter-Bootstrap CSS

It's less that 24 hours that I've known Bootstrap and I've fallen in love into it!
As I've understood, Bootstrap is a collection of CSSs ready to use.
We should only give the class name according to Bootstrap and our website will have a modern and perfect look.
OK.
Now the problem is that Joomla builtin system doesn't use Bootstrap compatible classes.
Is there a fast way to change way to change Joomla builtin CSS system to be compatible with Bootstrap?
Hope it be understandable.
Maybe there is a plugin to convert Joomla CSS system to Bootstrap-familiar CSS. I couldn't find such exact plugin.
I know the feeling about Bootstrap. A lot of people would disagree, but I too really like it. However, even though Joomla 3.0 is based on Bootstrap, I wouldn't recommend using it, as it's the short release. Joomla 2.5 is still the long term recommended version to use, therefore I suggest you stick with that and find yourself a Boostrap template, such as Joomstrap, which is free. Please note that the template was based on Bootstrap 2.0.4, so you will need to download the latest version and replace the CSS and JS files.
You might also be interested in the Boostrap template based on Gantry for Joomla 2.5.
Having said to stick with Joomla 2.5 as it's the long term release, once Joomla 3.5 comes out, which will be the next long term release, I would upgrade to that. This too will also be based on Bootstrap.
If it's possible for you to upgrade your System, the new Joomla 3.0 comes with Bootstrap. Otherwise you only have to build an own Template where you use this Framework.
There is no problem with doing that.
You start with developing a custom template, then after that you just use overrides for your components etc.
You don't need a plugin.

Convert a regular website to a mobile website

I have an existing website running in wordpress, and uses a custom headway theme. I want to make it compatible with BlackBerry.
What is the process of making it compatible with a BlackBerry?
Do I need separate css, or a separate site dedicated just for mobile?
How do I emulate a BlackBerry and debug my css or design?
Zourtney linked a pretty cool looking plugin, but if you're looking to do this by hand you want to use css3 Media Queries.
http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
http://www.davidrcole.com/2010/11/make-your-website-mobile-friendly-in-one-night/
For older blackberries - basically anything pre torch I believe you're going to have very shoddy css and JS support, so you'll want to do some testing on an actual device, and use clean semantic html on your page for better rendering.
First off, you certainly don't want another site -- that is, you don't want another copy of your database. What you do want is theme switching -- found through a quick Google search.
You will want a completely separate Wordpress theme (CSS + html/php). And always be sure that you also include links for mobile users to view the full site (default theme) as well.

Resources