How to modify your CSS working with Mobile Angular UI and Bootstrap


Tags: css,angularjs,twitter-bootstrap,less,stylesheet

Problem :

I know that my question has already a huge number of topics, but I think it could be helpful for the community to have a clear answer in one topic.

This is about modifying your CSS while using Mobile Angular UI, with a bootstrap template.

  1. This is how a project is organized with Mobile Angular UI :
    • bin
    • bower_components
    • hooks
    • node_modules
    • platforms
    • plugins
    • src
    • www

I have my index.html in src/html/ and my other webpages in src/templates. My index importations look like :

<link rel="stylesheet" href="css/app.min.css" />
<link rel="stylesheet" href="css/responsive.min.css" />

thanks to that, I can see the bootstrap template on my webpages. But I don't know how to modify it. The two solutions I saw are creating a design.css and import it after the two other .css, but it doesn't work. I also saw that normally we should import bootstrap.min.css, but it has no effect on my webpages.

So How could I modify the global design for my webpages, like for example the background color, keeping the Bootstrap template ? Shall we go into the less files ? What's the aim of these two css responsive.min and app.min ?

How should we organize the CSS files while working with Mobile Angular UI ?

Thanks a lot !



Solution :

By the way, which version of Mobile angular UI are you using ? I think those stylesheets are not available. I have git cloned the project, and i can't see them.

And now I can answer your question. If you download the framework well, you will have a src directory. In this src directory you have less/variables.less, where you can change most of the customizable elements of your interface.

Then you gulp build again to have appropriate dist/css/*.css elements.

Hope that help.


    CSS Howto..

    How do I apply css animations to angular2 components before they are destroyed/removed?

    After ul li's float left ,how can I make text-align center?

    OS X is messing with me css, how to fix

    Changing a DIV to “position:fixed” then change it back to “static” and show the rest of DIVs

    How can I force CQ5.5 to ignore CSS data-uri-schemes?

    How to avoid an hover on a menu item to affect the menu items on the right

    How to do onclick in CSS to do transition on image?

    How to visually indicate current page in ASP.NET MVC?

    How do I 'freeze' a block level element?

    In javascript, how to get a class name from a td cell?

    How do I make a absolute positioned div have a width equal to it's parent minus some margin

    How to give footer background color for the whole width of the browser with fixed parent div

    How do you specify a css property to be applied only if the browser is IE in the stylesheet?

    How to edit WordPress CSS written as inline CSS? [duplicate]

    CSS: How to prevent Background colour to be overwritten by colour from less-file

    How do I get my divs to ease in right after eachother on page load?

    Changing my web-font in css caused a my old font-size values defined in “em” to be inaccurate. How to fix it?

    how to style this form by css (mailchimp)

    How do I make half a hexagon shape using CSS with a border over a rectangle with a border with an image in the middle of the half hexagon

    How to Style Similar to an Exam Questi-n

    how to change the background color of the holder of an image using jquery cycle

    How to have “onmouseover” highlight in css?

    How to make sure CSS/JS files are not cached on browser? [duplicate]

    How to enable links if a parent element uses a fullscreen pseudo-element?

    How to edit css live with ie6

    How do I apply the following CSS to only the Parent nodes of a Kendo Tree View?

    How to apply css selector in ZK

    How to add spacing between two span elements

    How to overlay images with css (cross-browser)

    How does one move html elements with scroll?