How to remove these blocks from Cafe Pro

[mike]

Love the theme, but I need to remove these blocks. Obviously for the title, I know there is a built-in option to replace with a logo, but for the other background image sections, any tips you can provide is greatly appreciated. Thanks!

http://www.901sprinkler.com

[mike]

Anyone? 😉

[carasmo]

Did you go through the theme setup: http://my.studiopress.com/setup/cafe-pro-theme/

I don't have the time to install this theme, but I will assume that you go to Appearance > Widgets and you'll see Home page X number of widget sections then choose the one you want and remove the content from that area and it won't show up. If you want to keep the content but not use it, drag it to the Inactive area WAY down on the page.

---

Genesis Theme Customization and Help

[mike]

Thanks, I want the widget area with the background images, I am simply trying to remove the text block from appearing and instead replace with text over the image. In other words, mimic what goes on in the title where you can replace with a logo, except just replacing with text.

[carasmo]

The theme is set up so you can use a background image in that area and the text goes inside white background divs so that you can read the text. How will you adjust this so you can read the text on an image? The white background on the widgets is in your style.css file. Use a code editor and FTP for the best results.

Find line 1418

.image-section .widget {
  background-color: #ffffff; /* change to transparent without the hash tag however your text won't be readable */
  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
}

---

Genesis Theme Customization and Help

[Sanaa]

Hi Mike,

Did you figure this out? You don't actually have to go into the code. All you have to do is replace those blocks with your own content. If you don't have anything in the widget area it automatically pulls content from either your blogs, categories, or pages --if you don't have content there yet it pulls from the default/demo content. Its just a fake placeholder. You can go into the widget area and delete what the demo content from that section. The image will disappear until you add a widget then it will pop back up.

Sanaa

[mike]

Thanks Sanaa - if I remove the widgets, then the images show with no content overlaid, which is fine. I originally planned to try and place text over the top of some the images, so had considered changing the code to remove this default action.

I actually like this approach better - one of the sites on the cafe pro showcase - it looks like they swapped the code to show in the solid color areas in between the images instead. If anyone can point me to the right code and what to look for, it would be appreciated! I'll figure it out on a test site, just hoping to get a jump on it. Thanks again-

[Sanaa]

Hey Mike,

That's also equally easy. Just go back into the widget area, scroll down on the left hand side, grab the text widget, put it in the same widget box you removed the demo text in and type in your text. In sections 3 & 5 it'll show up with the white background tag and in sections 2 & 4, it'll show up without the white background. These are just customizations, no code needed.

It's listed in the theme setup instructions. http://my.studiopress.com/setup/cafe-pro-theme/home-page-setup/home-page-layout/

You know you can can also change those big pictures in less than 1 minute to something that is particular to your site, right?

Sanaa

[Sanaa]

Oh. I misunderstood you. If you want to get rid of the white background altogether you need to go to the area in the CSS that Carasmo above pointed you to.

.image-section . widget
backround-color: #FFF; NOTE: I have found that all you have to do is remove the semi-colon and the action will be incomplete (that way later if you decide to change your mind, you don't have to look for or find what code was there before).

Then you'll need to also change
.image-section widget-wrap
border: 1px solid #000; Again, just remove the semi-colon

BUT HERE'S THE PROBLEM: It's going to make these changes for ALL of your widgets that call up the white background. If that's what you want then, np.

Your pictures are busy though, so you are going to have to increase the font size and change the font color to make it easy to read. As you can see in the pic, it's not easy to read as it stands.

You should download the free Firefox add-on, Firebug because it lets you highlight the area you want to change, tells you where in the css it's located, and lets you play with changes before you make them in the editor. That's how I was able to remove the background & border from the pic above on your webpage. Firebug makes changes much easier and less time consuming.

Hope this helps,
Sanaa

[faiekg]

Just edit the background pic with the text on it ? Suppose a cheap way but it will work 🙂

[mike]

If it helps, the end result would be like this site where the CSS was edited to achieve this look. It also appears that their logo area is much larger than the default size - is that an easy fix as well?

Screenshot clip from that site:

[Author]

Posts