4 {{ upvoteCount | shortNum }}
4 {{ upvoteCount | shortNum }}

how do they do that

by nicholasb
3 replies
  • WEB DESIGN
    • |
I use optimize press for my squeeze and video salespages, but I can only figure out how to get an all white background.

Anyone know how I can get mine to look like that, I'll post two examples below.

Here is my site Affiliate Cash Flow System notice the all white surrounding the video

and here is an example of one that is dressed up. FREE VIDEO Exposes $604 Per Day "Real Time" Software

Now I am talking strictly on the design and nothing else.

What type of image or graphic do I need to create and how do I get it on the page in optimize press anyone know, or know which direction to point me in?
  • Profile picture of the author simondach
    Nicholasb, can you clarify - do you want the squeeze page (copy area) to change colour, or the background (shadow area, etc) to change colour?

    You'll be able to make the changes with just a little bit of CSS in the OP general options page. I've just done a quick test using dev tools in Chrome and it's completely possible.
    Signature
    Read This To Learn Why Most Designers Can't Make A Sustainable Income
    --
    Chu'Kno'Me's affiliate program is now open to everyone.
    » Click here to find out how you can make money with it.
    {{ DiscussionBoard.errors[4970677].message }}
  • Profile picture of the author Sean3000
    Some themes offer an easy way to do this from a special dashboard control panel, but you're probably going to need to edit your CSS.

    From the Dashboad, go to Appearance > Editor. Make sure your CSS file is selected. Look for the following rules:

    Code:
    body {
    background: none repeat-x scroll 0 0 #EFEFEF;
    color: #000000;
    font: 0.75em/160% Helvetica,Arial,Verdana,sans-serif;
    margin: 0;
}

#launchbk {
    background-image: url("http://www.warriorforum.com/images/launch1bk.png");
    background-repeat: repeat-y;
    padding-top: 10px;
}
    The first rule is for the entire page, the second rule is for the gray area around the video.

    If you want to use an image, you'll need to upload it to the theme's image folder and create or modify the CSS rules to reflect this change.

    There's plenty of info on CSS out there so I won't go into detail here. If you don't feel like messing with it yourself (and I don't blame you if you don't) then I bet you could get it taken care of with a couple of Fiverr gigs.
    {{ DiscussionBoard.errors[4973877].message }}
  • Profile picture of the author clickbump
    To echo Sean's post, assuming you have a full screen graphic (foo.png) that you want to use for the main background element, and you've uploaded it to your site's "uploads" directory, the CSS to place the image would be:

    Code:
    #launchbk {
    background:url("wp-content/uploads/foo.png"); center top no-repeat;
}
    Ideally though, the theme should have an options panel that gives you one click access to upload a background image without requiring you to know CSS.

    Now, if you want to take it a step further, on modern browsers you can specify more than one background image for a single element.

    So, you could have a tiled, repeating image that lays behind your main image and fills the screen outside the bounds of that image (for when the site is viewed on monitors that are larger than your image).

    To do that, assuming the tiled, repeat image is repeat.png, the code would be:


    Code:
    #launchbk {
    background:url("wp-content/uploads/foo.png"); center top no-repeat,url(repeat.png);
}
    The first image you specify always appears on top of the second. The default repeat pattern is repeat in both directions (horizontally and vertically), so you don't have to specify that.
    Signature
    {{ DiscussionBoard.errors[4975099].message }}

Trending Topics