• I currently use WordPress to edit my website, however, I can’t figure out how to move the Sidebar and the content page over to the left so it’s in line with the top-navigation menu.

    Here’s what I want to do: [url]https://velociteen.com/SS.png[/url]

    How do I edit the CSS so this occurs?

    Here is the CSS:

    body {
    margin:0;
    padding:0;
    background: #cbe86b;
    background: url('https://flowersitters.com/wp-content/themes/velociteen/Bubble%20Girl%20Four.jpg'); background-attachment: fixed;
    color:#030736;
    text-align:left;
    font-family: Arial, sans-serif;
    font-size:12px;
    }
    
    #container{
    background:white;
    border:0px red solid;
    width:825px;
    margin:0 0 0px 0;}
    
    #header {
    width : 825px;
    height : 275px;
    margin : 0 0 0 0;
    background : url('https://flowersitters.com/wp-content/themes/velociteen/Banner%203.jpg') no-repeat;
    }
    
    #wrapper{
    width:800px;
    margin:0px auto;}
    
    #content {
    margin: 20px 0 0 0;
    width:530px;
    float:left;
    }
    
    #sidebar{
    float:right;
    width:220px;
    height:100%;
    margin:10px 0 0 0;
    }
    
    .sidebar{
    padding:5px;
    margin:0 0 10px 0;
    border:1px solid #03073;
    background-color:#cbe86b;
    }
    
    #sidebar ul li{
    list-style:none;
    padding: 6px 3px;
    border-bottom:none;
    border-bottom: 1px dotted #030736;}
    
    #sidebar ul{
    list-style:none;
    padding: 6px 3px;
    margin:0;}
    
    #footer {
    border:0px red solid;
    margin:10px 0;
    padding:0px;
    width:825px;
    clear:both;
    }
    
    .footercol{
    border:0px solid #030736;
    width:218px;
    padding:15px;
    margin:0 5px;
    float:left;}
    
    .footercol2{
    border:1px solid #030736;
    background-color:#030736;
    width:218px;
    padding:15px;
    margin:0 5px;
    float:right;}
    
    #copyright{
    padding:20px 50px;
    clear:both;
    border-top:10px solid #030736;
    background-color:#cbe86b;}
    
    /*Nav styling*/
    
    #navigation {
    background: #030736;
    border-top:1px solid #030736;
    border-bottom:1px solid #030736;
    width:825px;
    color: #cbe86b;
    font-weight:bold;
    float:left;
    	}
    
    #navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    border: none;}
    
    #navigation li {
    margin: 0;
    float: left;}
    
    #navigation li a {
    display: block;
    text-align: center;
    color: #cbe86b;
    padding: 15px 20px;}
    
    	html>body #navigation li a {
    		width: auto;
    		}
    
    	#navigation li a:
    	 {
    		background-color: #cbe86b;
    		color: #030736;
    		}
    
    /* sub menu */
    #subnav {
    	clear:both;
    	float:left;
    	background: #47133c;
    }
    #subnav ul {
    	margin: 0px;
    	padding: 3px 0px 18px 5px;
    	list-style: none;
    	font: 11px/100% Arial, Helvetica, sans-serif;
    }
    #subnav li {
    	border-right: 1px solid #0d4775;
    	border-left: 1px solid #0d4775;
    	padding: 5px 7px;
    	margin: 0px;
    	float: left;
    }
    #subnav li a, #subnav li a:visited, #subnav .page_item {
    	text-decoration: none;
    	color: #030736;
    }
    #subnav .current_page_item a, #subnav .current_page_item a:visited {
    	color: #30261c;
    }
    #subnav li a:hover {
    	text-decoration: none;
    	color: #FFFFFF;
    }
    
    h1{
    font-weight:lighter;
    border-bottom:1px solid #871a44;
    color:#030736;
    font-size:18px;}
    
    h2{
    font-weight:lighter;
    color:#030736;
    font-size:16px;}
    
    a {
    color:#780001;
    text-decoration:none;
    }
    
    a:hover {
    color:#030736;
    text-decoration:none;
    }
    
    .clear{clear:both;}
    
    .post, .wrapper{
    margin:0 0 10px 0;
    padding:15px;
    border:1px solid #ccc;
    background-color:#FFFFFF;}
    
    .alignright {
    	float: right;
    	}
    
    .alignleft {
    	float: left;
    	}
    
    .alignleft a, .alignright a{
    display: block;
    background-color:#871a44;
    color:#000000;
    padding:8px;}
    
    .alignleft a:hover, .alignleft a:hover{
    background-color:#871a44;
    color:#030736;}
    
    .navigation {
    	display: block;
    	text-align: center;
    	margin-top: 10px;
    	margin-bottom: 60px;
    	}
    
    #commentform #author, #commentform #email, #commentform #url {
    	background: #871a44;
    	padding: .2em;
    border: 1px solid #871a44;
    
    }
    
    .commentlist li, #commentform input, #commentform textarea {
    	font-weight:normal;
    	}
    
    .commentlist li .avatar {
    	float: right;
    	border: 1px solid #871a44;
    	padding: 2px;
    	background: #871a44;
    	}
    
    .commentlist cite{
    	font-weight: normal;
    	font-style: normal;
    	font-size: 1.1em;
    	}
    
    .commentlist cite a {
    color:#ff3399;
    	font-weight: normal;
    	font-style: normal;
    	font-size: 1.1em;
    	}
    
    .commentlist p {
    	font-weight: normal;
    	line-height: 1.5em;
    	text-transform: none;
    	}
    
    .commentmetadata {
    	font-weight: normal;
    margin: 0;
    	display: block;
    	}
    
    #commentform input {
    	width: 170px;
    	padding: 2px;
    	margin: 5px 5px 1px 0;
    	}
    
    #commentform textarea {
    width:95%;
    border: 1px solid #871a44;
    background: #FFFFFF;
    	padding: .2em;
    	}
    
    #commentform #submit {
    	margin: 0;
    	float: left;
    	}
    
    .alt {
    	background-color: #871a44;
    	border-top: 1px solid #871a44;
    	border-bottom: 1px solid #871a44;
    	margin: 0;
    
    	padding: 5px;
    	}
    
    .commentlist {
    	padding: 0;
    	text-align: justify;
    
    	}
    
    .commentlist li {
    	margin: 15px 0 3px;
    	padding: 5px 10px 3px;
    	list-style: none;
    	}
    
    .commentlist p {
    	margin: 10px 0 10px 0;
    	}
    
    .nocomments {
    	text-align: center;
    	margin: 0;
    	padding: 0;
    	}
    
    /*styling for wp-cal*/
    
    #wp-calendar {
    	empty-cells: show;
    	font-size: 9px;
    	margin: 0;
    	width:100%;
    }
    
    #wp-calendar #next a {
    	padding-right: 9px;
    	text-align: right;
    }
    
    #wp-calendar #prev a {
    	padding-left: 9px;
    	text-align: left;
    }
    
    #wp-calendar a {
    	display: block;
    	text-decoration: none;
    }
    
    #wp-calendar a:hover {
    	color: #030736;
    }
    
    #wp-calendar caption {
    	color: #666;
    	font-size: 9px;
    	text-align: left;
            font-weight: normal;
    }
    
    #wp-calendar td {
    	color: #666;
    	font: normal 10px verdana, "Trebuchet MS", arial, tahoma, sans-serif;
    	letter-spacing: normal;
    	padding: 2px 0;
    	text-align: center;
    }
    
    #wp-calendar td.pad:hover {
    	background: #ddd;
    }
    
    #wp-calendar td:hover, #wp-calendar #today {
    	background: #eaeaea;
    	color: #030736;
    }
    
    #wp-calendar th {
    	font-style: normal;
    	text-transform: capitalize;
    }

    Thanks!

Viewing 2 replies - 1 through 2 (of 2 total)
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to Move Sidebar and Content Area Over’ is closed to new replies.