develop this new layout for products pages

[devopstoday11]

We did new background with new colors and layout for products related pages. I will record video and mention requirements in it.
We need this by tomorrow afternoon, if possible today itself, please. (IST time zone).

[tfsojon]

Video link not attached!

[devopstoday11]

@tfsojon
here is the video link,
https://www.loom.com/share/174e0feb553843378a2f241ca9e50146

[devopstoday11]

@tfsojon
watch this as well please
https://www.loom.com/share/ddbd29cef9084b488a2534d26ad5f1fa

[devopstoday11]

@tfsojon , any updates?

[tfsojon]

Working on it. hope deliver you the first task within 30min.

[devopstoday11]

sounds good. thank you.
please do PR to chandu branch only. I want to check changes in my local and add all our content and extra pages.

[tfsojon]

Pages are created. PR - #57
But in the header-menu we can not make options for text-colors.
Because hugo only provide 2 extra params in menu. which I used for icon and subtitle.
So I have to keep the black color for now.
But, When you are ready to publish then I can change the color with CSS child selector.

Please NOTE: We are going on vacation today (Mar 14) and will be back to Office on Saturday. Hopefully the remaining task will be done by Saturday or Sunday

[tfsojon]

The menu

The Content

[devopstoday11]

@tfsojon ,
so what you have finished for now is adding the products pages, correct?
working on header menu thing is still pending which will be done on Saturday or Sunday, right?

[tfsojon]

Yes!

[devopstoday11]

@tfsojon
Banner size and look & feel is not looking same as I shown in the video. Please fix it.

The design I showed you in the video is taken from this site - superops.ai

[devopstoday11]

@tfsojon
Also, you missed the pages for "Open Source"

[tfsojon]

If possible. Please provide the design file to me.

[devopstoday11]

I don't have it now. our designer is off today.
you can check the superops.ai website. he copied the design from that site. there is no difference at all. @tfsojon

[tfsojon]

On the video it's look like full-width with maybe 40px gap each side.
But on the side the background size is centered.
What should I follow?
Also header-background is white there. do you want white bg also?

[devopstoday11]

@tfsojon
I responded here with this video based on what I understood.
https://www.loom.com/share/e3a0c2bfc68a4b60b734a985295b4c1d

[tfsojon]

@devopstoday11

updated platform & open-source header

You can update the top-bottom gap by changing the padding value and the width value from here.

[devopstoday11]

@tfsojon please submit PR so that I can test

[tfsojon]

already submitted #59

[devopstoday11]

@tfsojon
here are the references for the header bars (primary header bar and secondary header bar). I remember you asking about a reference.
Both these sites are references,
https://www.sage.com/en-gb/
https://betterstack.com/

explained in the video,
https://www.loom.com/share/2ce2483d3133486bb7a6ec844b96b5ea

[devopstoday11]

@tfsojon
another modification explained. please get this also done soon.
https://www.loom.com/share/3203382917ef49b599cd0a31cdfd1ffd

[devopstoday11]

@tfsojon , mentioned two videos above to work on. please check them.

[devopstoday11]

@tfsojon , update on the above tasks?

[tfsojon]

Will start work on today!

[devopstoday11]

@tfsojon, any updates?

[tfsojon]

@tfsojon, any updates?

Started working yesterday. Hopefully the update will come soon today.

[tfsojon]

here is the PR of last two videos - #67

• Added Secondary header with brand-logo w link and platform/open-source logo

• Updated content and image width you mentioned in first video

• The footer area call-to-action position updated.

• Secondary navigation content you can update from each platform or open-source page.
  

[devopstoday11]

@tfsojon
It looks like you missed working on Open Source pages. For the pages under "Open Source" the content alignment still has an old look & feel. Update for those pages as well.
Also, for pages under Platform & Open Source, I think the content area alignment can be improved slightly more. Can you please send screenshots of which files I need to modify if I want to play with content area alignment myself?

[devopstoday11]

@tfsojon, need this urgent fix. Main branch is failing on both netlify and local.

