7 replies
  • WEB DESIGN
  • |
I don't know anything about CSS. I'm trying to add a border to a wordpress sales page template I purchased and I can't figure it out, I found a few sites that show me the code and how to customize it but when I make the change nothing happens. The thing is I don't know exactly where to put it or if I'm missing something. Just a basic black thin border around my content will work for now. Can anyone show me how to do this?

Here is the code I'm working with:

/*
Template URL: WP-SalesPage for WordPress
Description: When added to the root folder of any Wordpress Theme, this template provides and alternate sales page style template for pages on the site.
Version: 1.0
Author: Andrew Seltz
Author URI: Internet Marketing Insights

The CSS, XHTML, images, and design of this template are
copyright (c) 2009, Andrew Seltz and Go-To Guy! Enterprises.
Only licensed customers may use it on websites they own.
All rights reserved.

*/

body {
background-color: white;
background-image: none;
}

blockquote {
width: 450px;
margin-right: auto;
margin-left: auto;
padding: 5px 10px 5px 10px;
background-color: #FFFF99;
border: 2px solid black;
font-family: tahoma,verdana,sans-serif;
font-size: 16px;
text-align: left;
}

ul
{
list-style-position: inside;
list-style-image: url(images/wpsalespage/check.gif);
font-family: tahoma,verdana,sans-serif;
font-size: 16px;
text-align: left;
}

.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}

#wpsalesletter {
margin: auto;
padding: 0px;
width: 750px;
background-image: url(images/wpsalespage/background750x1.jpg);
background-position: left top;
background-repeat: repeat-y;
}

#wpheader {
background-image: url(images/wpsalespage/header750x31.jpg);
background-repeat: no-repeat;
width: 750px;
height: 30px;
}

#wpbody {
padding-left: 40px;
padding-right: 40px;
font-family: times-roman,serif;
font-size: 16px;
text-align: left;
}

#wpfooter {
background-image: url(images/wpsalespage/footer750x30.jpg);
background-repeat: no-repeat;
background-position: left bottom;
width: 750px;
height: 30px;
text-align: right;
font-weight: lighter;
font-style: normal;
font-family: Arial,Helvetica,sans-serif;
font-size: 8px;
color: silver;
text-decoration: none;
}

#prehead {
font-family: Arial,Helvetica,sans-serif;
font-style: italic;
font-weight: bold;
font-size: 18px;
text-align: left;
}

#headline {
font-family: Arial,Helvetica,sans-serif;
color: red;
font-size: 45px;
font-weight: bolder;
text-align: center;
}

#subhead {
font-family: Arial,Helvetica,sans-serif;
font-size: 25px;
text-align: center;
}

#minihead {
font-family: Arial,Helvetica,sans-serif;
color: red;
font-size: 20px;
font-weight: bolder;
text-align: center;
}

#center {
text-align: center;
}

#footertext {
text-decoration: none;
color: silver;
}

#css
  • Profile picture of the author n7 Studios
    Depends on the HTML markup of the sales page template.

    Typically to put a border around the entire content (header, content + footer), you'd have a container element, such as a div, which you'd then style in CSS accordingly.
    {{ DiscussionBoard.errors[1843270].message }}
  • Profile picture of the author mlmguru
    Well I played with it by adding a border, but now i realize I don't want the spacing at the top of the page, this is what i have right now: How P90x Works |
    {{ DiscussionBoard.errors[1843279].message }}
    • Profile picture of the author CarloD.
      Hey,

      on your body, you have a border of 100px located in wpsalespage-style.css

      Code:
      body {
      background-color:white;
      background-image:none;
      border:100px solid black;
      
      
      }
      you do
      border-top:;
      border-bottom:;
      border-left:;
      border-right:;

      and give the properties you want.
      Signature

      {{ DiscussionBoard.errors[1843694].message }}
      • Profile picture of the author mlmguru
        Originally Posted by CarloD. View Post

        Hey,

        on your body, you have a border of 100px located in wpsalespage-style.css

        Code:
        body {
        background-color:white;
        background-image:none;
        border:100px solid black;
        
        
        }
        you do
        border-top:;
        border-bottom:;
        border-left:;
        border-right:;

        and give the properties you want.
        I tried this, how do I adjust the width and color and style now, I can't figure out how it goes and where the ( and the ( or (-) all go. I'm new to this css stuff
        {{ DiscussionBoard.errors[1845191].message }}
        • Profile picture of the author CarloD.
          You'll probably wanna do this:

          Code:
          body {
          background-color:white;
          background-image:none;
          border-top:100px solid black;
          border-bottom:100px solid black;
          border-left:100px solid black;
          border-right:100px solid black;
          
          }
          -specify your width by changing 100px
          -for style you can have dotted, solid, double, dashed
          -Change black to the color you want or use #000000 hex values

          ...that should work.
          Signature

          {{ DiscussionBoard.errors[1846526].message }}
  • Profile picture of the author AnthonyBeldt
    On Your Body you just put the following three line then you get it black thin border around my content

    border-style: solid;
    border-width: 1px;
    border-color: black;
    {{ DiscussionBoard.errors[1847468].message }}
  • {{ DiscussionBoard.errors[1850076].message }}

Trending Topics