Change Header Background to image - Strange result

[Richey]

Hey guys,

I try to change the background of the header with the following code in the custom css:

header:first-of-type{
	background:url(http://www.my-website.com/themes/2/images/bg_header.jpg); 
  	height:250px
}

Now when I visit a forum, the background of the topic gets changed too. Even that I use the :first-of-type selector.

What am I doing wrong. Or is there a better way of changing the header background?
(In the style wizard I only can choose colors - no images).

Thanks for your support!

 

[Tom Christian]

Target the header you want specifically with its class name. Using pseudo selectors for something like this is unnecessary.

Edit - I see that the header doesn't have a class name in IPS4. You can use this to target it specifically -

#ipsLayout_header > header

 

[Richey]

Thank you Tom! Works

[AlFed]

Hi there,

Could you please help me with the header. I have luck of any other ideas.

I can see is source of the main page 

<style>
	#ipsLayout_header header {
	background-color: #3d5e78;
	background-image: url(http://www.spain4you.es/forum/uploads/monthly_2016_12/699329.jpg.716a4acadcfee74382d1192a0d378f0e.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover; I was trying to find those values in CSS and in Templates...nothing is found.

I've tried to change header in Global.css to something like

#ipsLayout_header 
#header {
    background-image: url('{resource="Untitled.jpg" app="core" location="global"}');
     background-size: cover;
    background-position: 50% 0%;
    background-repeat: no-repeat;
   }

I've tried to keep what I have now

#ipsLayout_header header {
    padding: 5px 0;
    background-color: {theme="header"};;
    padding-bottom: 40px;

I also tried to add to custom.css

@media screen and (min-width:980px){

    #ipsLayout_header header{
      background-image: url('{resource="Untitled.jpg" app="core" location="global"}');
      background-size: cover;
      background-position: 50% 0%;
      background-repeat: no-repeat;
    }

 

Any ideas on what can be wrong? Thanks very much!

[steve00]

Need to add your css to custom.css file ... do not make changes to any of the default ips css files (otherwise will cause major issues when upgrading to a newer version)

[AlFed]

Thanks, @steve00, I have done that, it doesn't change it, unfortunately. There were various updates earlier, but that "setting" is still there and I can't find where is that 😞 I've tried the search engine in CSS, yes 🙂

[steve00]

17 hours ago, AlFed said:

Thanks, @steve00, I have done that, it doesn't change it, unfortunately. There were various updates earlier, but that "setting" is still there and I can't find where is that 😞 I've tried the search engine in CSS, yes 🙂

link to view might help

[AlFed]

@steve00 https://www.spain4you.es

[steve00]

ok, for some reason it has been added to the globalTemplate

No idea why anyone would add it into the globalTemplate though

look for

<style>
  

and delete it

if you have not made any other changes to that template then click the revert button then adding the css you want to custom.css should work

[AlFed]

Thanks @steve00 I can't find it in global template unfortunately. Moreover, I installed another Theme and the same header colour appeared again. Looks like It is somewhere independent of theme... 😪😪

[Jennifer M]

Hey @AlFed @steve00 is correct, there is some manual style bits in your global template. I don't know how you uploaded the theme but it's still there. Particularly this bit:

<style>
#ipsLayout_header header {
  background-color: #3d5e78;
  background-image: url(http://www.spain4you.es/forum/uploads/monthly_2016_12/699329.jpg.716a4acadcfee74382d1192a0d378f0e.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  
}
</style>

Now, note that the image doesn't actually load for me at all but that's why your header color isn't changing.

To me it looks like someone copied the CSS and pasted it into a style code in your globalTemplate.

Your globalTemplate is the first thing that opens when you open the theme editor so look in that one.

[opentype]

Personally, I wouldn’t call uploaded files directly with the image URL from the uploads folder. That doesn’t count as an actual use in the system and the file might get deleted later. It is better to make it a theme resource and then call it like {resource= …}

Also, make sure to not call http images, since your site is using https. At the moment, the page tries to load an http image, which by the way doesn’t even exist. 

[AlFed]

7 hours ago, Jennifer M said:

Hey @AlFed @steve00 is correct, there is some manual style bits in your global template. I don't know how you uploaded the theme but it's still there. Particularly this bit:

<style>
#ipsLayout_header header {
  background-color: #3d5e78;
  background-image: url(http://www.spain4you.es/forum/uploads/monthly_2016_12/699329.jpg.716a4acadcfee74382d1192a0d378f0e.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  
}
</style>

Now, note that the image doesn't actually load for me at all but that's why your header color isn't changing.

To me it looks like someone copied the CSS and pasted it into a style code in your globalTemplate.

Your globalTemplate is the first thing that opens when you open the theme editor so look in that one.

Hi Jenifer,

Thank you for the details. I see that using source code, but for ages I'm trying to find it in GlobalTemplate and in CSS. I've tried: colour code, image name, <style>, header and all other stuff and it doesn't appear nowhere. I also tried to find it manually and again failed. I will try more. Appreciate your help!

7 hours ago, opentype said:

Personally, I wouldn’t call uploaded files directly with the image URL from the uploads folder. That doesn’t count as an actual use in the system and the file might get deleted later. It is better to make it a theme resource and then call it like {resource= …}

Also, make sure to not call http images, since your site is using https. At the moment, the page tries to load an http image, which by the way doesn’t even exist. 

Thanks, unfortunately it wasn't my work, at that time I was too busy and hired someone to make what I want 🙂 Looks like I've got what I wanted 🙂

The change to https is recent... 

[Pete T]

@AlFed

The code should be in that template.

 

[AlFed]

Thank you all guys. Finally I found "the enemy". 

Header Image by IPS ThemesEnabled

By Tom Christian 

http://ipsthemes.com

 

It doesn't leave any trace in Template and CSS.