widgets and text

[Ron King]

Hi Andre,

I used your tutorial to set up the home page for four columns, and everything worked great. I have some text I would like to show above the columns. Currently it only appears under the columns. I’m using the “page widgets full width” template. I also tried to include a links to existing pages from the text within the columns, It works except the links open new windows, and I’m not figuring out how to not have it do that.

Thanks, Ron

[Sushil Adhikari]

Hi Ron… might be best if you can post a link to your front page and I can take a look. You did mention though that you are using the widgets only template which means no content area is available, so all content will have to be in widgets. You can add this to a widget position if it exists above the columns area, but it depends on what widget positions you used for the columns.

A reminder of widget positions: http://demo.styledthemes.com/celestial-reloaded/widget-layout/

Links opening a new window or tab, means the link is being added with a target=”_blank”, so with your link, make sure the target is not used or at least change the _blank to _self

[Ron King]

Here’s the link. http://spidergallery.com/wordpress_a/

[Sushil Adhikari]

Thanks… so it does look like you are using a template with the content and not the widgets only. So you have a couple choices here…

Move your top 4 widgets into the Bottom 1, 2, 3, and 4 positions, change the background of this Bottom widget group to white. Then your content will be above. The other option is to use just the widgets only template, then put your content part into a widget and publish it to the Top or Bottom inset positions.

I also noticed that you do have the target=”_blank” on your links, so change that to _self or remove the target part altogether.

[Ron King]

Andre, I tried both methods.
1. I first tried switching to the bottom widgets, but the text was still under the boxes. I would prefer this method if there was a way.
2. Changing to the widgets only template did work, but it added extra space above the image (where the title would be, and I’m not using a title) and I couldn’t figure out how to change the background to white. The text also appeared smaller. Maybe that was an illusion, but it seemed harder to read.
I also wanted to center the title in the Top Inset, but saw no way to do it.

[Sushil Adhikari]

Can you move the 4 widgets into the bottom 1, 2, 3, and 4 and then let me know when you’ve done that? Something doesn’t sound right here but by seeing this live, I can determine what is happening.
Thanks

[Ron King]

Yes, I can. Which page template do you want me to use?

[Sushil Adhikari]

The one you want to use…or I should say that you feel was the closest to what you are wanting to achieve.

[Ron King]

While waiting for you I’ve been toying with the page. It’s now set with the “Page Widgets Full Width” template. I removed the Top Inset Widget. The text I want now shoes properly at the top of the page, but the boxes, using the Bottom Insets are way down the page with all the gray stuff around them.

[Ron King]

I got rid of a lot of the space between the text and boxes, so it’s becoming more like what I’m after. I would still like to get the text and boxes closer to one another if at all possible. Also, is there any way I can more the text part that has “My Hands … at work and play” a little higher on the page?

[Sushil Adhikari]

I just setup a test site on my computer and grabbed your content for testing as well. So what you have is what I have, but to make some adjustments, you have to do some custom CSS. First, lets do this…

Change the Bottom area grey to white by going to Appearance >> Customize >> Colours >> Bottom Widgets Background

Custom CSS in your child theme (which you are apparently using), for removing the extra top space in the Bottom Widgets container with:

#bottom-group {padding-top: 0;} 

Then, to take some space off the content area, you would need to adjust your content container padding as well, but please note this will affect all pages, so I am not sure if you want to do that, but if you are OK with that, you can do this:

#content-wrapper {padding-bottom: 20px;} 

**or whatever you want for space.

Another possibility is to bring the bottom widget area further up with a negative margin. I’m not sure how this will work out overall, but instead of adjusting the padding of the content wrapper, you would do this:

#bottom-group {
margin-top: -40px;
}

[Sushil Adhikari]

Also, is there any way I can more the text part that has “My Hands … at work and play” a little higher on the page?

The custom padding on the #content-wrapper container will bring it up further, but again, adjustment to the container will affect other pages.

[Sushil Adhikari]

Actually, instead, you can customize the content wrapper padding just for the home page instead of affecting other pages too (if you prefer this of course). So you may want to just simply do this:

body.home #content-wrapper {
      padding: 0;
}
#bottom-group {
 padding-top: 0;
}

That could be all that you need to do…plus use the customizer option settings to change the bottom widget colour to white.

[Ron King]

It all works perfectly now. Thank you so much. Your support is the best. Ron

[Author]

Posts