Been trying to set up colors for dw3css custom theme. On the theme settings page for my subtheme (which I have installed as default), setting a color (e.g., w3-yellow) for the Page Wrapper Background color does not seem to have any effect. After mucking around with Firefox developer and style editor I was able to make a change by changing:

.w3-theme-l5 {
  color: #000 !important;
  background-color: #140202 !important;
}

inserting the #140202 as the color in w3-theme-custom.css in the d8w3css/css/w3-css-theme-custom directory.

The theme appearance set up page seems to imply that you can change this color right from the input field by inputting "w3-yellow" (or another color.

I'm wondering if this could be because the page wrapper is not listed as a region in the info.yml file? Looking at the w3css_theme.theme that appears to do the set up we have:

  $form['drupal8_w3css_theme_settings']['w3_colors']['color_page_wrapper'] = [
    '#type' => 'textfield',
    '#title' => t('Enter Page Wrapper Background color, Text Color or any W3.CSS classes'),
    '#default_value' => theme_get_setting('color_page_wrapper'),
  ]

but there is no region named "page_wrapper", For most of the regions where the color setting appears to work properly there seems to be a corresponding region for the in the info_yml file.

Sorry if I am off base on this. If so, perhaps a simple explanation of how to change the page_wrapper would suffice.

Comments

fkelly created an issue. See original summary.

flashwebcenter’s picture

flashwebcenter
he/him
Primary language English
Location Austin TX
CreditAttribution: flashwebcenter commented
Status: Active » Closed (works as designed)

The background on the parent div is not visible because it's covered by the children. In order to make visible changes you need to apply them to the children-since they're in the foreground-.

Page wrapper is the parent for all children divs. https://www.drupal.org/files/project-images/drupal8-w3css-theme-color-gu...
All the children divs have a default background color. We usually apply background color or the text color for the page wrapper div as a default, just in case any of the children divs don't have color, background color or hidden.

I would recommend applying the background color or the text color to each of the children divs.

fkelly12054@gmail.com’s picture

fkelly12054@gmail.com CreditAttribution: fkelly12054@gmail.com as a volunteer commented
Status: Closed (works as designed) » Active

Thanks for your quick response. I am still trying to "understand" exactly what's going on in applying colors.

On the admin/appearance page I can apply a predefined w3css theme and/or apply text or background colors to each region with Advanced Site Colors. Although page wrapper is not really a region ... you say it's a parent div in your previous response.

If I pick one of the predefined themes, say w3-theme-yellow, then what happens is that the system loads

@import url("/themes/d8w3css/drupal8_w3css_subtheme/css/w3-css/w3.css?os7z57");
@import url("/themes/d8w3css/css/w3-css-theme/w3-theme-yellow.css?os7z57");
@import url("/themes/d8w3css/css/w3-css-theme/w3-theme-yellow-custom.css?os7z57");

where I am just showing the w3-theme-yellow files as the last css files loaded (thus making them override anything earlier).

The custom yellow css doesn't do much but the base one has as its first class:

.w3-theme-l5 {
  color: #000 !important;
  background-color: #fffef3 !important;
}

and its this #fffef3 color which covers the area of the screen that is not covered by "normal" regions. If I change this to something like: #ffeb3b I get a yellow in the background between the regions (what I was conceiving of as the page wrapper, though I guess it's not.

I guess my question is what is the function and purpose of the .w3-theme-15 class and how do I know where it's going to be applied. There are a series of such classes ... theme-14, theme-13 ... etc. Where and how do they get applied. I don't see any reference to them on the setup (appearance) screen.

For my purposes, if I just don't apply a full custom theme but instead rely on advanced site colors I get close to what I want. Though I don't see how to modify the page wrapper (or perhaps more properly the page background) without mucking with css.

flashwebcenter’s picture

flashwebcenter
he/him
Primary language English
Location Austin TX
CreditAttribution: flashwebcenter commented
Status: Active » Closed (works as designed)

The predefined themes are created by w3.css https://www.w3schools.com/w3css/w3css_color_themes.asp. Not all the classes are used in page.html.twig. To find the used classes, open d8w3css/templates/layout/page.html.twig and search for w3-theme. It is w3-theme-l4 not w3-theme-14.

If you use the advanced site colors just look at the name on the image https://www.drupal.org/files/project-images/drupal8-w3css-theme-color-gu... and apply the color.
Ex. If I want to apply a background color to "Top Container", I will add the w3-pale-yellow under "Enter Top Container Background color, Text Color or any W3.CSS classes".

flashwebcenter’s picture

flashwebcenter
he/him
Primary language English
Location Austin TX
CreditAttribution: flashwebcenter at Flash Web Center, LLC for Flash Web Center, LLC commented
Issue tags: +drupal8 w3css Theme, +color
flashwebcenter’s picture

flashwebcenter
he/him
Primary language English
Location Austin TX
CreditAttribution: flashwebcenter at Flash Web Center, LLC for Flash Web Center, LLC commented
Assigned: Unassigned » flashwebcenter
flashwebcenter’s picture

flashwebcenter
he/him
Primary language English
Location Austin TX
CreditAttribution: flashwebcenter at Flash Web Center, LLC for Flash Web Center, LLC commented
Status: Closed (works as designed) » Fixed
flashwebcenter’s picture

flashwebcenter
he/him
Primary language English
Location Austin TX
CreditAttribution: flashwebcenter at Flash Web Center, LLC for Flash Web Center, LLC commented
Status: Fixed » Closed (fixed)
ArAnManDapCel’s picture

ArAnManDapCel CreditAttribution: ArAnManDapCel commented

Is there a possibility to make the regions transparent?
I want to use a photo in the background (on page-wrapper level)

flashwebcenter’s picture

flashwebcenter
he/him
Primary language English
Location Austin TX
CreditAttribution: flashwebcenter at Flash Web Center, LLC for Flash Web Center, LLC commented

Hello @ArAnManDapCel,

I have created predefined color theme and pushed it to dev. https://www.drupal.org/project/d8w3css/releases/8.x-1.x-dev
Here is the demo for it. https://www.drupal8-w3css-theme.flashwebcenter.com/w3-css-theme-00029

Download dev and open this file w3-theme-00029.css. All the css you need is there after line 230
..../../d8w3css/css/w3-css-theme-custom/w3-theme-00029.css

Best of luck, Alaa

ArAnManDapCel’s picture

ArAnManDapCel CreditAttribution: ArAnManDapCel commented

Hi Alaa,

Great. Works like a charme.

Thanks for the quick response.