[jbergen]

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

[jbergen]

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

[jbergen]

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

[jbergen]

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

[jbergen]

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

[jbergen]

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:

to this:

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

Jamie

---

Jamie @ Ladebug Studios

[jbergen]

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

[jbergen]

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

[jbergen]

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

[jbergen]

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

[jbergen]

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

[jbergen]

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

[jbergen]

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

[jbergen]

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

[jbergen]

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

[jbergen]

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

[jbergen]

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

[jbergen]

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:

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

[jbergen]

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

[jbergen]

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