Loading...
 
Skip to main content

Themes

Forum List Topic List

 
Thread actions
Print this page
  • Print all pages

    • Background Image

    Posted by StevieB1234

    Hi everyone, this is definitely a noobie question, hopefully with an easy answer - even though I doubt it. I've searched the documentation and haven't found anything that was quite what I was looking for:

    I'd like to change the background image of the entire site...not just the wrapper, but the html background. I'm using the theme eatlon and every time I edit the css body tag, nothing happens. I've done this in the custom css editor as well as through ftp.

    I have a .jpg image that I'd like to use instead of the dark blue gradient. Any ideas?

    Thanks a ton in advance!

    Reads: 812140
    Posted by Gary Cunningham-Lee

    Eatlon's body background image is specified in eatlon.css as 

     body {
    background: url("/styles/eatlon/body_bg.gif") repeat-x #9FAEC2;
}


    so this is what needs to be edited or overridden. You could add a custom rule in the Look and Feel admin page's custom CSS textarea, or add a "custom.css" file in the styles/eatlon/ directory. These would be upgrade-proof. Or you could edit styles/eatlon.css itself but would have to repeat the edit when you update your site if eatlon.css is replaced.

    I don't know why your attempts so far didn't work. I haven't tried Tiki's built-in CSS editing for a while, but surely FTP (replacing eatlon.css or adding a custom file) should work. Be sure to clear the caches (at tiki-admin_system.php) after making the change. Sometimes the browser cache needs to be cleared, too, especially if the replacing image file has the same name as the replaced file.

    -- Gary

    Custom theme campaign: Choose any theme at free-css.com(external link), etc. and have it converted for your Tiki site for USD160. Please visit Zukathemes.com(external link) for details.

    Posted by StevieB1234

    Hey Gary,

    Thanks so much for taking the time to respond. This is what I've done so far:

    1) Created a new theme based on eatlon. I renamed it and copied all the files over so it looks exactly like the eatlon theme.

    2) FTP'd the image that I wanted to use (both as a jpg and gif) and put it in the same folder where the current background image is on my server.

    3) Activated my custom theme and then copied the original code in the "add custom rule" section, but changed the link to the image I wanted to use. I then cleared the cache, both at tiki-admin_system.php and through my browser, and then reloaded the page. Nothing happened.

    I then went in and changed the actual css file and uploaded that back to the server (maybe that would work). Again cleared both cache's and reloaded the page. Nothing.

    Any thoughts?

    PS: this is the code that i replaced the original code with:

    body {
    font-family: arial, sans-serif;
    font: 76%/1.4em Verdana, Geneva, Arial, Helvetica, sans-serif;
    background-image: url("/styles/supporters/supporters_bg.gif");
    background-repeat: repeat-y;
    background-color: #000;

    Posted by StevieB1234
    StevieB1234 wrote:

    PS: this is the code that i replaced the original code with:

    body {
    font-family: arial, sans-serif;
    font: 76%/1.4em Verdana, Geneva, Arial, Helvetica, sans-serif;
    background-image: url("/styles/supporters/supporters_bg.gif");
    background-repeat: repeat-y;
    background-color: #000;


    Ok I've figured it out. Being a cascading style sheet at all, the problem was that background color was below the image url. Also needed to remove the / in front of /styles...

    Again, thanks for the help and theme!! I'm more and more amazed by what you can do with a tiki site by the day!

    Posted by Gary Cunningham-Lee

    I copied that "original eatlon.css" rule from the Firefox add-on Firebug's code inspector, which is kind of an "interpreted" version of what's in the stylesheet. I was wondering about that initial slash, too. The stylesheet itself states: 

    	background: #9faec2 url(eatlon/body_bg.gif) repeat-x;


    which is the compact form I usually use for background rules: color, image url, repeat rule (and sometimes position rules). This compact form has exactly the same effect as the more verbose form you posted, for future reference. By the way, Firefox's Firebug add-on is a great inspector to see what CSS affects what part of the page, etc.

    Glad it turned out ok; you're welcome, regarding the theme and all. Credit goes to the original author also (who at least at one time was at eatlon.com).

    -- Gary

    Custom theme campaign: Choose any theme at free-css.com(external link), etc. and have it converted for your Tiki site for USD160. Please visit Zukathemes.com(external link) for details.