Thanks, that worked. Is it possible to make the page content scroll independent of the image, and can the image be disabled on certain pages (Discussions, etc.)?
Vanilla places the controller name as a class on the body element. You can use this knowledge to modify your selectors to include/restrict your background rules.
@vrijvlinder No changes appear to be made. It's just the same plain white background that comes with yeti. I've even tried adding this to custom_yeti.css just to try, but nothing.
It loads last, so whatever you save in there will override whatever else is there - with some exceptions (like what @vrijvlinder mentioned and script-modified CSS)
Combine that with dev tools and you can tweak anything.
@Jonathan W Thanks for referring me to that plugin, I'm going to download it and check it out!
@vrijvlinder Hey thanks man! The "background: url()" worked, but the other 3 didn't. I've tried using and removing the !important and each time by background repeats itself.
They all work but you likely added them in the wrong place or something
When I look at the source of this http://forgehaven.com/forums/
assuming that is your forum, I do not see the css I gave you at all in the custom_yeti.css or anywhere else.
@vrijvlinder Interesting. I've added them to the same body {} as my background image which is working. They're not in custom_yeti.css, but instead custom.css. There's no way I put them in the wrong place, because I've put them in the same as the piece that is working.
This is what is uploaded to my site in custom.css:
They're not in custom_yeti.css, but instead custom.css.
Is Yeti the theme you are using? if yes, you did put them in the wrong place but you should know better what you did. You need to read the tutorials so you can understand how css works and how bootstrap works. Otherwise you are just spinning in circles.
This theme is not supported through this forum, it has been made clear 1000s of times by the author and others. Please go to github for further assistance on this particular theme.
@vrijvlinder When you originally said I was probably putting them in the wrong place I was under the impression that you meant in the wrong place of the css file, meaning somewhere outside of body {}. I was saying that there is no way because I put them in the same place as the first attribute, background: url(). Also, my first two posts in this discussion clearly state that I was using custom.css so when you responded with the code to use, I thought I needed to add it to this file.
I thought that you aren't really supposed to add code to the specific theme's css, which is what custom.css is for? I guess I'm wrong about that. I am going to use the resources you've given me, but it would be a bit much to read over all of that before I responded with my previous post.
I know this theme is not supported here. The question I had was on topic with this discussion, which only asks about a simple task in modifying bootstrap. I'd say that's appropriate to discuss here, even though the theme isn't supported. Thank you for all of your help though! I appreciate the resources you've given me.
Comments
http://www.w3schools.com/cssref/pr_background-image.asp
❌ ✊ ♥. ¸. ••. ¸♥¸. ••. ¸♥ ✊ ❌
Thanks, that worked. Is it possible to make the page content scroll independent of the image, and can the image be disabled on certain pages (Discussions, etc.)?
Vanilla places the controller name as a class on the body element. You can use this knowledge to modify your selectors to include/restrict your background rules.
You are looking for the background attachment property: http://www.w3schools.com/cssref/pr_background-attachment.asp
Search first
Check out the Documentation! We are always looking for new content and pull requests.
Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.
I've tried doing this for my site but it is not working. I've added the following to custom.css within the design folder of bootstrap:
body {
background-image: url("http://forgehaven.com/wp-content/uploads/2015/03/ForgeHavenBG.png");
background-color: #cccccc;
}
What exactly does not work?
❌ ✊ ♥. ¸. ••. ¸♥¸. ••. ¸♥ ✊ ❌
@vrijvlinder No changes appear to be made. It's just the same plain white background that comes with yeti. I've even tried adding this to custom_yeti.css just to try, but nothing.
Look at the theme parent style sheets for body and see if is has !important on it.
Otherwise add your own if necessary it is possible the theme uses background and not background-image so you are not overriding it .
https://css-tricks.com/when-using-important-is-the-right-choice/
body { background: url(http://forgehaven.com/wp-content/uploads/2015/03/ForgeHavenBG.png)100% 100%!important; background-attachment:fixed!important; background-repeat: no-repeat!important; background-position: top left!important; }❌ ✊ ♥. ¸. ••. ¸♥¸. ••. ¸♥ ✊ ❌
You can also use this Addon for on-the-fly CSS edits:
vanillaforums.org/addon/cssedit-plugin
It loads last, so whatever you save in there will override whatever else is there - with some exceptions (like what @vrijvlinder mentioned and script-modified CSS)
Combine that with dev tools and you can tweak anything.
@Jonathan W Thanks for referring me to that plugin, I'm going to download it and check it out!
@vrijvlinder Hey thanks man! The "background: url()" worked, but the other 3 didn't. I've tried using and removing the !important and each time by background repeats itself.
They all work but you likely added them in the wrong place or something
When I look at the source of this http://forgehaven.com/forums/
assuming that is your forum, I do not see the css I gave you at all in the custom_yeti.css or anywhere else.
http://www.tutorialspoint.com/bootstrap/bootstrap_tutorial.pdf
http://www.w3schools.com/bootstrap/
❌ ✊ ♥. ¸. ••. ¸♥¸. ••. ¸♥ ✊ ❌
@vrijvlinder Interesting. I've added them to the same body {} as my background image which is working. They're not in custom_yeti.css, but instead custom.css. There's no way I put them in the wrong place, because I've put them in the same as the piece that is working.
This is what is uploaded to my site in custom.css:
body {
background: url(http://forgehaven.com/wp-content/uploads/2015/03/ForgeHavenBG.png)100% 100%!important;
background-attachment: fixed!important;
background-repeat: no-repeat!important;
background-position: top left!important;
}
Is Yeti the theme you are using? if yes, you did put them in the wrong place but you should know better what you did. You need to read the tutorials so you can understand how css works and how bootstrap works. Otherwise you are just spinning in circles.
This theme is not supported through this forum, it has been made clear 1000s of times by the author and others. Please go to github for further assistance on this particular theme.
❌ ✊ ♥. ¸. ••. ¸♥¸. ••. ¸♥ ✊ ❌
@vrijvlinder When you originally said I was probably putting them in the wrong place I was under the impression that you meant in the wrong place of the css file, meaning somewhere outside of body {}. I was saying that there is no way because I put them in the same place as the first attribute, background: url(). Also, my first two posts in this discussion clearly state that I was using custom.css so when you responded with the code to use, I thought I needed to add it to this file.
I thought that you aren't really supposed to add code to the specific theme's css, which is what custom.css is for? I guess I'm wrong about that. I am going to use the resources you've given me, but it would be a bit much to read over all of that before I responded with my previous post.
I know this theme is not supported here. The question I had was on topic with this discussion, which only asks about a simple task in modifying bootstrap. I'd say that's appropriate to discuss here, even though the theme isn't supported. Thank you for all of your help though! I appreciate the resources you've given me.