My developer added my style changes for a quick mobile version of a site since the deadline is so tight. I built it static and gave to him to implement into the CMS.
Well now the design is angry and I can't find why. I think something is going on with the CSS, my dev thinks it might be something with jQuery UI.
THE LINK (our staging area)
It's responsive so when you shrink the site down, my mobile build appears. The trouble comes when you start to click on Entertainment/Stay & Play/Dining/Gaming tiles. They're a very weird sliding around of these things and I can't lock down where the issue is coming from.
Anyone have any ideas on what's up?
jQuery UI's accordion and Bootstrap's accordion may be in conflict - in which case, you can make sure that jQuery UI Accordion isn't being included in the website, or download a special version of jQuery UI which is designed to not conflict with Bootstrap.
Related
I have an angularJS/Jquery based web-application. In shortage of time many pages have inline styles. There is a common CSS file which is included on every page. The problem is that : on resize of browser or on projector my application looks distorted. All the pages of application not having unform layout, few are list pages, few are form pages and few others are widget with graphs. Could anybody help me to make this web-application responsive without making much changes.
I need a quick-start tip/third party tool or a guidance document to optimize CSS and make the weUI responsive.
What you need is a framework that implements responsive layouts.
Popular frameworks are Bootstrap and Materialize. Those are a good place to start. Learn about their grid layout, which will help you set how each container element will be viewed on different displays.
http://getbootstrap.com/
http://materializecss.com/ (for Google's material design approach).
There is a lot to talk about when designing web apps for mobile and desktops, but these frameworks are a good start.
Making web apps responsive is not a quick-and-dirty job, and maintenance is a constant work. It sounds like you have a lot of work ahead of you. Definitely with making many changes...
Can you just use CSS?
See this, if you haven't:
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Hi i have already created my asp.net app and its running perfectly except we recruited a new member and he started on this new app and he is using bootstrap animations and templates and all... while i didnt i used css myself cause i tried to personolise it just like they want any way now my boss was amazed with what bootstrap can do an all and now i want to add transitions and cool css,ajax stuff to my app any links or methods to help please im BURNING INSIDE.
please help
In case you need to update your project to use boostrap, then you need to move all the styles you added to a stylesheet file, and call them as needed (that is separate from bootstrap, just to make it more easy when you need to change styles). Besides that, if you want to use Bootstrap, it's simple, just add the boostrap files (styles, JS) and then use them as explained in the Boostrap website. Also, you can customize them as you want, but those components and classes will make the magic to make your website compatible with cross browsing and devices.
http://getbootstrap.com/getting-started/
Hope that helps!
I am working on this responsive design for an ASP.Net website at work which needs to work with IE8 as well, Everything is working fine in every other browser except in IE8 the post back events make the page loading in Mobile view and then changing into desktop view pretty much visible to the user, which i assume is because Respond.js is taking time to kick into action.
Hence i am thinking to change the media queries in a way that the design works with desktop first. But i need to know is this the right way to go or maybe i should switch back to Bootstrap 2.3 or some other framework maybe. But i am almost in the stage of completing my design.
I can use separate style sheet, but the requirement is superfluously the responsiveness needs to work in IE8 as well.
Thanks in Advance.
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.
I am making a top menu, and it looks like this:
http://i.stack.imgur.com/5O5G5.png
The contact tab will remain in its place and the home tab has to be first.
IF the user wants to add another tab, they can in the cms editior (DNN) they would just create the link and wrap the div tag about the link etc..
im stuck to how i can get the css to add the menu tab and push the home tab to the left as the menu grows?
If sounds like you are trying to manually build the menu using HTML. What you need to do is ensure that you have the DNN navigation control as part of your skin and it will handle adding the menu items for you. You'll be able to modify the menu to look however you like using CSS.
The best way to learn DNN skinning is to look at one of the existing skins (found in /Portals/_default/skins/) and then copy one of the skins and start making changes to change it to your desired look.
The DNN skinning architecture is very well done and easy to pick up for anyone who knows ASP.NET (though it is different from Master Pages). The hardest part is picking and learning to work with the various navigation providers. Most people work with DNNMenu which is more complicated than it needs to be on the CSS Side. The DDR Menu which will be the default provider for DNN 6+ should be easier to work with. But the documentation for it isn't complete yet so it takes some learning to get started with it.