How do I make the header transparent 1.7.6.8

[ZORANVEDEK]

I have tried everything I can think of,  and honestly it shouldn't be this difficult,  but anyway,  after spending 4 hours trying to  figure out how to  add a background image.  I have come to  the conclusion that I also  need to  make the header transparent(see attached image).

...also  I would like to  move the search  bar as I think  it's pushing my logo  to  the left(it should be centered),  but I can't figure out how to do that either.  In fact, getting it completely off the header section would be nice,  but I don't want it to  just  disappear,  just  be in a different place so it's not pushing my logo  over.  

[ZORANVEDEK]

I have tried adding the following to  custom.css:

 

#header {
background-color: rgba(0, 0, 0, 0); !important;
}

...I have also tried hunting down  every  instance of of every item in the header in themes.css,  and changing their back ground colors.  I even  switched them  all  to  blue,  it still  shows up as white,  but if I hover over it in Goggle developer,  it shows the inserted colors are there(it shows my changes in the code,  but not on the page displayed), so  I am obviously missing something some where. Something is either being inherited, or there's a div everything is nested inside of that  I am missing somewhere.  Any help  would be greatly appreciated.  Honestly I can't fathom  what  else to change or where else to  look. 

[solsol69]

hi

May be 

    background: rgb(255 255 255 / 0%);

 

[ZORANVEDEK]

20 minutes ago, solsol69 said:

hi

May be 

    background: rgb(255 255 255 / 0%);

 

Thanks,  but it's not working, something else is controlling the background color on the header.  It's color is actually a medium grey(7a7a7a),  with a background of #fff(white)...

...but changing either one of those has no effect on its color.  It remains white,  so it has to either be inheriting its color from  somewhere else, or there is another element in the mix that has a higher index and is actually showing the color,  but I can't figure out what it is.  As near as I can tell  though, it is not in the themes.css file(I could be wrong here),  because I have literally changed everything in that  area that  has a background color of white to blue(#00f),  and nothing in that area shows up as blue.  There is something I am missing,  and I'm at a loss as to  what it is. 

Edited November 17, 2020 by ZORANVEDEK (see edit history)

[solsol69]

try custom.css and clear your cache

[solsol69]

or whith this module

 

[ZORANVEDEK]

Just now, solsol69 said:

try custom.css and clear your cache

Done and done,  repeatedly over the last two days.  Again,  I'm open  to  any  ideas,  but I think  I've tried most of the obvious solutions. That  top  area will  not go  transparent no matter what I do,  and it's starting to  become a very real problem.  Honestly, it should be as simple as adding "transparent" to  the right div,  but that  is simply not working...

...like I said before, I tried changing all of the divs in that  area to blue,  and nothing showed up  blue.  So  that tells me,  there is something else controlling that,  but I'm clueless as to  what it is. 

[solsol69]

Le 16/11/2020 à 12:45 PM, ZORANVEDEK a dit :

how to  add a background image. 

maybe

#header {
    /* background: #fff0; */
    background-image: url(https://defiant-soup.demo.prestashop.com/modules/ps_imageslider/images/sample-3.jpg);
   
}

[ZORANVEDEK]

Okay, it can not be in the themes.css,  at all.  I just  did a blanket find and replace,  every  single white background in the entire file is now transparent,  and I still  have a white header. 

[ZORANVEDEK]

Okay, went back  to  the original  style themes.css style,  and deleted everything in it,  no  style at all except from  the custom.css,  and yup it's still  white....

...here are some screen shots,  note that the colors specified are not the colors you are seeing on  the first two,  and on the last one there is absolutely no  styling happening at all,  and that  thing is still  white:





What  else controls the color in that area? Where should I start looking?

[solsol69]

in your last test what code did you use ?

il y a 11 minutes, ZORANVEDEK a dit :

What  else controls the color in that area? Where should I start looking?

<div class="header-top">

[ZORANVEDEK]

3 minutes ago, solsol69 said:

in your last test what code did you use ?

<div class="header-top">

