There are several tabs – in unordered list #nav. Basically, this is what’s in default theme’s style.css
`#nav {
bottom: 0;
list-style: none outside none;
margin: 0;
max-width: 95%;
padding: 0;
position: absolute;
right: 15px;
}`
Change `right: 15px;` to `left: 15px;` You might even want to increase the height of your header area.
Thank you very much. Do you know of a good site/study manual that offer kinda basic html. I create all my themes with Artisteer and know some, but it seems as I go along I keep learning and need a reliable manual to call on?
Thank you again
I just tried what you said and I cant even get into some of the editors options.
This is the custom style sheet. Doesnt show nav bar?
body {
width: 1000px;
background: #C5CBF7 none;
}
#leftSidebar {
width: 182px;
float: left;
padding: 20px 5px 20px 20px;
background: url( images/sidebar_back.gif ) top left repeat-x;
margin-top: 1px;
overflow: hidden;
border-right: 1px solid #e4e4e4;
}
#leftSidebar .widget {
margin-bottom: 20px;
}
#leftSidebar h3.widgettitle {
background: #eaeaea;
padding: 5px 15px;
font-size: 12px;
clear: left;
margin: 10px -4px 10px -20px;
}
#wp-admin-bar div.padder {
width: 1000px !important;
}
#content div.padder {
float: left;
width: 525px;
border-left: 1px solid #e4e4e4;
margin-right: 226px;
border-right: 0px solid #e4e4e4;
-moz-border-radius-topleft: 0px;
-webkit-border-top-left-radius: 0px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
margin-left: -1px;
}
div.post div.post-content, div.comment-content {
margin-left: 0px;
Clearly we have different interpretations re “shift the menu bar (which is on the header) to the left” which I find out that you meant making the horizontal menu a vertical menu on a left sidebar(?), theme? site URL?.
Some online assistance:
http://www.w3schools.com/xhtml/default.asp
http://www.w3schools.com/css/default.asp
The menu bar which is on the header, I want to move to the left because there are several tabs there and it creates a second row because there isnt enough room. I want to move it all to the left so that it fits perfectly in one row?
Thank you for the services and your help
Also, just noticed you mentioned using a custom Artisteer theme … did you install the BP Template Pack plugin and go through the integration process? Can’t give any definitive answer based on the styles you just posted above – site url?
Actually the theme I am using now is BP colums.
Ok, BPcolumns then.
1. Save a file copy of your default.css file in the themefoldername/_inc/css folder to a safe place.
2. Open up default.css, find #header and change `height: 100px;` to `height: 125px;`
3. In same file, find ul#nav and
change `right: 15px;` to `left: 15px; `
change `max-width: 65%;` to `width: 100%`
I opened the folder and found the original custom css which is below and also the style.css which is after the custom. I didnt see where I could find the nav menu?
body {
width: 1000px;
}
#leftSidebar {
width: 182px;
float: left;
padding: 20px 5px 20px 20px;
background: url( images/sidebar_back.gif ) top left repeat-x;
margin-top: 1px;
overflow: hidden;
border-right: 1px solid #e4e4e4;
}
#leftSidebar .widget {
margin-bottom: 20px;
}
#leftSidebar h3.widgettitle {
background: #eaeaea;
padding: 5px 15px;
font-size: 12px;
clear: left;
margin: 10px -4px 10px -20px;
}
#wp-admin-bar div.padder {
width: 1000px !important;
}
#content div.padder {
float: left;
width: 525px;
border-left: 1px solid #e4e4e4;
margin-right: 226px;
border-right: 0px solid #e4e4e4;
-moz-border-radius-topleft: 0px;
-webkit-border-top-left-radius: 0px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
margin-left: -1px;
}
div.post div.post-content, div.comment-content {
margin-left: 0px;
}
THIS IS THE STYLE.CSS
/*
Theme Name: BP Columns
Theme URI: http://buddypress.org
Description: A 3 Column Buddypress theme.
Version: 1.2
Author: modemlooper
Author URI: http://twitter.com/modemlooper
Template: bp-default
Tags: buddypress, three-columns
*/
/* Inherit the default theme styles */
@import url( ../../plugins/buddypress/bp-themes/bp-default/_inc/css/default.css );
/* Inherit the default theme adminbar styles */
@import url( ../../plugins/buddypress/bp-themes/bp-default/_inc/css/adminbar.css );
/* Custom styles */
@import url( custom.css );
Open up custom.css file, then add this at the bottom :
`#header {
height: 160px;
background-repeat: no-repeat;
background-position: left;
}
ul#nav {
position: absolute;
left: 15px;
bottom: 0;
max-width: 1000px;
font-size: 14px;
height: 25px;
overflow: hidden;
}`
Adjust to taste. Save and upload.
I have add that(code is below), but I dont see any changes.
body {
width: 1000px;
background: #C5CBF7 none;
}
#leftSidebar {
width: 182px;
float: left;
padding: 20px 5px 20px 20px;
background: url( images/sidebar_back.gif ) top left repeat-x;
margin-top: 1px;
overflow: hidden;
border-right: 1px solid #e4e4e4;
}
#leftSidebar .widget {
margin-bottom: 20px;
}
#leftSidebar h3.widgettitle {
background: #eaeaea;
padding: 5px 15px;
font-size: 12px;
clear: left;
margin: 10px -4px 10px -20px;
}
#wp-admin-bar div.padder {
width: 1000px !important;
}
#content div.padder {
float: left;
width: 525px;
border-left: 1px solid #e4e4e4;
margin-right: 226px;
border-right: 0px solid #e4e4e4;
-moz-border-radius-topleft: 0px;
-webkit-border-top-left-radius: 0px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
margin-left: -1px;
}
div.post div.post-content, div.comment-content {
margin-left: 0px;
#header {
height: 160px;
background-repeat: no-repeat;
background-position: left;
}
ul#nav {
position: absolute;
left: 15px;
bottom: 0;
max-width: 1000px;
font-size: 14px;
height: 25px;
overflow: hidden;
}
@JamieMM
You seem to be having difficulty with the basics. May I suggest switching to an easier theme to customize?
I designed BuddyLite with newbies in mind (like me!) You can get a similar look and feel as your current theme, while taking full advantage of WP3 custom menus, and a bunch of basic customization options through a simple admin panel.
You can download it here: http://buddylite.com/buddylite-basic/
@JamieMM
I’m also a bit of a noob, but I’d like to recommend using the browser plug-in Firebug as a means to quickly learn css. http://getfirebug.com/
And the reason why the styles I gave you are not showing up is because in the block before that, there is no closing bracket after the style declarations of `div.post div.post-content, div.comment-content` whew.
So change this
`div.post div.post-content, div.comment-content {
margin-left: 0px;`
to
`div.post div.post-content, div.comment-content {
margin-left: 0px;
}`
and it’s good to go.
Thank you SIr Mercime:)
With that little change the menu bar has moved way over, though it is out of the header. I will try to understand whats going on here but I really like that look it created
