So I set things up in Step 1, and almost everything seems to work, there are a few problems but I will clean those up later.
Now I have to deal with the Sass for design, colors and style, to make the forums my own. Finally I want to customize a lot of things, but for now I just want to arrange the colors and effects a little bit.
I am just a hacker with little real ability in coding, I just know how to handle html and a little css, and then where to put the metatags or javascript, that's about it. But Sass code is somewhat accessible to me, as it similar to CSS, so I can read it a bit. Most importantly, it lets us do all sorts of really cool things like gradients, hover effects, and shadows and so on. As my design evolves, Sass is going to be critical to maintaining a really outstanding look and feel.
I wasn't comfortable editing the Sass files on the server, so I downloaded everything and set it up on my local machine. I arranged it just like on the server, with the main sass file and several partials in the first folder, and then the lib and partial and the other folders as well. The config.rb file isn't hard to edit at all, I put mine below.
Now I have access to all the templates and style sheets, and can convert, make a new css file, and upload that to the server in modx to implement. Chromium has been great not to cache the page, and I always clear cache after changing the css file then over to Chromium to see the changes. Relative paths work and everything. There are a couple warnings and one error on one picture, but I haven't seen any effect from that at all.
The default design code is really robust I would say, there are lots of different effects that I can eventually utilize freely as I learn more. There are also lots of sort of dead ends that I can pick up and utilize myself (gradients that are defined but not used or rarely used, stuff like this), resources in the code basically. This means I don't have to know how to build up a shading effect, but still use one at will. I could take that code and use different colors, attach it to whatever I wanted...
Now I care most about colors, and I built up a rough guide to where stuff is. Generally, the files to edit are _theme-settings, but also _forums, I didn't touch _color-patterns actually, as that seemed too confusing. Header stuff is all in _masthead.sass, _shared has a couple things. Text on the right sidebar is all in the sidebar template, and there are some boxes in there that key off of the main light background color (yes its a very dark implementation of a very light color).
Basically the color palette provided is good but they ended up linking most stuff up to two values, the background color and the header color. So I have been unlinking them and at least having more variables involved. I provide my colors at the moment with comments, below.
Background: all shadings of some posts, the grey area with "Title" in it, search and view latest posts, the sidebar dark boxes, the locked button, breadcrumbs
Header: header pick, horizontal bar with title content in it, reply bar, and title of post when its a link. I can't remember if the whole top is built off of this value, anyway it all can be changed in the masthead.sass file
Anyway, at this point I have almost complete control over my colors! I broke up the bunches just a bit, and figured out where stuff was mostly. There are a few gaps but overall I get to do what I want to do now!
CONFIG.RB
# Require any additional compass plugins here.
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "/"
images_dir = "images"
javascripts_dir = "js/redo"
output_style = :expanded
# To enable relative paths to assets via compass helper functions. Uncomment:
relative_assets = false
# To disable debugging comments that display the original location of your selectors.
line_comments = true
color_output = true
# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
COLOR GRID
$c-base: #fff // Background color. Many elements are built from this base - recent posts are in _shared
$c-copy: #444 // Base copy color- original is dark purple - most text of topics in grid
$c-copy-med: #444 // Secondary copy areas - used for dates and posts of user in thread
$c-dark-bg: #0066cc // Intense Green - Main CTA buttons and glow on hover - hover seems to have two colors involved but this is main one
$c-dark-cool-bg: #797BF7 // Dark Blueish Green - this is the main strong dark color - masthead has all header stuff, other in in boards and posts
$c-alt-1: #0066cc // Light blue - one place, button in header
$c-tertiary: #f3ad3a // Orange - Not sure if used
$c-tertiary-alt: saturate($c-tertiary, 10%) // To be used with orange
$txt-color-lightblue: #0066cc // all top header links except create one link and there is text there
$txt-color-lightblue-over: #a3c94f // nothing it seems...
// GRADIENTS
$g-low-contrast: darken($c-base, 9%), darken($c-base, 17%)// where is it not used at all or much
$g-med-contrast: // Not used...
$g-high-contrast: // Not used...
. I hoped my 3 week holiday would make me feel better and fresh.... but it didn't.
. Thanks!