Putting multiple images as the cover photo

dipanjan94

1. In my website https://www.dipanjanpal.com/ I have a cover photo of this woman wearing a red jacket taking a picture of some icebergs. However, it is just one photo. Is it possible to have multiple photos in there, so that they will show one by one if a user stays on the homepage?

2. Is there a way to have a black background (and white text colour) of the header of my website (My name and the menu items) on all the pages except my homepage? If yes, then how?

Hikin' Mike

@dipanjan94 said:
1. In my website https://www.dipanjanpal.com/ I have a cover photo of this woman wearing a red jacket taking a picture of some icebergs. However, it is just one photo. Is it possible to have multiple photos in there, so that they will show one by one if a user stays on the homepage?

Use a slideshow instead.

2. Is there a way to have a black background (and white text colour) of the header of my website (My name and the menu items) on all the pages except my homepage? If yes, then how?

Currently your theme's header is set to black with 100% opacity (transparent). Set your header background to solid and add this to your Theme's Site-wide Custom CSS section:

.sm-user-ui .sm-page-home .sm-page-content > .sm-page-layout > .sm-page-layout-region-header {
  background-color: #000000;
  background-color: rgba(0,0,0, 0);
}

.sm-user-ui .sm-page-widget-logo-text,
.sm-user-ui .sm-page-widget-nav-color-emphasized a,
.sm-user-ui .sm-page-widget-nav-color-emphasized a:visited {color: white;}

dipanjan94

Use a slideshow instead.

I tried this but there were lots of white parts on the sides of my pictures. Is there a way to fill width for a slideshow using css?

For the second answer, it worked just fine except one thing. My default sub-menu text colours have turned white, and I want them to turn black. Could you fix it for me?

dipanjan94

Also, another thing. I just added a slideshow and then removed it, which messed up my previous design a little.
If I view my website in the mobile, the first image has white padding on all four sides that I want to remove. How can I do this?

Hikin' Mike

@dipanjan94 said:
For the second answer, it worked just fine except one thing. My default sub-menu text colours have turned white, and I want them to turn black. Could you fix it for me?

.sm-user-ui .sm-page-home .sm-page-content > .sm-page-layout > .sm-page-layout-region-header {
  background-color: transparent;
  background-color: rgba(0,0,0, 0);
}

.sm-user-ui .sm-page-content > .sm-page-layout > .sm-page-layout-region-header {
  background-color: #000000;
  background-color: rgba(0,0,0, 1);
}

.sm-user-ui .sm-page-widget-logo-text,
.sm-user-ui .sm-page-widget-nav-toplink > a,
.sm-user-ui .sm-page-widget-nav-toplink > a:visited {color:white;}

Hikin' Mike

@dipanjan94 said:
I tried this but there were lots of white parts on the sides of my pictures. Is there a way to fill width for a slideshow using css?

Remove the margins in the "Dimensions" section (the triangle icon). Other than that, I'll have to see it.

dipanjan94

Hi Mike, thank you for this. For now, I have decided to keep the slideshow on a hold and go on with my current design.

Could you tell me how I can remove the margins of the header photo in my mobile? By header photo, I mean the very first photo that appears when you open my website. I want it stretched from edge to edge in mobile.

Hikin' Mike

@dipanjan94 said:
Could you tell me how I can remove the margins of the header photo in my mobile? By header photo, I mean the very first photo that appears when you open my website. I want it stretched from edge to edge in mobile.

@media (max-width: 736px) {
  .sm-user-ui .sm-page-widget-28110298 .sm-page-widget-content {
    margin: 0 !important;
    padding: 0 !important;
  }
}

dipanjan94

Thank you so much. From your replies, I have a fair understand of the code, but I could not seem to find the 8 digit widget number in the source code. Is there any trick to it?

Also, for this fixed width page https://www.dipanjanpal.com/Blog is it possible to make the cover image stretchy, potentially stretching it behind the header of my website, kinda like this - https://www.zizka.ca/blog ? I know Paul Zizka's site is in squarespace but I like the look of the blog (Except the text on images), and I was wondering if something similar could be done in Smugmug.

Hikin' Mike

@dipanjan94 said:
Thank you so much. From your replies, I have a fair understand of the code, but I could not seem to find the 8 digit widget number in the source code. Is there any trick to it?

Use the "Inspect Element" tool from any browser (I use Firefox). This is my SmugMug home page and you can see the widget number in "circled" red:

Also, for this fixed width page https://www.dipanjanpal.com/Blog is it possible to make the cover image stretchy, potentially stretching it behind the header of my website, kinda like this - https://www.zizka.ca/blog ? I know Paul Zizka's site is in squarespace but I like the look of the blog (Except the text on images), and I was wondering if something similar could be done in Smugmug.

EDITED.

CSS for that page:

.sm-user-ui .sm-page-node-qmXX6x .sm-page-content > .sm-page-layout > .sm-page-layout-region-header {
  position: absolute;
  z-index: 1;
  width: 100%;
}

.sm-user-ui .sm-page-node-qmXX6x h1,
.sm-user-ui .sm-page-node-qmXX6x .sm-page-widget-nav-toplink > a {color: #fff;}

.sm-user-ui .sm-page-node-qmXX6x .sm-page-widget-nav-toplink > a:hover {color: #26b0fc;}

.sm-user-ui .sm-page-node-qmXX6x .sm-page-layout {max-width: 100% !important;}

.sm-user-ui .sm-page-node-qmXX6x .sm-page-layout-row[data-layout-row="J"],
.sm-user-ui .sm-page-node-qmXX6x .sm-page-layout-row[data-layout-row="d"] {
  margin: auto;
  max-width: 1600px;
}

You will have to set your default margins from 12px to 0 after.

dipanjan94

Use the "Inspect Element" tool from any browser (I use Firefox). This is my SmugMug home page and you can see the widget number in "circled" red:

Thank you so much. I was able to find it.

For the CSS, it worked fine. Just one final thing remaining, I want to make the font colour of menu items white in my mobile menu (hamburger menu) for the same page https://www.dipanjanpal.com/Blog
How can I do that?

dipanjan94

Actually, I have found a way around that, no need to change the font colour. Thank you so much for your help anyway! You're a saviour.