• 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

jbergen

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
  • Profile
  • Topics Started
  • Replies Created
  • Engagements
  • Favorites

Forum Replies Created

Viewing 20 posts - 1 through 20 (of 147 total)
1 2 3 … 6 7 8 →
  • Author
    Posts
  • October 16, 2014 at 7:21 pm in reply to: Header and footer "fall short" when responsive #128070
    jbergen
    Member

    Hi,

    The issue with the header and footer being too wide and causing a horizontal scroll bar to appear at widths <1023px is caused by the margin-left: 5%; rule in style.css, line 1718.

    For reference, here is line 1718 (media query for max-width 1023px):

    .header-image .site-header .wrap {
        background-position: left center; 
        margin-left: 5%;
    }

    My first thought was to remove that 5% left margin and then reposition the logo to give it left padding another way, but that proved a little difficult.

    I think the best fix will be to add the following code in your style.css media queries just after the rule on line 1688.

    In style.css after line 1688, add:

    .header-image .site-header .wrap {
        width: 95%;
    }

    This will basically compensate for the 5% left margin in the header by limiting its remaining width to 95%.

    I hope that helps!
    Jamie


    Jamie @ Ladebug Studios

    October 15, 2014 at 11:01 pm in reply to: Executive Theme – Text Link Color #127955
    jbergen
    Member

    Hi,

    The hypertext links are given an "a" tag in HTML, so you would just need to change the color in the first portion of your CSS (found in style.css, line 2049):

    .executive-pro-teal a,
    .executive-pro-teal .entry-title a:hover,
    .executive-pro-teal .footer-widgets .entry-title a:hover {
        color: #4be0d4; ***change this line***
    }

    However, if you want to only change the link color in the widget on the right side, you would need to write a more specific CSS rule for that. For example, you could add this to your child theme's style.css file:

     .menu-student-menu-container a {
    	color: new-color-here;
    }

    I hope that helps!
    Jamie


    Jamie @ Ladebug Studios

    October 11, 2014 at 8:34 pm in reply to: how to make the header width more in Foodie Pro #127522
    jbergen
    Member

    Where did you add your CSS? I can't seem to find it in the child theme's style.css file.

    And I would recommend to change your functions.php like the tutorial says. It's really not too bad. You just have to go into the folder for the child theme and open functions.php. Then you'll just find this:

    //* Add support for custom header.
    add_theme_support( 'genesis-custom-header', array('width' => 400,
    'height' => 170
    )
    );

    and replace the 400 with a 600. Let me know if you need help.

    Jamie


    Jamie @ Ladebug Studios

    October 11, 2014 at 7:45 pm in reply to: how to make the header width more in Foodie Pro #127520
    jbergen
    Member

    I was actually trying to find that code in the theme as well, but it's a bit strange because it's actually in an inline stylesheet. Fortunately, I found this tutorial that describes how to change the header size. So hopefully that should solve the problem.

    Feel free to let me know once you've resized the logo because I think there still might be issues getting it to look good on smaller devices. But I can probably figure something out once you've got your logo resized.

    Jamie


    Jamie @ Ladebug Studios

    October 11, 2014 at 7:18 pm in reply to: how to make the header width more in Foodie Pro #127515
    jbergen
    Member

    Hi,

    I think it would work to use a larger logo (e.g., 600x170). I used my browser's developer tools to swap your logo for a wider version of the logo, and there was no problem. Just for reference, the CSS code that displays your logo is:

    .site-header {
        background: url('http://www.organiquelove.com/wp-content/uploads/2014/10/Organique-Love-Logo-3.png') no-repeat scroll 0% 0% transparent !important;
    }

    So, in theory, swapping that media file with a larger image of your logo should work.

    Another issue you'll need to address is how the logo will shrink on small screens. To make sure it fits on the screen, you can write a media query (maybe for max-width 600px) that tells the logo to fill 100% of the screen width. It would look like this:

    @media only screen and (max-width: 600px) {
        .site-header {
            background-size: 100%;
        }
    }

    I hope that helps!
    Jamie


    Jamie @ Ladebug Studios

    October 11, 2014 at 3:23 pm in reply to: Header resizing and black line #127506
    jbergen
    Member

    Glad I could help with the black line.

    For the header image, I'm actually suggesting to crop horizontally - not vertically. The code changes I suggested in my previous post would change the display from this:

    Before removing whitespace

    to this:

    Whitespace removed

    If you were to crop the image more tightly horizontally, you would get this:

    Horizontal cropping

    Jamie


    Jamie @ Ladebug Studios

    October 11, 2014 at 2:32 pm in reply to: Header resizing and black line #127495
    jbergen
    Member

    Hi,

    I'm going to go through your questions in reverse order:

    2) Do you want to remove the black line above the header? If so, you can go to your child theme's style.css file on line 448 and remove line 450: border-top: 5px solid #222;. So it will look like this:

    .site-container {
    background-color: #fff;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
    margin: 40px auto;
    padding-left: 60px;
    padding-right: 60px;
    max-width: 1200px;
    }

    Or, if you still want the border but you want it thinner, you can change line 450 to something like: border-top: 2px solid #222;

    1) To improve how the header looks on an iPhone, you can reduce the padding above and below and also reduce its height so that there's not so much white space.

    First, remove style.css, line 2006

    The code to remove looks like this:

    .site-header {
    	padding: 40px 0;
    }

    And in the same place, add:

    .header-image .site-title > a {
        height: 150px;
    }

    If you want the header image to look even bigger on an iPhone screen, you might want to go back and crop the image a little more tightly.

    I hope that helps!
    Jamie


    Jamie @ Ladebug Studios

    October 11, 2014 at 2:11 pm in reply to: Audio not playing in Firefox #127493
    jbergen
    Member

    Hi,

    Are you using an audio embed shortcode with the Jetpack plugin? If so, are you using the latest version of Jetpack? This forum thread discusses a similar issue, but it appears to have been resolved.

    Jamie


    Jamie @ Ladebug Studios

    October 9, 2014 at 1:03 pm in reply to: Genesis slider does not fit widget space #127235
    jbergen
    Member

    You don't actually want to put it at the very end of your child theme's style.css. Currently, it's actually inside of a media query (which is special CSS code that only applies when the screen is a certain width). That's why you don't see any changes. I'd remove all of it from there and paste it on line 878, which is a section of the style.css where plugins are styled. (There's no "correct" place to put it, but it just makes sense to put it with other plugins.)

    Jamie


    Jamie @ Ladebug Studios

    October 9, 2014 at 12:06 pm in reply to: Genesis slider does not fit widget space #127223
    jbergen
    Member

    Hi!

    Sorry it took me a while. Anyway, try putting the following CSS into your child theme's style.css. I think it should make the slider look much better.

    Jamie

    .slide-image {
    	display: none;
    }
    .slide-excerpt {
    	position: relative !important;
    	margin: 0 10px !important;
    }
    .flexslider {
    	margin: 0 10px !important;
    	max-height: 400px;
    }
    .slide-excerpt-border {
    	border: none !important;
    	padding: 0px !important;
    	margin: 0 !important;
    	margin-right: 20px !important;
    }
    
    .flexslider .slides > li {
    	margin-top: -20px;
    }
    .genesis_responsive_slider .sd-title, 
    .genesis_responsive_slider .sd-button, 
    .genesis_responsive_slider .sd-content {
    	display:none !important;
    }
    .genesis_responsive_slider {
    	margin-left: 10px;
    	margin-right: 10px;
    }

    Jamie @ Ladebug Studios

    October 8, 2014 at 11:35 am in reply to: Social Icons in Header with Text #127125
    jbergen
    Member

    Hi,

    You can add the following code to the style.css of your child theme to get your social icons to appear below the text on the right side of the header.

    .simple-social-icons {
    	float: right;
    }

    Then you'll probably want to adjust their positioning again in your max-width 1023px media query.

    I hope that helps!
    Jamie


    Jamie @ Ladebug Studios

    October 7, 2014 at 12:05 pm in reply to: Genesis slider does not fit widget space #127005
    jbergen
    Member

    Hi,

    You'll want to make all of your CSS changes in your child theme's style.css file, which is found in the root of /wp-content/themes/streamline-pro (just like you said). To be sure you're in the right file, you can check that it has the following at the top:

    /*
    	Theme Name: Streamline Pro Theme
    	Theme URI: http://my.studiopress.com/themes/streamline/
    	Description: A mobile responsive and HTML5 theme built for the Genesis Framework.
    	Author: StudioPress
    	Author URI: http://www.studiopress.com/
    	Version: 3.0.1
    

    I would recommend moving the following modification you made to the Genesis slider's CSS sheet (see below) to your child theme stylesheet because there are likely to be updates to the plugin, and that will remove your customizations. (Updates to child themes are much less likely, and they don't automatically update, so it's generally safe to add custom CSS to the child theme's custom.css file.)

    html > body .slide-excerpt-border {
        margin: 0 !important;
    }

    I'm not sure where the other modification is (the one below), but that should also go in the child theme's style.css.

    .slide-excerpt {
    	margin: 0 !important;
    }

    When I added those two modifications, the slider was centered, although there was still a sizable gray border around it. If you want to remove all of that gray border space, you can remove the 40px padding that's set on style.css, line 1526. Then you'll need to change the settings of your slider to make each slide fill the entire width.

    Jamie


    Jamie @ Ladebug Studios

    October 7, 2014 at 10:37 am in reply to: homepage navigation to older posts #126990
    jbergen
    Member

    Hi again,

    Another option if you don't want the "Next/Previous" text to be white is to change .archive-pagination li a to .archive-pagination a on line 1570 of style.css. That will give you white boxes with the next and previous text inside.

    Here's what it should look like after you've changed it:

    style.css of child theme, line 1570:

    .archive-pagination a {
    	background-color: #fff;
    	box-shadow: 3px 3px rgba(70, 70, 70, 0.05);
    	color: #444;
    	cursor: pointer;
    	display: inline-block;
    	font-size: 14px;
    	padding: 6px 12px;
    }

    Jamie


    Jamie @ Ladebug Studios

    October 7, 2014 at 10:29 am in reply to: homepage navigation to older posts #126988
    jbergen
    Member

    Hi there,

    Did you recently change the color of your links? The pagination arrow is actually there, but it's the exact same color as the background. If you add the code below to your style.css, it should show up again.

    .archive-pagination a {
    	color: #fff;
    }

    Jamie


    Jamie @ Ladebug Studios

    October 7, 2014 at 1:58 am in reply to: Google Custom Search Styling #126969
    jbergen
    Member

    Hi,

    I took a look at your custom search box and the CSS, and I don't think there's an easy CSS fix. The best option may be to go back to Google and create a new custom search engine in which you specify your styling preferences. Here is a tutorial that explains how to do that for a Genesis theme. And here is a related tutorial that may also be helpful. Then hopefully you can incorporate the new custom search box and it will have the styling you want.

    I hope that helps! Feel free to follow up if you're having trouble.
    Jamie


    Jamie @ Ladebug Studios

    October 5, 2014 at 3:00 pm in reply to: Parallax pro responsive issues #126854
    jbergen
    Member

    One more thing. The menu seems to pull to the left when the screen shrinks below 1140px. To fix that, you can remove style.css, line 1829:

    .site-header .widget-area {
        width: 560px;
    }

    Jamie


    Jamie @ Ladebug Studios

    October 5, 2014 at 2:48 pm in reply to: Parallax pro responsive issues #126852
    jbergen
    Member

    Hi,

    You can make the responsive menu icon visible by changing style.css, line 1133 as follows:

    .responsive-menu-icon::before {
        color: #383838;  /* this is the new color */
        content: "\f333";
        font: normal 24px/1 'dashicons';
        margin: 0 auto;
    }

    Then to prevent the selected menu item from being white on a white background and to center the menu items, you can add this after style.css, line 2047:

    .site-header .genesis-nav-menu.responsive-menu .current-menu-item > a,
    .site-header .genesis-nav-menu.responsive-menu > li:hover > a,
    .genesis-nav-menu a {
        color: #383838;
        text-align: center;
    }

    Finally, to keep the entry titles centered, you can remove width: 700px; from style.css, line 717:

    .entry-title {
        font-family: Didot,"Didot LT STD","Hoefler Text",Garamond,"Times New Roman",serif;
        font-size: 28px;
        font-weight: 600;
        margin-top: 80px;
        width: 700px; /* remove this */
    }

    I hope that helps!
    Jamie


    Jamie @ Ladebug Studios

    October 5, 2014 at 12:15 pm in reply to: Help Styling Pagination #126841
    jbergen
    Member

    Hi,

    The reason the pagination links for your single post entry don't look like those for your post archive is because the CSS used to style the archive pagination doesn't apply to entry pagination. A quick fix would be to add the following CSS rules that apply to entry pagination to your child theme's style.css file. Here's the code you can add below the existing .archive-pagination rules in your child theme's style.css file, line 1145:

    .entry-pagination {
    	display: inline;
    }
    
    .entry-pagination a {
    	background-color: #5C98B9;
    	color: #fff !important;
    	cursor: pointer;
    	display: inline-block;
    	font-size: 16px;
    	padding: 8px 12px;
    }
    
    .entry-pagination a:hover,
    .entry-pagination .active a {
    	background-color: #BD363F;
    }

    This is what that will look like:

    styled entry pagination

    If you want to make it look even closer to the post archive pagination, you might want to look into Styling Page-Links in the codex.

    I hope that helps!
    Jamie


    Jamie @ Ladebug Studios

    October 4, 2014 at 2:32 pm in reply to: make text widget a link #126772
    jbergen
    Member

    Hi,

    In general, you would want to wrap all of the text in the widget inside the HTML a tag. Then, you would want to make sure you have a CSS rule that specifies the color for the text on hover.

    Example:

    a:hover {
        color: hover_color_here;
    } 

    However, an issue arises when you try to add HTML tags to the title of your widget. When you try to save it, WordPress strips out any HTML tags from the title.

    There are a couple of options to deal with this:

    1) Don't use the text widget's title area, and instead include your title as part of the "main body" portion of the text widget. You can surround your title with HTML heading tags, and wrap the entire contents of the text widget's "main body" with the a tag.

    2) There are various workarounds to get WordPress to display your widget title as a link. I found several in a quick Google search.

    I hope that helps! Let me know if you'd like to follow up about a specific strategy to make this work.

    Jamie


    Jamie @ Ladebug Studios

    October 3, 2014 at 7:12 pm in reply to: Genesis slider does not fit widget space #126717
    jbergen
    Member

    Hi,

    The first thing that can improve the slider's positioning is to remove the 10px margin set by the CSS for the genesis slider.

    This is where the margin is set:

    style.css, line 42 (CSS file for genesis slider)

    html > body .slide-excerpt-border {
        background: none repeat scroll 0% 0% transparent;
        border: 1px solid #DDD;
        display: inline;
        float: left;
        margin: 10px; ***want to change this ***
        padding: 14px;
        position: relative;
        z-index: 8;
    }

    To override this, you can add this to the child theme's style.css:

    html > body .slide-excerpt-border {
        margin: 0 !important;
    }

    However, it still won't be exactly centered. To fix that, you can add this to your child theme's style.css:

    .slide-excerpt {
    	margin: 0 !important;
    }

    And that should at least get everything to fit properly.

    I hope that helps!
    Jamie


    Jamie @ Ladebug Studios

  • Author
    Posts
Viewing 20 posts - 1 through 20 (of 147 total)
1 2 3 … 6 7 8 →

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