Jump to content

Community

Richey

Change Header Background to image - Strange result

Recommended Posts

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!

 

screenshot.thumb.jpg.eaf3e31080ad7b57ae8

Share this post


Link to post
Share on other sites

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

 

Edited by Tom Christian

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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)

Share this post


Link to post
Share on other sites

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 🙂

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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... 😪😪

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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. 

Share this post


Link to post
Share on other sites
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... 

Share this post


Link to post
Share on other sites

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...