Ehren Posted April 8, 2015 Share Posted April 8, 2015 This tutorial will teach you how to add a background image to the header in the default IPS theme, as shown below. BEFORE: AFTER: 1. To begin, log into your ACP and browse to Customization > Themes. Click the arrow to the right of your theme and select Manage Resources. Click the + Add Resource button at the top right. 2. Change the location from admin to global and use the Choose single file... button to upload your background image. This tutorial uses header.jpg as the file name, however you are welcome to use whatever name you like. Press Save. 3. You will be taken back to the resources page. Use the Search: Name field at the top right to search for your file name (header.jpg). Under the Template tag column, you'll see your resource code which allows you to reference that image in your css and HTML. We'll need this code in the next step: {resource="header.jpg" app="core" location="global"} 4. Go to Customization > Themes > Edit HTML and CSS. Click the CSS tab and choose custom.css. Paste the following code: @media screen and (min-width:980px){ #ipsLayout_header header{ background-image: url('{resource="header.jpg" app="core" location="global"}'); background-size: cover; background-position: 50% 0%; background-repeat: no-repeat; } } The first line, starting with @media restricts the css to desktops and laptops. The background image will not be shown for tablets or mobiles (which is ideal for loading times). If you wish to show the image on all devices, remove the top line, and the } in the very last line. background-image simply defines our image URL, using the template tag from step 3. background-size defines if the image should be stretched to occupy the entire space of the header. Remove this line if you don't want the image to use it's natural image size background-position defines the position of the image (centered horiztontally, positioned at the top vertically). background-repeat defines how the image should be repeated (no-repeat, repeat, repeat-x, repeat-y) For an added effect, the background of the navigation bar has been changed to a semi-transparent black, which allows your background image to show beneath it. You are welcome to remove that code if you wish since it may not look correct for all images. Done! 8 Send PM Link to comment Share on other sites More sharing options...
ryanct02 Posted December 17, 2016 Share Posted December 17, 2016 I do not see a place to choose the image... This is what I see: http://imgur.com/a/8Sp9j Link to comment Share on other sites More sharing options...
Ehren Posted December 18, 2016 Author Share Posted December 18, 2016 3 hours ago, ryanct02 said: I do not see a place to choose the image... This is what I see: http://imgur.com/a/8Sp9j Change your ACP theme back to the default and see if the issue still occurs. Link to comment Share on other sites More sharing options...
ryanct02 Posted December 18, 2016 Share Posted December 18, 2016 1 hour ago, Ehren said: Change your ACP theme back to the default and see if the issue still occurs. How do I change it back to default? I was looking for it and couldn't find it Link to comment Share on other sites More sharing options...
Ehren Posted December 18, 2016 Author Share Posted December 18, 2016 At the very top of the ACP, click "Signed in as" and you'll be able to change the ACP theme. Link to comment Share on other sites More sharing options...
M10 Posted December 21, 2017 Share Posted December 21, 2017 I don't know if it's ok to post here again, but I've followed the tutorial, but the background-image isn't going unde the menu bar and the search bar. The image ends exactly where the menu tabs starts. The image dimension is 1920x1080. Am I doing something wrong there, or? Link to comment Share on other sites More sharing options...
Ehren Posted December 21, 2017 Author Share Posted December 21, 2017 5 hours ago, M10 said: I don't know if it's ok to post here again, but I've followed the tutorial, but the background-image isn't going unde the menu bar and the search bar. The image ends exactly where the menu tabs starts. The image dimension is 1920x1080. Am I doing something wrong there, or? This tutorial was made for 4.1. If you’re using 4.2, the result will look different to the screenshot in the first post. Link to comment Share on other sites More sharing options...
M10 Posted December 21, 2017 Share Posted December 21, 2017 No, I am using 4.1.19.4, this is the version Link to comment Share on other sites More sharing options...
Ehren Posted December 22, 2017 Author Share Posted December 22, 2017 If you can post the URL to your site (with the theme visible to guests), I'll take a look for you Link to comment Share on other sites More sharing options...
M10 Posted December 24, 2017 Share Posted December 24, 2017 My website is: https://camarila.ro Link to comment Share on other sites More sharing options...
M10 Posted December 26, 2017 Share Posted December 26, 2017 Any kind of updates? Link to comment Share on other sites More sharing options...
Ehren Posted December 26, 2017 Author Share Posted December 26, 2017 6 hours ago, M10 said: Any kind of updates? I just checked your site, but the code from this tutorial hasn't been added.. The Default theme simply shows the blue background colour. Link to comment Share on other sites More sharing options...
M10 Posted December 27, 2017 Share Posted December 27, 2017 Sorry, my bad. I've just put again the code, and you can take now a look Link to comment Share on other sites More sharing options...
M10 Posted December 28, 2017 Share Posted December 28, 2017 Did you had the time to check again the forum? Sorry for this, but I really want to sort the thing out Link to comment Share on other sites More sharing options...
Ehren Posted December 29, 2017 Author Share Posted December 29, 2017 10 hours ago, M10 said: Did you had the time to check again the forum? Sorry for this, but I really want to sort the thing out This tutorial is for the Default IPS theme, as mentioned in the first line The Deflection theme uses different code, so you'll need to change #ipsLayout_header instead. Link to comment Share on other sites More sharing options...
M10 Posted December 29, 2017 Share Posted December 29, 2017 And can you help me with that, if possible ? Would appreciate the effort. Link to comment Share on other sites More sharing options...
Ehren Posted December 29, 2017 Author Share Posted December 29, 2017 12 minutes ago, M10 said: And can you help me with that, if possible ? Would appreciate the effort. The solution is already in my above post Link to comment Share on other sites More sharing options...
M10 Posted December 29, 2017 Share Posted December 29, 2017 To be honest with you, I don't have any clue what to remove, or add, or change. I'm trying to figure it out, but nothing so far... Can you give me the code? The one that is edited ? Please Link to comment Share on other sites More sharing options...
Ehren Posted December 29, 2017 Author Share Posted December 29, 2017 2 hours ago, M10 said: To be honest with you, I don't have any clue what to remove, or add, or change. I'm trying to figure it out, but nothing so far... Can you give me the code? The one that is edited ? Please #ipsLayout_header{ background-image: url('{resource="header.jpg" app="core" location="global"}'); background-size: cover; background-position: 50% 0%; background-repeat: no-repeat; } 1 Send PM Link to comment Share on other sites More sharing options...
M10 Posted December 29, 2017 Share Posted December 29, 2017 Thank you very much. You saved my life! Link to comment Share on other sites More sharing options...
mattprince Posted November 26, 2020 Share Posted November 26, 2020 what size does the image have to be? I've tried it and mine is zoomed in so much uyou can't make out what it is matt Link to comment Share on other sites More sharing options...
Ehren Posted November 26, 2020 Author Share Posted November 26, 2020 9 hours ago, mattprince said: what size does the image have to be? I've tried it and mine is zoomed in so much uyou can't make out what it is matt The header dimensions vary depending on the size of your screen. If you create an image around 2000x200, that should be okay. Link to comment Share on other sites More sharing options...
mattprince Posted November 27, 2020 Share Posted November 27, 2020 Ive managed rot do this now but the background in the categories aren't picking top this new image as that background? Link to comment Share on other sites More sharing options...
Ehren Posted November 27, 2020 Author Share Posted November 27, 2020 Dimension has its own “Backgrounds” tab in its theme settings which allows you to edit the background images. This tutorial is specifically made for the default theme in 4.4.x, you shouldn’t use this tutorial for Dimension. Link to comment Share on other sites More sharing options...
Ivan Gabriel Duarte Posted March 11, 2022 Share Posted March 11, 2022 Thank you! i'm venturing myself into theme editting For now, I'm experiencing editting the IPS Default Theme xD Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now