When I merged your PR67 to my chandu branch and tested in local , all worked.
After merging chandu branch to main branch and when I did "hugo server" command, site is not getting built. I tried locally and also directly on github (netlify build also failed).

Here is the error I got in local

$ hugo server
Start building sites … 
hugo v0.109.0-47b12b83e636224e5e601813ff3e6790c191e371+extended windows/amd64 BuildDate=2022-12-23T10:38:11Z VendorInfo=gohugoio
ERROR 2023/04/02 14:28:28 render of "page" failed: "C:\Users\devops\OneDrive - intelops\Documents\GitHub\website\themes\delta\layouts\author\single.html:11:18": execute of template failed: template: author/single.html:11:18: executing "main" at <$img.Fill>: nil pointer evaluating resource.Resource.Fill
Error: Error building site: failed to render pages: render of "page" failed: "C:\Users\devops\OneDrive - intelops\Documents\GitHub\website\themes\delta\layouts\author\single.html:11:18": execute of template failed: template: author/single.html:11:18: executing "main" at <$img.Fill>: nil pointer evaluating resource.Resource.Fill
Built in 493 ms

Here is the error log from netlify

2:22:35 PM: Start building sites …
2:22:35 PM: hugo v0.85.0-724D5DB5+extended linux/amd64 BuildDate=2021-07-05T10:46:28Z VendorInfo=gohugoio
2:22:38 PM: ERROR 2023/04/02 19:22:38 render of "page" failed: "/opt/build/repo/themes/delta/layouts/author/single.html:11:18": execute of template failed: template: author/single.html:11:18: executing "main" at <$img.Fill>: nil pointer evaluating resource.Resource.Fill
2:22:38 PM: Error: Error building site: failed to render pages: render of "page" failed: "/opt/build/repo/themes/delta/layouts/author/single.html:11:18": execute of template failed: template: author/single.html:11:18: executing "main" at <$img.Fill>: nil pointer evaluating resource.Resource.Fill

I did compare main and chandu branches on github. No difference.

Note:-

By the way, can I delete .forestry folder since we are not using Forestry anymore? can you delete it and test if it is causing any issues after deleting this folder, please. This is separate topic from above mentioned main branch issue.

[devopstoday11]

@tfsojon , when I retest chandu branch in my local, it is also failing. Now I am not able to build the site to see any of my changes. Please fix the issue.

chandu branch error in my local laptop:-

$ hugo server
Start building sites … 
hugo v0.109.0-47b12b83e636224e5e601813ff3e6790c191e371+extended windows/amd64 BuildDate=2022-12-23T10:38:11Z VendorInfo=gohugoio
ERROR 2023/04/02 14:59:52 render of "page" failed: "C:\Users\devops\OneDrive - intelops\Documents\GitHub\website\themes\delta\layouts\author\single.html:11:18": execute of template failed: template: author/single.html:11:18: executing "main" at <$img.Fill>: nil pointer evaluating resource.Resource.Fill
Error: Error building site: failed to render pages: render of "page" failed: "C:\Users\devops\OneDrive - intelops\Documents\GitHub\website\themes\delta\layouts\author\single.html:11:18": execute of template failed: template: author/single.html:11:18: executing "main" at <$img.Fill>: nil pointer evaluating resource.Resource.Fill
Built in 506 ms

while fixing this issue, please take chandu branch and work on that one and submit PR. @tfsojon

[tfsojon]

@devopstoday11 fix image-issue, updated header style && open-source page #69

[devopstoday11]

@tfsojon , where can I change the header bar color if I want to play with it?

[devopstoday11]

@tfsojon
how to remove the background for the images in the content area?
we want to remove the square box background behind the images, how can I do it?

[devopstoday11]

@tfsojon , we need functionality to add the call-to-action section (row) wherever we want. please develop it.
I am showing the reference in this screenshot with red pointed arrows.

[devopstoday11]

@tfsojon , This is how the new Compage product page looks like with finalized new images and the alignment spaces between images and text. How to achieve this kind of look and feel ? (I am not talking about font style or colors, I am mainly asking about alignment, look & feel, spacing, images properly getting rendered, etc.)
Also, if you observe, some of the rows in the screenshot in the content area have different background colors; how to set a different color for each row?

