Invision Community 4: SEO, prepare for v5 and dormant account notifications By Matt Monday at 02:04 PM
Nightshift Posted February 12, 2015 Posted February 12, 2015 How can i add an background Image ? I only know how i can add a header Image. How can i add a color too ? i like background image and for bigger screens black color and image end zones.. is there a general css object list for important css objects ?
K4RL Posted February 12, 2015 Posted February 12, 2015 I altered it rather sloppily in global.cssbody { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; line-height: 18px; color: {theme="text_color"}; height: 100%; background-repeat: no-repeat; background-attachment: fixed; background-position: center; background-image: url("path_to_image.jpg"); background-color: {theme="page_background"};}
Cemmos Posted February 12, 2015 Posted February 12, 2015 Go to ACP -> Themes and the select Manage Resources on the theme you're editing. Upload your background image there and it'll give you a template tag to use.Then visit ACP -> Themes -> Edit HTML & CSS -> CSS -> core -> front -> custom -> custom.cssbody { background: url({resource="bgimage.jpg" app="cms" location="front"}) no-repeat center top scroll #000; }Change the template tag to the one the theme gives you. Change #000 to the background color you'd like. You can also edit global.css as well, but if you're not creating your own framework based off of the default theme, it's best to just override things in custom.css so you'll have smoother theme upgrades without having to redo your work.
Nightshift Posted February 13, 2015 Author Posted February 13, 2015 Thank you i will try this soon... How can i export skins with this picture / images ? I can only export the theme xml file but than there are the images missing (logo, background etc...) ?
craigf136 Posted February 13, 2015 Posted February 13, 2015 As @Cemmos said - this is my custom.css html, body { /* Safari has trouble with bgcolor on body. Apply to html tag too. */ background: url(url to image) no-repeat center center fixed, #000; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; color: #fff }
DesignzShop Posted February 22, 2015 Posted February 22, 2015 Thank you i will try this soon... How can i export skins with this picture / images ? I can only export the theme xml file but than there are the images missing (logo, background etc...) ? Not sure here for a fact but I do believe you need to run designers mode to see saved changes in regards to resources.
Woodsman Posted February 22, 2015 Posted February 22, 2015 Not sure here for a fact but I do believe you need to run designers mode to see saved changes in regards to resources.It can be done manually but it can be a pain in the Arse...I altered it rather sloppily in global.cssbody { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; line-height: 18px; color: {theme="text_color"}; height: 100%; background-repeat: no-repeat; background-attachment: fixed; background-position: center; background-image: url("path_to_image.jpg"); background-color: {theme="page_background"};}This and the example below don't work anymore... Css has been changed...As @Cemmos said - this is my custom.css html, body { /* Safari has trouble with bgcolor on body. Apply to html tag too. */ background: url(url to image) no-repeat center center fixed, #000; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; color: #fff } Try this Changing the image file in the global.css to your uploaded imagehtml { min-height: 100%; position: relative; /*-webkit-font-smoothing: antialiased;*/ background-image: url( {resource="calm_wf001.jpg" app="core" location="front"}); background-size: cover; background-attachment: fixed; background-repeat: no-repeat; width: 100%; height: 100%; } body { background: transparent; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; line-height: 18px; /* color: {theme="text_color"};*/ color: #fff; height: 100%; }
Christophe Posted February 22, 2015 Posted February 22, 2015 How are you able to make css and html changes? Everytime I try to edit the skin I get immediate fatal errors even on fresh clean installs?ACP runs fine but any edits on the site fatal error and requires a revert in the ACP. This is while NOT using the Designer mode
craigf136 Posted February 22, 2015 Posted February 22, 2015 It can be done manually but it can be a pain in the Arse...This and the example below don't work anymore... Css has been changed...Try this Changing the image file in the global.css to your uploaded imagehtml { min-height: 100%; position: relative; /*-webkit-font-smoothing: antialiased;*/ background-image: url( {resource="calm_wf001.jpg" app="core" location="front"}); background-size: cover; background-attachment: fixed; background-repeat: no-repeat; width: 100%; height: 100%; } body { background: transparent; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; line-height: 18px; /* color: {theme="text_color"};*/ color: #fff; height: 100%; } This is still working fine for me and I'm running RC2.html, body { /* Safari has trouble with bgcolor on body. Apply to html tag too. */ background: url(url to background image) no-repeat center center fixed, #000; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; color: #fff }
craigf136 Posted February 22, 2015 Posted February 22, 2015 How are you able to make css and html changes? Everytime I try to edit the skin I get immediate fatal errors even on fresh clean installs?ACP runs fine but any edits on the site fatal error and requires a revert in the ACP. This is while NOT using the Designer modeIf you could supply an example of one edit you have tried to do, what file it is, steps to reproduce (i.e. code you are trying to change and what you are trying to change it too) would help. This would allow everyone to advise on what may be causing the issue.
Woodsman Posted February 23, 2015 Posted February 23, 2015 This is still working fine for me and I'm running RC2. html, body { /* Safari has trouble with bgcolor on body. Apply to html tag too. */ background: url(url to background image) no-repeat center center fixed, #000; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; color: #fff } I'd like to see that in action ... All the old system codes ever did for me was create massive headaches. BTW which RC2 css file are you pulling this from?. html, body { /* Safari has trouble with bgcolor on body. Apply to html tag too. */ Looks a bit old school and I have not seen this statement since 3.4.7's ipb_styles.css
craigf136 Posted February 23, 2015 Posted February 23, 2015 I'm not actually as you can guess, I just took our 3.4.7 background css and pasted it over and changed the url it's hashy but it works. I need to check clean/update css and custome pages before we go live.
K4RL Posted February 23, 2015 Posted February 23, 2015 Both methods work fine for me although I am now using the second one as the way I did it was just a temporary fix whilst I sorted out a suitable background image
Recommended Posts
Archived
This topic is now archived and is closed to further replies.