Edit CSS menu

  • I have three copies of Montezuma installed, each driving a separate child theme. On two, the Appearance menu includes an option entitled Edit CSS. The other doesn’t. Can anyone tell me:

    1. Why is this, and how can I get access to this option on all three installations?
    2. What file is this accessing – I don’t see any file name, but it seems to be controlling various options and styles I’d like to be able to change on the installation where it doesn’t appear.
    3. I know Montezuma includes a map of the CSS files, but can anyone tell me in what order they are cascaded?

Viewing 1 replies (of 1 total)
    1. I’m guessing that the Edit CSS option that you are seeing in the Appearance menu is because you have the Custom CSS option activated in the JetPack plugin. So on the third Montezuma installation, install JetPack (if it hasn’t been installed, yet), then activate the Custom CSS option (JetPack > Settings > Custom CSS).
    2. It’s not accessing a file, the CSS rules are stored in a database table. When you first install JetPack for a site and activate the Custom CSS option, you are given a “tabula rosa” in the Custom CSS: no existing rules are given. You would use the Custom CSS field to override any existing rules or add new ones.
    3. The virtual CSS files are written to a physical file in the same order in which they appear on the left when you go to Appearance > Montezuma Options > CSS Files.

    So there are a few different ways that people work with the CSS in Montezuma:

    1. Make changes to the rules in the virtual CSS files. For example, if you wanted to change the font size of the widgets, you could go into the widgets.css virtual CSS file and make a change to this rule: 
      .widget {
   font-size: 14px;
   line-height: 1.3;
   color:   #666666;
   margin-bottom: 30px;
}
    2. Add an overriding rule at the end of the various.css file. Because various.css gets loaded after all of the other virtual CSS files (except for clearfix.css), you could add a overriding rule using the same selector: 
      .widget {
   font-size: 20px;
}

      Even though the selectors are identical, this rule will take precedence over the previous rule in widgets.css because it appears later in the sequence.

    3. Use a CSS plugin like JetPack to add your overriding CSS. This is similar to the previous point, you can add a rule with an identical selector to override an existing rule because the CSS from plugins will come after the CSS from the theme.

    Which technique to choose is a matter of personal preference. I generally follow #3, a CSS plugin, although the plugin I use is called Custom CSS Manager. I started off doing #1, but it was too tedious trying to hunt down the rule(s) that I wanted to change in the specific virtual CSS file, so I just started writing rules to override the existing rules rather than changing the existing rules. It increases the amount of CSS that’s loaded, which could affect the load time for the site, but I don’t think it’s significant.

Viewing 1 replies (of 1 total)
  • The topic ‘Edit CSS menu’ is closed to new replies.