screenshot1 (little bit more zoomed in screenshot than screenshot2)

screenshot2

[devopstoday11]

@tfsojon , please make the dropdown look neat and clean (wherever we have dropdowns, all those dropdowns should look like this) as shown in the screenshot.
Items you see in this screenshot in the dropdown items are our projects' names and their finalized logos icons. We want to use them on the website, especially in the dropdown.
Please make it work. If you have already added the functionality, please guide me on how to use it.

[devopstoday11]

@tfsojon , I added many items above; please work on them all.

[tfsojon]

@tfsojon how to remove the background for the images in the content area? we want to remove the square box background behind the images, how can I do it?

Removed background-color from /layouts/platform/single.html

[tfsojon]

@devopstoday11 You can not place this anywhere in between loop content. like your example, that is not possible in hugo.
I need the design file to develop that call-to-action.

@tfsojon , we need functionality to add the call-to-action section (row) wherever we want. please develop it. I am showing the reference in this screenshot with red pointed arrows.

[tfsojon]

@devopstoday11

you can change the content-postition by changing the content_position value

---

you can set bg_color true or false for the section and color will apply based on banner bg_color.

@tfsojon , This is how the new Compage product page looks like with finalized new images and the alignment spaces between images and text. How to achieve this kind of look and feel ? (I am not talking about font style or colors, I am mainly asking about alignment, look & feel, spacing, images properly getting rendered, etc.) Also, if you observe, some of the rows in the screenshot in the content area have different background colors; how to set a different color for each row?

screenshot1 (little bit more zoomed in screenshot than screenshot2)

[tfsojon]

@devopstoday11 As I previously said about hugo, in this #56 (comment)
Hugo does not support multi-level menu. what I did is a small tweak.
You can change and update your menus from menus.en.toml

I updated the menu to look little more better

@tfsojon , please make the dropdown look neat and clean (wherever we have dropdowns, all those dropdowns should look like this) as shown in the screenshot. Items you see in this screenshot in the dropdown items are our projects' names and their finalized logos icons. We want to use them on the website, especially in the dropdown. Please make it work. If you have already added the functionality, please guide me on how to use it.

[devopstoday11]

@tfsojon , how can I change header bar color and text color inside the header bar? I want to play with few colors for header bar and it's text.

[tfsojon]

@tfsojon , how can I change header bar color and text color inside the header bar? I want to play with few colors for header bar and it's text.

[devopstoday11]

@tfsojon , how can I change header bar color and text color inside the header bar? I want to play with few colors for header bar and it's text.

@tfsojon, thanks for those screenshots.
I tried playing. I am able to change both primary and secondary header bar colors and also all texts color in the menus.
But I was not able to figure out where to change text color which is next to the logos for the secondary header bar for platforms (compage, capten, opty) and for items in the Open Source. How to change those texts color too?

---

Also, when I changed logos (light to dark OR dark to light) in the params.toml file on line 11

logo = "images/logos/logo-light.svg"

all the logos (in the primary header bar and in footer area) are changing. I have two logo files in the assets (logo-light.svg and logo-dark.svg). I want to be able to use different logo files in different areas. How can I? @tfsojon

[tfsojon]

change secondary header text color

change footer logo using footer_logo_dark = false/true

[devopstoday11]

@tfsojon , thanks for the above info. I was able to play with logos and names.
How can I change the menu items text colors to play with colors?

[devopstoday11]

@tfsojon , thanks for the above info. I was able to play with logos and names. How can I change the menu items text colors to play with colors?

@tfsojon , please respond to this query

[tfsojon]

You can find a .nav-menu-text class. change the color of the .nav-menu-text

[devopstoday11]

@tfsojon I meant I want to change the Hugo theme code or set the color in some configuration file, not by using inspect in the browser. How to change the Hugo code to give whatever color I want for the texts in both header bars independently?

[devopstoday11]

@tfsojon ,
this is where I changed. Is this the correct place? And is this the only place?