Material Theme question

Hello again John and William,

Okay, I finally got around to trying out the various code changes that you two suggested..

First, John, thank you for the CSS code to change the length of the Sign-Up form. It worked perfectly, and now there is no longer any need to scroll in order to see the bottom portion of the form. That was very annoying, at least to me.

William, thank you for the instructions on removing line #9 from my cloned theme's HTML code. It also worked perfectly. Although I am a bit confused regarding your instructions. In your May 1st post, you said to delete line #9 completely from my theme's HTML. This is exactly what I did, and it worked. I totally removed this line:

<code> <div class="landing-background row_image"></div>  </code>

But then, on May 2nd, you seem to be saying to leave the line there, and only delete the "row_image". Or am I misunderstanding something here?

Other than that question, the only remaining problem is adding my own background color to the landing page, after removing the background image, as per above.

I tried the original code that you provided in your May 1st response to Naresh. In other words, I added this CSS code to my cloned theme's "MAIN CONTENT" field in the "Homepage" section:

<code> body{background-color:black;} </code>

This did NOT work with my cloned Material theme. Instead, it overlaid my current login page banner with the actual raw CSS code. Nothing more. Please note that in all cases, I am both clearing the cache, and rebuilding the theme.

Using an app called "Color Picker" I discovered that after removing the background image, the background color is E5EAEF. As it turns out, this is in fact the default background color for all pages in the Material theme. However, I could not find that color code upon searching in both the CSS and HTML sections of my theme. So, I assumed that the home page background color is determined somewhere else.

But then I noticed that on May 2nd you offered an alternative method for changing the background color. That is, by going in to ...

PF.Site/flavors/materialclone/flavor/bootstrap.css

... and editing this line:

<code> background: rgba(0, 0, 0, 0.7); </code>

However, what I discovered is that when I try to edit that line, as you suggested, after I clear the cache and rebuild the theme, the line has reverted back to the original code as seen above. My edit is not being saved.

So I was left with a new problem. On the home page screen, in the Material theme, the copyright and other info in the footer is white. That makes it just about invisible against the E5EAEF background color.

So, I looked around some more in PF.Site/flavors/materialclone/flavor/bootstrap.css, and I found this code, and I copied it into the my cloned theme's CSS section, and I changed the color from #FFF to #784A1, so that it is the same as on all other pages:

<code>
body#page_core_index-visitor #section-footer .footer-holder {
  border-top-color: rgba(255, 255, 255, 0.2);
}
body#page_core_index-visitor #section-footer .footer-holder .copyright {
  color:rgb(103,132,161);
}
body#page_core_index-visitor #section-footer .footer-holder .copyright a {
  color:rgb(103,132,161);
}
body#page_core_index-visitor #section-footer .footer-holder .footer-menu li:before {
  background-color:rgb(103,132,161);
}
body#page_core_index-visitor #section-footer .footer-holder .footer-menu li a {
  color:rgb(103,132,161);
  -webkit-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  transition: all 300ms ease;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
body#page_core_index-visitor #section-footer .footer-holder .footer-menu li a:hover {
  border-bottom-color:rgb(103,132,161);
}
</code>

Until someone figures out a sure-fire way to alter the background color on the landing page, and make it stick, I guess changing the footer text color is all I can do.

John, or William, can John's code seen below be altered to change the background color on the landing page?:

<code>

body#page_core_index-visitor .landing-background {

    background-image: none !important;

}

body#page_core_index-visitor .layout-main .welcome-bg-image {

    background-image: none !important;

}
</code>

Wow...that was a lot.  Just send  (Private Message) me the url link of the image on your server (big square image so less stretch and enlarging) that you want for the background and what color you want the footer background and the color for the font on the footer...or if your image is darker near the bottom you could keep the white font...up to you dude (wow 55 and I said dude)

John, I don' t know if that response was to me, or to Naresh. At any rate, I do NOT want a background image, which is why I removed it using William's suggestion above. My rotating landing page images are fine. I also already changed the font color of the copyright and other text in the footer of the landing page, as I explained above. My only problem is that I can't figure out how to change the background color of the landing page, because William's suggestion in the bootstrap.css file does not work for me. As I said above, once I close the file, clear the cache, and rebuild the theme, any change I make in that file is lost.

Oh, BTW, not only are you 55 and using the word "Dude", but you are also referring to a 67.5 year old guy as a dude as well. :)

I misunderstood you....can you take an image of your homepage and use an arrow and point to the area and color you want to change..and to what if any.  Private message the image and I will look at it tomorrow.

John, it is the background color for the entire page. In fact, as I stated above, it is apparently the default page background color for the Material theme for the home page -- where the main news feed is located -- all pages, all group pages, and maybe more. It is the color E5EAEF, which is a light bluish-gray color. However, I only want to change the background color of the LANDING PAGE, and NOT for all pages on the site.

Try to add this line back where I think you said you removed a few post above.

<div class="landing-background row_image"></div> 

then add this CSS to the css editor.

body#page_core_index-visitor .landing-background::after {     background: #ffffff; }

Thanks John! That worked great! Now, instead of a solid color background, I am trying to figure out how to use a gradient for my background, namely an imageless gradient background, being as that will load faster in web browsers. I have tried a few different CSS blocks, but thus far, it is not being recognized. I am trying to implement a gradient that will go from #000000 at the top, to #0000ff at the bottom. Any ideas? This would just be for the landing page, although if I can get it to work properly, I may decide to implement it globally as well.

Maybe...never done it though :)

https://www.w3schools.com/css/css3_gradients.asp (near the bottom called "Using Transparency" looks very interesting if you did it vertically.

https://css-tricks.com/css3-gradients/

Ha! I beat you to the punch. I was already on that exact W3 Schools page. I will let you know if I can figure it out. I was trying something more complicated than what they show. Maybe a simpler code will work.

Ha! I got it! This code will work:

/* This code adds background gradient on landing page */

body#page_core_index-visitor .landing-background::after {

  background-image: linear-gradient(black, blue);
}

I just tried it in Safari, Firefox and Opera on my iMac running the latest version of Big Sur, and it works in all three.

I would appreciate if anyone running Windows, Linux, etc., would visit my home page at https://www.csnet.live on your desktop or laptop computer, and let me know if you see the black to blue gradient background. Thanks!

Works on Edge, Firefox, and Chrome on PC.

Thanks for letting me know John. Much appreciated. I am not familiar with Edge, although I have heard of it. Is that a replacement for Microsoft's Internet Explorer, which I recently read is being discontinued?

Yes, it has been out for several years now :)

It just goes to show how much I know about Windows machines. :P

It just goes to show how much I know about Windows machines. :P