Jump to content

Edit Background image


Recommended Posts

In the Foundation skin (presuming), try by adding this CSS rule to the file cubcart.default.css:

.inner-wrap { background-image: url("path/to/image.png"); }

 

cheers

 

how do I get rid of the big white box at the top ?

 

http://www.littleocean.co.uk/shop

im using skin e-Tone blue and adjusting the width of the cart so you can see more background (its also slightly off center)

Edited by tomcoleman
Link to comment
Share on other sites

The big white box at the top? I see the logo in the middle of it.

If you are referring to the white blocks sitting on top of what parts of the background image you have in place, there are 196 pixels worth of white that is at the top of the image. That is to say, the white is part of the image.

Link to comment
Share on other sites

The big white box at the top? I see the logo in the middle of it.

If you are referring to the white blocks sitting on top of what parts of the background image you have in place, there are 196 pixels worth of white that is at the top of the image. That is to say, the white is part of the image.

yes that bit - how do I get rid of that - which file needs to be edited.

Link to comment
Share on other sites

That is to say, the white is part of the image.

To remove it, load the image in an image editor and cut off the white band.

its not an image it something todo with the code, (right mouse on the area and you cant save as image, but you can on the actual logo)

 

I want to remove the white space here....

 

 

space.JPG

Link to comment
Share on other sites

So far, the best I have for you is to disable any of three things in the CSS rule for: row::after (grid.css line 24).

That will do it, but will cause more problems than it fixes.

Or try this: in blue.css line 89, for the #container rule, change the background color from #fff to transparent.

Link to comment
Share on other sites

  • 1 month later...

In the Foundation skin (presuming), try by adding this CSS rule to the file cubcart.default.css:

.inner-wrap { background-image: url("path/to/image.png"); }

 

cheers

 

how do I get rid of the big white box at the top ?

 

http://www.littleocean.co.uk/shop

im using skin e-Tone blue and adjusting the width of the cart so you can see more background (its also slightly off center)

I can't do it... Please more detail.... thank.

Link to comment
Share on other sites

That is formatted within the "container" id of the css in the blue.css file. That is what makes the whole body of the site white. To separate that out you will have to do some code big changes to the skin. I'll see if I can work on a fix for you and post it as soon as it's ready. Do you just want it blank or a certain color? Is the skin stock or modified? Have you changed the background or anything else?

Bill

Link to comment
Share on other sites

Ok, assuming everything is stock here is what should work.

in the template folder open up main.php. Find this code at line 60

<div class="container" id="container">
        <div class="row" id="logo">
                <div class="u12"><a href="{$STORE_URL}"><img src="{$STORE_LOGO}" alt="{$META_TITLE}" /></a></div>
        </div>
        <div class="row" id="documents">
                <div class="u12">
                        {$SITE_DOCS}
                </div>
        </div>

Replace it with this

<div class="topcontainer" id="topcontainer">
        <div class="row" id="logo">
                <div class="u12"><a href="{$STORE_URL}"><img src="{$STORE_LOGO}" alt="{$META_TITLE}" /></a></div>
        </div>
        <div class="row" id="documents">
                <div class="u12">
                        {$SITE_DOCS}
                </div>
        </div></div>
        <div class="container" id="container">

Then open up the style folder and open file "blue.css". At line 88 add this code

#topcontainer ( background: transparent;}

Technically you do not "need" that but if you ever what to change the color there that is where you will do it.

Now open file "common.css" and find the layout section (line 501). Add this code directly above where you see #container {

#topcontainer{
margin-top:20px;
margin-bottom:20px;
padding:0;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
}

Now open the file "grid.css". At line 41, just before .container {   ad this code

.topcontainer {
width: 960px;
margin: 0 auto;
}

There are three more places in that file that you will have to add the class .topcontainer. Find where you see .container under "wide", "narrow", and "mobile" and copy it along everything within it's brackets { }. Then paste it above the .container and change the copied class it .topcontainer.  Does that make sense? I can spell it all out but it's a lot of code and is pretty simple to do really. Just amek sure there is a copy of the .container class info renamed to .topcontainer for each time it is listed on that page

Good luck and let me know how it works out.

Link to comment
Share on other sites

  • 4 weeks later...

These instructions are only for the e-Tone skin. If you are using Foundation it will not work. Foundations is very different and MUCH harder to accomplish this. Are you using the e-Tone skin? Did you double check the code to make sure it is exactly as above? Can you please include the url to your site so I can see what is going on?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...