While "https://www.drupal.org/project/d8w3css/issues/2881550" (subtheme procedures) was related, I thought it would be most helpful to open a new related issue.

Using the d8w3css as a base I have created a subtheme named w3csssub. The directory structure includes /themes/d8w3css and /themes/w3csssub. W3csssub is set as default on my site (fkelly.org). On that site I have a view that displays a customized menu of sorts ... customized because I need to uses images a menu links. You can see it in operation at:
http://fkelly.org/drupal8/gays

However, it is "in operation" properly only because I modified the code in the d8w3css /css/custom/theme.css file to eliminate height and width settings for images. This is a temporary expedient until I figure out how to override the css using my subtheme. The code in theme.css that is problematic is from lines 10 to 19:

a.d8-has-image {
  overflow: hidden;
  display: inline-block;
  height: 100%;
  min-width: 100%;
}
a.d8-has-image > img.w3-image {
 width: 100%;
  float: left;
}

My modified code that I am attempting to use as an override is:

a.d8-has-image {
  overflow: hidden;
  display: inline-block;
 /* height: 100%;
  min-width: 100%; */
}
a.d8-has-image > img.w3-image {
/*  width: 100%; */
  float: left;
}

Where I commented out height and width settings. (They cause distortions in the images see png below).

The libraries.yml file for the subtheme is:

global-components:
  version: VERSION
  css:
    theme:
      css/styles.css: {}

  js:
    js/script.js: {}

and the libraries.yml file for the base theme includes as global components:
global-components:

Version: VERSION
  css:
    theme:
      css/custom/base.css: {}
      css/custom/w3-custom-classes.css: {}
      css/custom/layout.css: {}
      css/custom/components.css: {}
      css/custom/theme.css: {}
      css/custom/responsive.css: {}

According to my understanding of how this works, the styles.css from the subtheme should get loaded AFTER THE theme.css from the base theme and thus override any styles in it. Looking at page source this seems to be working: I get:

@import url("/themes/d8w3css/css/w3-css/w3.css?p0rhhs");
@import url("/themes/d8w3css/css/w3-css/w3css-color-libraries.css?p0rhhs");
@import url("/themes/d8w3css/css/font-awesome/font-awesome.css?p0rhhs");
@import url("/themes/d8w3css/css/custom/base.css?p0rhhs");
@import url("/themes/d8w3css/css/custom/w3-custom-classes.css?p0rhhs");
@import url("/themes/d8w3css/css/custom/layout.css?p0rhhs");
@import url("/themes/d8w3css/css/custom/components.css?p0rhhs");
@import url("/themes/d8w3css/css/custom/theme.css?p0rhhs");
@import url("/themes/d8w3css/css/custom/responsive.css?p0rhhs");
@import url("/themes/w3csssub/css/styles.css?p0rhhs");

So it looks like the subtheme styles.css is loading last. However on the page itself the theme.css is taking precedence and applying widths and height to the image elements. (This testing is on a local host where I've carefully cleared cache multiple times and even turned off css aggregation).

I've attached a png of how the images look with these settings. The "correct" images are on the web site link I posted.

CommentFileSizeAuthor
images.png3.13 MBfkelly12054@gmail.com
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

fkelly created an issue. See original summary.

flashwebcenter’s picture

Component: Miscellaneous » User interface
Assigned: Unassigned » flashwebcenter
Status: Active » Closed (works as designed)
Issue tags: +drupal8 w3css Theme, +subtheme

Hello,
I would not recommend to update any css files in d8wcss theme. You can override the code in your sub theme by

a.d8-has-image {
  overflow: hidden;
  display: inline-block;
  height: auto;
  min-width: auto;
}
a.d8-has-image > img.w3-image {
 width: auto;
  float: left;
}

When you remove the 100%, the images will show in the default size and it looks like you don't have image style applied to your images. I don't know how did you build your views. Not sure if you used teaser or fields. To fix the problem you have you will need to do:
1- Create image style and use this image style in your views. /admin/config/media/image-styles
2- If you are using teasers in the views apply the image style to teaser mode in /admin/structure/types/manage/your-content-type/display/teaser
3- If you are using fields in views apply the image style to the image field in the view. https://www.youtube.com/watch?v=wCObqmBn3Xk

Drupal is loading the files in the correct order. If you don't see your overriding code it must be your cache.

flashwebcenter’s picture

Status: Closed (works as designed) » Fixed
flashwebcenter’s picture

Status: Fixed » Closed (works as designed)
fkelly12054@gmail.com’s picture

Setting height and widths to auto did the trick (after clearing cache of course). I know that I shouldn't be overriding the base theme's css code, which is why I posted the issue. Thanks.

By the way, the animations in the theme.css code are very nice features. They draw attention to the images as you hover over them.

FWIW, I set up a "representative image" field in my "juicebox gallery" content type, so it does have a style to it. That way I could use any image from the gallery to "represent" it in the view based "menu".

flashwebcenter’s picture

Status: Closed (works as designed) » Fixed
flashwebcenter’s picture

Status: Fixed » Closed (fixed)
flashwebcenter’s picture