appearance -> widgets for your sidebar and appearance ->editor for your theme’s style.css file.
take a look through these pages to get yourself up to speed on how to use wordpress, it’s pretty easy to do the basics but you’ve still got to learn how to do them 😀
also read this site for information on css to help learn how to change colours and fonts etc
Thanks for the info. I was able to go into appearance -> widgets to get rid of the un-needed fields in my side bar. I am using the Graphene Theme and was able to edit the style.css and change the font and margin for the Header Title and Header Description (created a child theme). I looked through the codex docs but could not find a way to change font size and padding on the sidebar info. Basically I want to change the font and padding on the Headings in the right Sidebar (I only have the one sidebar). I have looked at the sidebar.php files but can’t find anything in there. I guess I don’t know which file I should look at to make those changes. Now I’m thinking it might be in the style.css. Below is the code related to sidebars from style.css. Any idea where I should make the change?
/* =Sidebars
-------------------------------------------------------------- */
#sidebar1,
#sidebar2 {
display: inline;
float: left;
margin-top: 4px;
padding-bottom: 30px;
}
#sidebar2 {
padding-left: 0;
}
.sidebar h3 {
background: url(images/bg-sidebar-h3.png) left bottom repeat-x #3C9CD2;
background: -moz-linear-gradient(#3C9CD2, #1F6EB6);
background: -webkit-linear-gradient(#3C9CD2, #1F6EB6);
background: -o-linear-gradient(#3C9CD2, #1F6EB6);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#3C9CD2', EndColorStr='#1F6EB6')";
background: linear-gradient(#3C9CD2, #1F6EB6);
border-bottom: 1px solid #195392;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
color: #fff;
*display: inline;
font: 18px/20px "Pontano Sans", arial, sans-serif;
margin: -15px 0 5px -12px;
padding: 7px 12px;
text-shadow: 0 -1px 0 #333;
width: 100%;
zoom: 1;
}
.sidebar > .warning_block {
margin-top: -4px;
}
.sidebar > .warning_block p {
margin-top: 10px;
font-size: 11px;
line-height: 16px;
}
.sidebar > .warning_block .first-p {
margin-top: 0;
}
.sidebar h3 a,
.sidebar h3 a:visited,
.sidebar h3 a:hover {
color: #fff;
}
.sidebar div.sidebar-wrap {
background: #fff;
-moz-box-shadow: 0 0 5px #bbb;
-webkit-box-shadow: 0 0 5px #bbb;
box-shadow: 0 0 5px #bbb;
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.15);
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.15);
box-shadow: 0 0 5px rgba(0,0,0,0.15);
margin-bottom: 16px;
padding: 10px 12px;
position: relative;
}
.sidebar #tweetfollow {
margin-top: 10px;
text-align: right;
}
.tweet-rel-time {
font-size: 85%;
}
#sidebar_bottom {
background: #E3E3E3;
clear: both;
margin-top: -10px;
padding: 0 0 20px 0;
font-size: 0;
}
#sidebar_bottom .sidebar-wrap {
display: inline-block;
*display: inline;
margin: 10px 10px 5px;
padding: 10px;
vertical-align: top;
width: 280px;
zoom: 1;
font-size: 12px;
}
#sidebar_bottom .sidebar-wrap h3 {
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
margin: -10px -10px 10px -10px;
padding: 7px 10px;
width: 100%;
height: auto;
}
#calendar_wrap {
text-align: center;
}
#wp-calendar {
border-collapse: collapse;
margin: 0 auto;
}
#wp-calendar #today {
font-weight: bold;
}
#wp-calendar td,
#wp-calendar th {
padding: 3px 4px;
}
#wp-calendar #prev {
text-align: left;
}
#wp-calendar #next {
text-align: right;
}
.sidebar ol {
list-style-position: outside;
margin-left: 29px;
}
.sidebar ol ol {
list-style-type: lower-alpha;
margin-left: 20px;
}
.sidebar ul ul {
margin-left: 20px;
}
.sidebar ol ol ol {
list-style-type: lower-roman;
}
.sidebar ol li {
line-height: 15px;
padding: 2px 0;
}
.sidebar ul ul li {
border: none;
}
.sidebar ul ul li {
line-height: 15px;
}
.sidebar p {
line-height: 18px;
}
.sidebar p img {
border: 4px solid #dedede;
}
.sidebar ul {
list-style-position: outside;
list-style-type: none;
}
.sidebar ul li {
border-bottom: 1px solid #f5f5f5;
line-height: 15px;
padding: 6px 0;
}
.sidebar ul li img,
.sidebar ol li img {
display: inline;
margin: 0 2px;
vertical-align: middle;
}
.sidebar ul li span.meta-rss {
display: inline-block;
width: 0px;
height: 16px;
}
can you give me a link to your site?
My link is ocbestlegal.com`. I made some changes to styles.css to shrink the length of the Contact Us and How can we help you form but I’m still trying to shrink some of the excess white space out of the right sidebar. There is a lot of extra space between the Name and Email fields (Ninja form). Also a lot of wasted space around the submit button. I want to compress the right side so users won’t have to do so much scrolling.
Thanks so much.
if i can offer my opinion (and obviously you don’t have to take it on board!) i wouldn’t worry about that space, it’s not wasted space it’s breathing space.
if things are compressed to close together it can look cluttered or rushed. people are used to seeing a certain amount of space between form elements which the developer of this widget has likely allowed for; as for scrolling, i didn’t have to do more than a brief touch of my track pad to move the page to reveal the submit button.
you could centre the submit button if you want to use the space a bit more efficiently but otherwise i’d leave the spacing of the form elements as they are. there’s nothing wrong with letting a theme breathe 🙂
as i say, just my opinion.
however, if you really want to reduce the space between the form elements try
div.field-wrap
{
margin-bottom: 10px;
}
and see if that makes a difference.
you could make the submit button cover the full width of the widget area
.ninja-forms-form-wrap input
{
width: 100%;
}
hope that helps. 😀
