Recent
Categories
View Replies (5)

Changing Black Background Header on Ensley Template to Semi-Transparent and Fixed

  1. Issue
0
Votes
Undo
  1. smithjd44
    smithjd44
  2. Sherlock Holmes
  3. Commercial Templates
  4. Sunday, 13 December 2020
  5.  Subscribe via email
I recently had requested some coding for the Everly template where you helped me add red underlining on some modules.

You also gave me css coding to set the default position of the header.

My client has requested to change to a wide template with a full width slideshow along with 100% wide module positions.

You can see what I have so far at the link http://tempdomain51.site .

I have attached a graphic illustration for the homepage below of what they sent me originally before they wanted me to change to a full width design.

I am now attempting to change to the Ensley template but when you scroll down the header goes completely black and the logo shrinks.

They would like the default position be a semi-transparent header as was in the Everly template and without the logo shrinking and not go black.

I don't know if that is possible or not.

The other request was to have pipe symbols as dividers between the menu items.

The last thing would be how to eliminate the blue vertical bars on the left of the Module headings.

I had everything working well with the Everly template but I am hopeful I can change over to the Ensley template.

Again, I really appreciate your coding talents with all of your templates!

James
Attachments (1)
website-homepage.PNG website-homepage.PNG
References
  1. http://tempdomain51.site
Responses (5)
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi James

To amend try adding the following to the Custom CSS field of your templates parameters (Extensions -> Templates -> [YourTemplateStyle] -> Custom CSS)....#

Edit to taste

.is-sticky .logo {

    padding: 25px 40px;

}

.is-sticky .logo img {

    max-width: 100%;

}

.is-sticky .header_main {

    background-color: rgba(0,0,0,.75);

}


To remove the blue bar on module headers you can also add the following...

.module .module_header::after,

.module_menu .module_header::after {

    display: none;

}


Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 1
smithjd44
smithjd44
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
The coding is very close. My client would like the default to be the slightly opaque header rather than transparent. Once you begin to scroll the header does become opaque. Any way to make that the default?

My technique of adding the red bar was probably not good as when you go to mobile view portrait, the red bar separates from the footer.

I don't know if there is any coding that would correct the issue for the mobile view portrait. The landscape view seems to working correctly with the red bar.

If there is some coding that would generate the red bar that would be great. I am using a module position with a red png graphic.

The only other thing that I mentioned in my last post was to add the pipe ( | ) as a separator between the top menu items.

I have attached three screen shots to reflect the above.

As always I really appreciate all of the coding you are providing.

James
Attachments (3)
desktop-view-scroll-down-slightly.PNG desktop-view-scroll-down-slightly.PNG
mobile-phone-view-portrait.PNG mobile-phone-view-portrait.PNG
mobile-phone-view-landscape.PNG mobile-phone-view-landscape.PNG
References
  1. http://tempdomain51.site
  1. more than a month ago
  2. Commercial Templates
  3. # 2
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi James

For the header try also adding the following...

#header_main {

    background: rgba(0,0,0,.50);

}


Try replacing your module header CSS with the following (edit to taste)...

.top-2 .module_header {

    text-decoration: underline 5px red;

    padding-bottom: 10px;

}


And for the menu you can also add the following...

.hornav .menu > li + li {

    border-left: 2px solid white;

}

.hornav > ul > li > a {

    padding: 5px 0 5px 20px;

}


Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 3
smithjd44
smithjd44
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you for all of the Custom CSS coding for the Ensley template!!!

I was able to reduce the logo margin using similar coding that you have previously shared.

I believe everything I have requested you have provided a solution.

I hate to continue with requests for this template but I have found another issue.

I was successful in generating the red bar above the footer using a Module Override.

However when you view the homepage on a smart phone in the portrait position, the red bar disappears.

This is better than what it was doing when I created a red bar with a graphic where the red bar separated from the footer leaving a white space.

When you turn a smart phone in the landscape position the red bar appears.

Would you have CSS coding that would leave the red bar in position when viewed by a smart phone in portrait mode?

I hope all of your Custom CSS work is helpful for others.

Thanks again! James
Attachments (2)
smart-phone-landscape.PNG smart-phone-landscape.PNG
smart-phone-portrait.PNG smart-phone-portrait.PNG
References
  1. http://tempdomain51.site
  1. more than a month ago
  2. Commercial Templates
  3. # 4
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi James

Happy to help. To amend try adding the following to the Custom CSS field of your templates parameters (Extensions -> Templates -> [YourTemplateStyle] -> Custom CSS)....

.top-3a .module_surround {

    min-height: 40px;

}


Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 5
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!