Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

Wordpress Themes - WP Forum at BFA » Forum Usage » Forum How-To »

[SOLVED] How to increase distance between words in the sidebars


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old May 10, 2012, 12:37 AM
Marcel
 
13 posts · May 2012
The Netherlands
Dear people,

A few months ago I started reading about At. in wordpress and later tried to make my own website. By searches (google, fora etc) I tried to do as much as possible myself. But now I am having some issues I can't solve. Is someone able to help me out?

My website is: http://www.noordzeeresidence-cadzandbad.nl/

* in the left sidebar I would like to increase the distance between the 6 words in white (starting with home).
* in the right sidebar I would like to increase this space as well (between search field, social media and the search button).
* in addition I would like to change the color from Social Media in the right sidebar from black to white and make smaller capitals from it.

I hope someone can help me with this.

Warm regards, Marcel
  #2  
Old May 10, 2012, 07:20 AM
lmilesw's Avatar
lmilesw
 
10,082 posts · Jul 2009
Central New York State USA
All of what you want is pretty basic CSS. To get the most out of this theme knowing CSS is important. There is much information on w3schools.com. The Firebug extension for Firefox is a tool that you should learn as well.

To give you some examples I just used Firebug to come up with the CSS for your questions as shown below which you would put in ATO>Add HTML/CSS Inserts>CSS Inserts.

The first is to increase the line height between the items in the left sidebar. The second is to add more space under the search form and the third is to change the color of the widget title in the right sidebar to white. The fourth bit of CSS would change all widget titles to white which you cold use instead of the third bit of code as I suspect you always want widget titles to be white.

Now to confuse you even more there are often areas in the theme options where you can make some of the changes you might want. In this case you can go to the Style Widgets area and just change the color of the widget title to white using color: #fff;
HTML Code:
#menu-linker-menu {
    line-height: 30px;
}
#search-3 {
    margin-bottom: 20px;
}
#mr-social-sharing-toolkit-widget-2 .widget-title {
    color: #fff;
}
.widget-title {
    color: #fff;
}
I hope that helps.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.

Last edited by lmilesw; May 10, 2012 at 09:27 AM.
  #3  
Old May 10, 2012, 07:34 AM
Marcel
 
13 posts · May 2012
The Netherlands
That helped me a lot! Thank you very much.

The only thing I noticed, it now added the name of each page in the middle column too. That was not there before.
  #4  
Old May 10, 2012, 07:50 AM
Marcel
 
13 posts · May 2012
The Netherlands
this is what I mean
Attached Thumbnails
Click image for larger version

Name:	Schermafbeelding 2012-05-10 om 15.47.23.jpg
Views:	280
Size:	162.5 KB
ID:	1868  
  #5  
Old May 10, 2012, 09:28 AM
lmilesw's Avatar
lmilesw
 
10,082 posts · Jul 2009
Central New York State USA
I noticed I put an extra curly brace at the end of the CSS code by mistake. Try taking that out and see what happens. I have edited the code to what it should have been.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #6  
Old May 10, 2012, 02:26 PM
Marcel
 
13 posts · May 2012
The Netherlands
Isn't it strange?

I deleted that last curly thing: still the same.

So I removed everything to see if it returned to the original setting again. And what surprises me? No. So there must be something else? Very strange, because I did not change other things.
  #7  
Old May 10, 2012, 02:37 PM
juggledad's Avatar
juggledad
 
22,164 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
page names always show unless you make a change. If you want to hide it, you can use a CSS rule (display: None to hide the element
__________________
Give a person a solution, you fix one issue, teach a person how to solve their problem you enable them forever.
Juggledad | Forum Moderator/Support
  #8  
Old May 10, 2012, 03:10 PM
Marcel
 
13 posts · May 2012
The Netherlands
You wrote I need to use a CSS rule.... ehm .... I am trying to understand:

I go again to: At. theme options
then to: add html/css inserts
under: css inserts it now says:

#menu-linker-menu {
line-height: 40px;
}
#search-3 {
margin-bottom: 20px;
}
.widget-title {
color: #fff;
}

On another forum I read another possibility was to add:
.page-title {
display: none;
}
but this does have no effect. What do you think I should do?
  #9  
Old May 10, 2012, 03:36 PM
juggledad's Avatar
juggledad
 
22,164 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
When you start to want to change things that are not options, you need to start learning CSS and some tools. If you use the FireBug extension of FireFox, you can examine the HTML that displays the title and see what ID's/classes are used so you can construct a CSS Selector and the CSS rule to hide teh element.

A nice CSS tutorial can be found at http://htmldog.com/guides/cssbeginner/
__________________
Give a person a solution, you fix one issue, teach a person how to solve their problem you enable them forever.
Juggledad | Forum Moderator/Support
  #10  
Old May 10, 2012, 03:57 PM
Marcel
 
13 posts · May 2012
The Netherlands
Dear Jd, I will have a look at the website you referred to tomorrow (European time here).

What I don't understand, you wrote: "to want to change things that are not options"

However, there was nothing wrong with the pages and titles. It was the way I wanted. However after applying the css texts (as shown above) I now see the title in the mid-column as well (which was not the case).
  #11  
Old May 10, 2012, 04:05 PM
Marcel
 
13 posts · May 2012
The Netherlands
JD, I found it on:

http://forum.bytesforall.com/showthread.php?t=826

Thank you anyway for the link, I am going to take some lessons !!
  #12  
Old May 10, 2012, 04:07 PM
Marcel
 
13 posts · May 2012
The Netherlands
By the way, this thread can be closed.
I noticed all my questions were related to css.

warm regards

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
The distance between the header and content sariwo Sidebars & Widgets 3 Aug 14, 2011 02:43 AM
Tag Words too large WolfMama Atahualpa 3 Wordpress theme 8 Feb 10, 2011 02:15 PM
[SOLVED] How can I italicize a few words in the headline? PrairieProg Center area post/pages 2 Dec 29, 2009 07:30 PM
3-letter words can now be used in search Flynn Forum How-To 0 Apr 21, 2009 05:37 AM


All times are GMT -6. The time now is 07:48 PM.


Powered by vBulletin® Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.