• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

How to remove these blocks from Cafe Pro

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › General Discussion › How to remove these blocks from Cafe Pro

This topic is: not resolved

Tagged: cafe pro

  • This topic has 10 replies, 4 voices, and was last updated 7 years, 5 months ago by mike.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • April 7, 2016 at 5:22 am #183108
    mike
    Participant

    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
    April 8, 2016 at 6:36 am #183159
    mike
    Participant

    Anyone? 😉

    April 8, 2016 at 7:22 am #183163
    carasmo
    Participant

    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

    April 8, 2016 at 7:24 am #183164
    mike
    Participant

    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.

    April 8, 2016 at 7:41 am #183166
    carasmo
    Participant

    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

    April 23, 2016 at 3:28 am #184243
    Sanaa
    Member

    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

    April 23, 2016 at 6:40 am #184248
    mike
    Participant

    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-

    April 23, 2016 at 11:17 am #184261
    Sanaa
    Member

    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

    April 23, 2016 at 11:56 am #184262
    Sanaa
    Member

    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

    April 24, 2016 at 2:32 pm #184336
    faiekg
    Member

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

    April 28, 2016 at 5:04 am #184593
    mike
    Participant

    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
Viewing 11 posts - 1 through 11 (of 11 total)
  • The forum ‘General Discussion’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble