Posted February 12, 201510 yr 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 ?
February 12, 201510 yr 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"};}
February 12, 201510 yr 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.
February 13, 201510 yr Author 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...) ?
February 13, 201510 yr 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 }
February 22, 201510 yr 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.
February 22, 201510 yr 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%; }
February 22, 201510 yr 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
February 22, 201510 yr 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 }
February 22, 201510 yr 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.
February 23, 201510 yr 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
February 23, 201510 yr 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.
February 23, 201510 yr 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
Archived
This topic is now archived and is closed to further replies.