0

I created a foundation sub-theme and am now customizing my site. I am confused as to where to edit styles sometimes. For example there are these styles are generated somewhere which I can't find where. If I wanted to change the padding and line-height, what is the correct way of going about this?

@media only screen and (min-width: 40.063em)
.top-bar-section li:not(.has-form) a:not(.button), #topbar-forms li:not(.has-form) a:not(.button) {
    padding: 0 0.5208333333rem;
    line-height: 1.5625rem;
    background: #FFFFFF;
} 
1

I find it's generally easier to track down CSS selectors by disabling CSS aggregation and then using your browser's inspector feature. This will give you a file and line number to reference for tracking down the selector in question. Often times, you may be able to simply copy-and-paste the selector in question into your subtheme and edit it as needed.

You'll always want to make your CSS and template changes in the subtheme; don't touch the base theme just like you wouldn't touch Drupal core to make code changes. This ensures that if there is an update to the base theme, you can apply it without losing all of your customizations.

Many base themes already have a CSS file structure or directory in place to help you figure out where to put your selectors. If not, the architecture is very much up to your personal preferences. You could put everything in one file if there are only a couple of changes, but most people use some sort of systematic CSS architecture, such as SMACSS, to keep things organized on more complex projects. Alternately, it might make sense to you to mirror the file structure already found in the base theme. You normally don't need to copy all the CSS files from the base theme, just create files to hold any new or customized selectors as needed.

If you haven't yet, check your base theme for a README file, or look at their online documentation for more hints on properly customizing it using a subtheme.

Follow-up, more specific to SASS and Foundation theme:

If you're looking for the SASS file that a selector comes from, the easiest way to trace that down is by enabling SASS source map generation in the subtheme's Gruntfile.js. Add sourceMap: true, to the sass options in grunt.initConfig() similar to this:

grunt.initConfig({
  ...
  sass: {
    dist: {
      options: {
        outputStyle: 'compressed',
        sourceMap: true,
        includePaths: ['<%= global_vars.theme_scss %>', '<%= global_vars.base_theme_path %>/scss/'].concat(bourbon)
      },
  ...

You may also need to enable loading of CSS source maps in your browser's settings (See the "Enabling source maps in the browser" section from http://thesassway.com/intermediate/using-source-maps-with-sass.

Using source maps to trace back to the specific selector from your OP, it seems to be located in path/to/themes/zurb_foundation/scss/foundation/components/_top-bar.scss. Looking at the base theme's SASS, you can see it utilizes variables for determining the padding and line-height properties:

.top-bar-section {
  ...
  li {
    ...
    &:not(.has-form) {
      a:not(.button) {
        padding: 0 $topbar-link-padding;
        line-height: $topbar-height;
        background: $topbar-link-bg;
        ...
      }
    }
  ...

And those variables are defined elsewhere in the base theme (do a text search to find them) with the !default property:

$topbar-height: rem-calc(45) !default;
...
$topbar-link-padding: ($topbar-height / 3) !default;

This means they can be set to something else in your subtheme's SASS before they are used in the base theme's SASS in order to override the base theme's defaults. I can't tell from the OP, but I'm guessing changing the value for $topbar-height might accomplish both changes you are attempting to make. Doing things in this way (overriding !default variables from the base theme) is less likely to cause alignment issues elsewhere in the theme, so it's generally the preferred methodology (assuming the theme is doing a good job of utilizing SASS, which seems to be the case for the ZURB Foundation base theme)

In order to do this in your subtheme, I'd recommend either adding the variable overrides to your subtheme's scss/base/_init.scss file, or creating a new scss/base/_overrides.scss file and editing the main theme SASS file at scss/your_theme_name.scss to @import "base/overrides" it just below the existing @import "base/init".

For example, try adding this to the bottom of the subtheme's scss/base/_init.scss file to double the top bar's height:

$topbar-height: rem-calc(90);
| improve this answer | |
  • CSS aggregation was disabled. I'm still seeing some styles only in the foundation_subtheme.css file and no where else. Isn't this file what all the other scss files compile to? If I style is there, shouldn't I be able to find it somehwere else as well? My browser inspector is not showing more. – MG1 Aug 4 '16 at 14:49
  • @MG1 Yes, you're correct, all the .scss files in your subtheme (and those pulled from the base theme) get compiled to the one .css file. I've added a follow-up to my answer with more specifics that may help. – hampercm Aug 8 '16 at 13:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.