• I want to insert a background image in my site, which I understand how to do through the PageLines settings tab. But, I do not want the image to tile completely across the site because it is difficult to read the content against the background. I want the page/content area of the site to remain white (possibly with a border) and then the background image to tile behind that and everything else (like the header image). HELP!

Viewing 15 replies - 1 through 15 (of 18 total)
  • Do you have a URL or example. What you want, can be done.

    Thread Starter luckystar

    (@luckystar)

    Hi! Thanks for helping. I want it to look something like this https://www.garypeppervintage.com/

    so that the background is totally separated from the content area.

    Ok and where is your URL? So I can see how your theme is set-up.

    Thread Starter luckystar

    (@luckystar)

    I’m working in a previewdns mode because the other site is currently live.

    https://honeyrosenk.com.previewdns.com/

    I got it to work. Back-up your theme before doing theme edits!!

    There are 2 CSS files to edit. How are you with editing the CSS files? The 1st change is line 118 in styles.css located in the root folder. Replace the original code of:

    body {background-color: #000;}

    With this code:

    body {
        background: url("yourimage_path") repeat scroll 0 0 transparent;
        color: #7F7F7F;
        font-family: helvetica,arial,sans-serif;
        font-size: 12px;
        height: 100%;}

    Now the tricky part! In the CSS folder you will find dynamic.css. Locate line 74. Replace the code:

    body #page, .sf-menu li, #primary-nav ul.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active, .commentlist ul.children .even, .alt #commentform textarea{background-color:#FFFFFF;}

    With the new code of:

    body #page, .sf-menu li, #primary-nav ul.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active, .commentlist ul.children .even, .alt #commentform textarea{background-color:#ffffff; width:762px; margin-left: auto; margin-right: auto;}

    The width may need to be adjusted. I’m just working with a birds eye.. for perfect display, try it on yours. Adjust the width to the size you want… As for a border.. well add it to the second section code.. If you need more help, let me know.

    No idea if you can work with CSS files.. always back up your originals before playing – ok.

    Change the width to 980px and it will dead center, the height may need to be adjusted also.. No idea how many posts you have.. as the foot details are not clear. easy fix if need be. let me know.

    Thread Starter luckystar

    (@luckystar)

    WOW this is amazing! I have a slight problem…I’m using dreamweaver to edit the code, but I have no idea where the files for my site are being saved! In other words, I was able to use the ftp address to access the site, but then I didn’t know what folder to access in order to make these changes! Once I find it, I will definitely try your changes! I will keep you updated…thank you so so so much for your help!

    I use Dreamweaver also.. But I prefer Notepad++ – Pretty simple.

    FTP the 2 files to a folder where you can find them easily. I would suggest the following:

    1. Name your folder mod_theme
    2. FTP the files to the folder
    2. Open Notepad++ or Dreamweaver – then edit the 2 files
    3. FTP them back to the same directory.

    I do all my work on a localhost environment using XAMPP, makes life easier. I use to work with these FREE DNS deals, but for installing and editing, the FTP can slow you down. I don’t have to FTP anything until I’m happy with the results. The height can be adjusted with ease. Let me know how you make out!

    MAKE sure to BACK-UP your theme! ??

    Thread Starter luckystar

    (@luckystar)

    Did you mean change the width of the content area so that the header would be centered? And what do you mean the foot details aren’t clear? I’m sorry, I’m kind of new to this so I’m not entirely sure of what I’m doing. How does one “FTP the files to the folder?”

    Another edit – in the dynamic.css file line 18 change it to:

    #site .content, .wcontent, #primary-nav ul.main-nav.nosearch{background-color:#ffffff; width:980px}

    Ok – So to help you out, do you have access to the server using a FTP program? Are you able to do the edits in DreamWeaver? I will create a video for you and it will make it easier.. I will do this over the week-end.

    Thread Starter luckystar

    (@luckystar)

    OK so I figured out how to access all my files in dreamweaver. I still can’t figure out how to center to 1) Make a backup of each of the files (in a class I took, we added a ‘0’ to the title of some of the files and somehow that created a duplicate so that we could use that if anything got messed up. 2) Center the header 3) Remove the page lines logo in the footer, the more section, and the latest. 4) remove the search bar next to the navigation. 5) and finally, I haven’t tried the background thing you sent me because I wanted to make sure I knew how to backup the files first.

    Yikes! Is there some sort of conditional that I’m supposed to be using in the footer file in order to remove the elements that I don’t want? Or do I simply delete something? I’m having a hard time locating in each file what needs to be changed in order to make what I want to happen work.

    I will send you a link on how to do this. It will be a video file – No issues.. much simplier than you’re trying to recall from class.:)

    Thread Starter luckystar

    (@luckystar)

    THANK YOU!

    Thread Starter luckystar

    (@luckystar)

    any chance that video is still coming my way?

    I have not forgotten, I have a series of tut’s to put up. It will be up in the day or so… Sorry for the long delay.

Viewing 15 replies - 1 through 15 (of 18 total)
  • The topic ‘Background image in platform’ is closed to new replies.