[jbergen]

Hi,

I looked into plugins or other non-coding options to do this, and I didn't find anything. Genesis Simple Edits doesn't let you change the Read More text link, and Genesis Simple Hooks lets you change actions but not filters (which is what you need here).

If you're really desperate to change your link text, maybe following this detailed tutorial (steps 1 and 2) will help.

Jamie

---

Jamie @ Ladebug Studios

[jbergen]

Hi,

You can fix the issue by changing in the inline style width: 650px; to max-width: 650px;.

Jamie

---

Jamie @ Ladebug Studios

[jbergen]

Hi Gio,

Have you tried the snippet on this page?

Jamie

---

Jamie @ Ladebug Studios

[jbergen]

I played around with it a little bit, but I couldn't find an easy way to make the huge logo resize and look good on a small device. Even on a tablet, the logo would get clipped. I've worked with this theme before, and I recall the setup instructions warning against using a background image with a particular focal point.

I agree with your idea to put the logo at the top and use the home background image area for something else. From a design perspective, it also seems like a good idea to reserve all of that "above the fold" real estate for something other than a giant logo.

Jamie

---

Jamie @ Ladebug Studios

[jbergen]

Hi,

I tested your site on my Mac both in Firefox and Chrome, and the sidebars look exactly the same. Are you still having this problem? If so, what version of Chrome are you using?

Jamie

---

Jamie @ Ladebug Studios

[jbergen]

Tony's answer is better than mine. It does a better job of specifically targeting your images.
Jamie

---

Jamie @ Ladebug Studios

[jbergen]

Hi,

I think what you need to do is add clear: both; to your floating images. You can add this rule to style.css, line 734 like so:

a.alignleft, img.alignleft, .wp-caption.alignleft {
    margin: 0px 24px 24px 0px;
    clear: both;
}

That will give you this:

Jamie

---

Jamie @ Ladebug Studios

[jbergen]

The code you posted looks right. But what's funny is that when I use my developer tools to look at your stylesheets, I don't see style.css. I only see a file named M9DPTS0pytctKMrXLy6pzEnVMdRPzs8rSUwu0U3LL8rVNdfPzEvOKU1JLdZPLi6GqCkGAA.css that appears to have minified CSS. That's what I had added the code to and saw the changes. So the problem may be that there's something wrong with your style.css. Can you check that it's in your child theme's folder?

Jamie

---

Jamie @ Ladebug Studios

[jbergen]

Hi Igor,

When I copy and paste the code I provided into your stylesheet (writing in "Times New Roman" for the font), I can get a post to look like this:

If you're not comfortable making code changes, I would recommend trying out Design Palette Pro, which lets you customize your theme without writing code. I've not used it, but I've heard good things about it.

Jamie

---

Jamie @ Ladebug Studios

[jbergen]

Hi,

To increase the size and change the font for the post titles, you can add this custom CSS:

.post h2 {
    font-size: 30px;
    font-family: "put new font here";
}

To remove the underline from the titles and links, you can add this rule:

.post h2 a,
.post a {
  text-decoration: none;
}

Jamie

---

Jamie @ Ladebug Studios

[jbergen]

Hi,

I'm not able to access your site, but my first thought is that you might need to add !important to override an instruction in a stylesheet that is loaded after your custom.css file.

For example, you would write:

.site-header .widget-area,
.site-header .widget-area a {
    color: #fff !important;
}

Let me know if that works.
Jamie

---

Jamie @ Ladebug Studios

[jbergen]

I'm not sure how easy that would be to make the slider 1140px wide and get the images centered. You can make it a little wider by setting max-width of #genesis-responsive-slider to 960px. Maybe if you loaded wider images, you could get it to display wider.

Great question about making changes to style.css. Yes, if you update your plugin, the changes you make to its stylesheet will be lost. (Sorry if I implied earlier that that was a good idea - I certainly didn't mean to!) One option is to add your changes to the theme's style.css file and use !important to override the plugin styling. For example, you could add this code to your theme's style.css:

#genesis-responsive-slider {
	max-width: 960px !important;
}