In what  file? It  can't be in theme.css.  I just  removed everything from  that file (like saved it as a blank  file, cleared cache,  refreshed page)and it remains white.

I have literally changed every  background color in the file, and that area remains white.  It  is not coming from  the theme.css file. 

It has to be coming from  somewhere else. 

[ZORANVEDEK]

Okay  another test  and fail...

Opened up  header.tpl,  and added:

style="background-color;transparent !important"

...to  every  single div,  no effect,  header remains white.  

In a way I'm kind of glad that it didn't work  because I would feel bad using a dirty workaround like that  without hunting down the actual  source of the problem,  but I would have rolled with  it anyway.  

[ZORANVEDEK]

Okay.  I've been testing this for the last  hour with a completely blank theme.css file...

The custom.css file shows the fixed background image,  but has no effect what-so-ever on the white background in the header area.  I did get it to change some of the divs to  blue, but there's no consistency to it--using the exact same code a second time may-or-may-not effect the change, at least I haven't noticed a pattern.  I am still convinced that  the problem comes in from outside of the style sheet.

You can clearly see here that my styles are empty,  yet that area is still  white,  even  though all  the other white divs are now transparent.  





I know I can't be the first  person  to  want to make that  area white,  and I swear it shouldn't be this hard.  I feel like I'm over looking something incredibly obvious here, but I can't figure it out,  and I've been all  day trying to  simply get that  area to  show the background image beneath it. 

What  am I missing here?


 

[ZORANVEDEK]

5 hours ago, solsol69 said:

in your last test what code did you use ?

<div class="header-top">

Just saw this--missed it earlier.  I have been using CSS for the most part(but a little html here and there).  I have tried rgba color codes, background-color;transparent, and honestly just  about anything I can think of to  make that area not be white. I can  hack a photo into  the area using header.tpl,  by wrapping a div around all of the divs between the blocks,  and adding a photo,  but putting a transparent png in there still  shows the underlying white area.  I did manage to change colors of various divs within that area a few times--though that is inconsistent--I think  mainly due to  swapping for mobile as I change the page size. 

The thing is,  without any  styling at all, it's still white, and that's what gets  me. I think I may have toggled half the divs to transparent multiple times throughout the day,  but it doesn't appear that way  because something else exists there,  and I don't know what.  Which  was my main reason  for stripping all of the styling,  because I wanted to  see if that  made it go away, it didn't,  but every other div on the page did. 

If I knew where to go  to  change that  underlying white area to transparent, I could then  start  hunting down  all of the other divs in that area(and there are more than  a couple),  and switching them one by one,  but until  that underlying white area is gone it's an exercise in futility because there's no  visual  feedback  for what  I'm doing. 

...and thanks for the suggestions,  I'm at my wit's end here. 

Edited November 18, 2020 by ZORANVEDEK
spelling and make information more clear (see edit history)

[ZORANVEDEK]

I never did find a way  to  make the header transparent, but I did come up  with a workaround. 

 

I wrapped the entire contents of the header.tpl  file in a div,  and used the same image as I used for the main background, and then I made both of them  static.  It's still not transparent,  but for all practical  purposes the visual effect is the same. 

In case anyone needs this is the future:
 

...in custom.css

#wrapper {
 background-image:url(whatever_image_you_got.jpg);
   background-repeat:no-repeat;
   background-position:right top;
   background-size:cover;
   background-attachment:fixed
}

...and then in a the div that surrounds everything in  header.tpl 
 

<div style="background-image:url(same_image_as_you used_the_first_time.jpg);
                 background-repeat:no-repeat;
                 background-position:right top;
                 background-size:cover;
                 background-attachment:fixed">  


</div>   

 

...this solved the problem,  and I probably would have thought of it sooner,  but I was I too headstrong on making everything transparent as opposed to actually achieving the visual effect. 

This was much  simpler,  and a whole lot less headache. 

Edited November 19, 2020 by ZORANVEDEK
Punctuation, spelling and clarity..... (see edit history)