Mobile page styling (CSS)

0
This is probably a problem that I am over complicating but I'm not seeing the answer.  I have a phone layout that is used throughout the app and this layout uses the typical header at the top of the page.  I'd like to be able to style the header differently based on whatever section of the mobile app the user is viewing.  That's easy enough but it seems the header always uses a class of h1 and mx-title and I can't change that for pages that I want to use other additional styling.  I've tried duplicating the layout and applying a different class but it ignores it every time and uses the h1 and mx-title so I feel like I'm forced to use one set of classes and one set of styling for the entire app. I'll make up an example.  Basically I want to use my layout that I'll call: "mobile_layout_1" and in some of the pages I'd like to style the header blue and the other half green.   .mx-title { font-size: 20px; font-family: $font-second; font-weight: 400; } h1, .h1, .h1 > * { font-size: $font-size-h1; font-family: $font-second; font-weight: 400; color: $brand-primary;  
asked
3 answers
3

Hi Andrew, you can apply the class to the page itself i.e. green or blue. Then in your css you can set something like:

.green {
   .mx-title {
      color: green;
   }
}

 

answered
1

You can simply add another class to the header text in the second layout you created. Open the text widget, and enter a new class name in the Class field. Then target that class with some CSS rules. If the rules don't go into effect, perhaps add !important to the end of them, to make sure they aren't being overwritten by default styling.

.secondaryHeader {
   color: green !important;
}

 

answered
1

Make a class for your new header like this
 

.new-header{

   h1, .h1, .h1 > * { 
      font-size: 25px;
      font-family: $font-second;
      font-weight: 400;
      color: $brand-primary;
      }
}

 

In the modeler, put the header inside of a container (div) and add the class new-header.

 

 

 

answered