However, if you ever change or update your theme, you'll lose anything you add to its style.css. So the safest option is to make your own custom CSS file (see this video for a tutorial).

I hope that helps,
Jamie

---

Jamie @ Ladebug Studios

[jbergen]

Hi!
You modified the CSS rule correctly, but there is a curly bracket at the beginning of your style.css file that is causing it to be ignored.

Current style.css:

/* Genesis Slider
------------------------------------------------------------ */

}

#genesis-responsive-slider {
    background-color: #FFF;
    border: 10px solid #EEE;
    margin: 0px auto;
    padding: 10px;
    position: relative;
    max-width: 920px;
}

Remove the curly bracket so it looks like this, and the image will be centered:

/* Genesis Slider
------------------------------------------------------------ */

#genesis-responsive-slider {
    background-color: #FFF;
    border: 10px solid #EEE;
    margin: 0px auto;
    padding: 10px;
    position: relative;
    max-width: 920px;
}

Jamie

---

Jamie @ Ladebug Studios

[jbergen]

Hi,

The CSS rule that's making the dropdown background white is on style.css, line 1139. You just have to replace white with your color of choice:

.site-header .sub-menu {
    background-color: _____;
}

To change the dropdown menu items to another color, you'll need to override style.css, line 1705. You can't just change that rule because it applies to more than just the dropdown menu items. However, you can add something like this below that rule:

.genesis-nav-menu .sub-menu a {
    color: ____;
}

Be aware that this will only change the color of the text when you're not hovering.

I hope that helps!
Jamie

---

Jamie @ Ladebug Studios

[jbergen]

Happy to help! To avoid having a blank Animals page, you can just create a menu (under Appearance -> Menus) that is a link. The URL will be # and the link text will be Animals. That way, nothing will happen when somebody clicks on Animals.

Jamie

---

Jamie @ Ladebug Studios

[jbergen]

That's certainly possible. The specific CSS will depend on the HTML structure of your menus, but here's a general guideline:

1) For making the "Animals" menu item change colors on hover, you'll need something like this:

.genesis-nav-menu > li.menu-item > a:hover {
	color: ... ;
}

(Note that, if it didn't have submenus, you could also add this selector: .genesis-nav-menu .current-menu-item > a to keep it that color when selected.)

2) For keeping the "Animals" menu item the "selected" color when you're on one of its submenus, you'll need:

.genesis-nav-menu .current-menu-ancestor > a {
	color: ... ;
}

3) Finally, for keeping the "Animals" menu the "selected" color when your just hovering over one of its submenus (before you've actually selected it), here is a link to a tutorial that will help you do that.

I hope that helps!
Jamie

---

Jamie @ Ladebug Studios

[jbergen]

Hi,

I believe the Genesis Style Trump plugin would do just that.

Jamie

---

Jamie @ Ladebug Studios

[jbergen]

Hi,

Since your images are 920px wide, you just need to set #genesis-responsive-slider to max-width: 920px;. Here's what the CSS will look like (style.css, line 4):

#genesis-responsive-slider {
    background-color: #FFF;
    border: 10px solid #EEE;
    margin: 0px auto;
    padding: 10px;
    position: relative;
    max-width: 920px;
}

Jamie

---

Jamie @ Ladebug Studios

[jbergen]

I do see the lighter blue. It was still black in the browser I had used to initially view the page, but it was the lighter blue when I looked at it in a different, "fresh" browser. I was able to get the lighter blue in my original browser by forcing a refresh (Command-R on a Mac).

Jamie

---

Jamie @ Ladebug Studios

[jbergen]

Hi,

There are a couple of CSS tweaks you can make to minimize that space. First, you can reduce the padding below the home-top wrap as shown below (note the change to the padding on the last line):

style.css, line 1269

.home-top .wrap {
    color: #FFF;
    font-family: "Spinnaker",sans-serif;
    text-align: center;
    padding: 15% 0 0;
}

That will give you this:

If you want to tighten it even more, you can make this change:

style.css, line 1294

.home-middle {
    padding: 5% 0px 5%;
}

And get this:

I hope that helps!
Jamie

---

Jamie @ Ladebug Studios

[Author]

Posts