Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Forum How-To (http://forum.bytesforall.com/forumdisplay.php?f=9)
-   -   [SOLVED] How to increase distance between words in the sidebars (http://forum.bytesforall.com/showthread.php?t=17515)

Marcel May 10, 2012 12:37 AM

[SOLVED] How to increase distance between words in the sidebars
 
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

lmilesw May 10, 2012 07:20 AM

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.

Marcel May 10, 2012 07:34 AM

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.

Marcel May 10, 2012 07:50 AM

1 Attachment(s)
this is what I mean

lmilesw May 10, 2012 09:28 AM

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.

Marcel May 10, 2012 02:26 PM

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.

juggledad May 10, 2012 02:37 PM

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

Marcel May 10, 2012 03:10 PM

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?

juggledad May 10, 2012 03:36 PM

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/

Marcel May 10, 2012 03:57 PM

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).

Marcel May 10, 2012 04:05 PM

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 !!

Marcel May 10, 2012 04:07 PM

By the way, this thread can be closed.
I noticed all my questions were related to css.

warm regards:)


All times are GMT -6. The time now is 02:27 AM.

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