Using the custom.css file [#2851637]

great theme and documentation. However, some things are not clear to me (will adress them in separate issues). I have generated my theme with AT Theme Generator and want to use the custom css file (located at xxxx/themes/my_theme_nam/styles/css/.

As I understand it, it is just a matter of overwriting the css that comes with the ATdefault theme. However, after looking at the AT theme file structure, it seems to me that the css files are targeted to the admin theme. So I looked at my generated theme file structure: /my_theme_name/styles/css/components/ and found a bunch of css files ...Am I correct in assuming these are the files I need to go through to find and use the declaration to, as an example, change the background color of the page? In my exercise I am trying to change the background color of the entire page, but using Firebug, I selected the body tag to select the entire page but changing the background color just changed the footer color ... Am I missing some understanding about the css/html works in AT?

Comments

Comment #1

10 February 2017 at 20:59

dzinelabs created an issue. See original summary.

Comment #2

Jeff Burnz CreditAttribution: Jeff Burnz commented 11 February 2017 at 03:21

Just use the inspectors to find where stuff is coming from - theres way to much to detail it here, the method is - use the browser inspector and figure it out.

Don't read through endless files looking for stuff - that will be an exercise in hell, let the browser tell you where stuff is - it gives you the file name, path and the line numbers, so use that information effectively. FYI Firebug is old school, Firefox probably has the best Inspector of all browsers right now, so I'd use it (personally I use Chrome and it's very good also). I love Firefox however because it's responsive design inspector features are superior.

In AT a "page" is broken down into Rows. Think of it like a table - you have rows (horzontally) and withing the rows you have columns (vertically). Rows are the outer wrappers, and the columns are the regions (they might stack or have some other visual layout, e.g. as "columns").

It's this system of rows that allows you to set any width on any row, e.g. you might have one or more rows that are full browser width, but the others are not - it's very flexible.

Each row can be individually colored, but the for the whole page look at .page {} and .regions {} in color.css around line 146. Regions and some rows might override this, or not. It's a bit complicated, but you don't get the flexibility by building simple things etc.