1. Oliver
  2. Sherlock Holmes The Voice
  3. Commercial Templates
  4. Tuesday, 23 April 2019
  5.  Subscribe via email
Hello Ciaran,

on Everly template you have several examples where the header_row is transparent, as long as you do not scroll down (Desktop view, not mobile!).
If I set the header background-color option in the template parameters to something like rgba(255, 255, 255, 0.5) I have transparency the whole time.

In your source code (e.g. in Example 3) you have this statement as inline CSS on line 326:


@media only screen and (min-width: 768px) {
.header_row, .header_top {
background-color: transparent;
}
}


I put this statement to my custom.css.
But it does not work.
If I set it to

background-color: transparent !important;

instead of

background-color: transparent;

I have transparency the whole time (again) ....

So for me it seems, you have written this @media css somewhere in the code of the page?

I tried the following solution:
I added it to Custom Code in the template configuration with a style tag around it.
But not only the part above with the background-color: transparent but the whole part of the css I found in your source-code of example-3:


<style>
@media only screen and (min-width: 768px) {
#container_header,
.sticky-wrapper {
position: absolute;
}
.header_row, .header_top {
background-color: transparent;
}
.layerslideshow698 .info {
opacity: 0;
transition: opacity .5s;
}
}
</style>


Now it works as I want it.
If needed, I can set transparent to something like rgba().
Maybe there is a better solutions so please feel free to correct me.

I have written this, because I think it may help others too.

Regards
Oliver
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Oliver

Would you have a URL to an example of this issue?

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 1
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran,

its not really an issue, sorry for choosing it.

I only wanted to have the same effekt as on your demo page and I did not find out how to configure it (maybe there is a way but I am blind?).

So I checked the code in your example page and I found this CSS code

"@media only screen and (min-width: 768px) {..... " and so on...
that I explained above.

This code was not in my sourcecode of the template installation so I thought of how to implement it in a template-updateable way ;)
In custom.css it does not work, so I wrote it in the custom code passage of the template configuration. And to not have the effect on other pages than the startpage I copied the template and used the code only on startpage.
The page I used this solution is here: http://neu.mein-wenningstedt.de/
The page is still under development....

Regards
  1. more than a month ago
  2. Commercial Templates
  3. # 2
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Oliver

Thank you for detailing.

In your layer slideshow module, you will find an option in the General Setting tab titled Overlap Header if in showcase-1# module position. Setting this option to Yes should also give you the desired result.

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 3
Accepted Answer Pending Moderation
0
Votes
Undo
Oh man, sometimes it's so easy :)

Thanks a lot!

Oliver
  1. more than a month ago
  2. Commercial Templates
  3. # 4
  • Page :
  • 1


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