[jbergen]

Hi,

You can center your logo by modifying style.css, line 899. First, remove float: left;. Then add display: block; and margin: 0 auto;

Here's what style.css, line 899, will look like with those modifications:

.header-image .site-title > a {
    background: url('images/logo.png') no-repeat scroll left center transparent;
    min-height: 164px;
    width: 650px;
    text-align: center;
    margin: 0 auto;
    display: block;
}

You might also want to reduce min-height to have less white space above and below the logo.

I hope that helps!
Jamie

---

Jamie @ Ladebug Studios

[jbergen]

Hi,

Since each menu item has a unique CSS ID, you can target the ID of the Home menu item with different CSS.

You can add this to your style.css to avoid highlighting the Home menu item:

li#menu-item-799 > a {
	background-color: #000;
	color: #FFF;
}

Jamie

---

Jamie @ Ladebug Studios

[jbergen]

Hi,

I'm not seeing the skewing effect you described, but I can offer a way to make the slider smaller and keep it centered. In style.css, line 1000, you can change the max-width to reduce the slider's size. See my CSS modifications below. (I also increased the top margin.)

style.css, line 1000:

.education-pro-home #genesis-responsive-slider {
    border: medium none;
    margin: 25px auto;
    max-width: 1000px;
    padding: 0px;
}

I hope that helps!
Jamie

---

Jamie @ Ladebug Studios

[jbergen]

Hi,

You're right that the primary menu for that theme should be sticky if you set it up like the demo. Did you swap the menu locations as described in the theme setup instructions? (See below)

Note: The Magazine Pro Theme demo swaps the Menu locations using a menu named “Primary Navigation” in the Secondary Navigation location and a menu named “Secondary Navigation” in the Primary Navigation location in order to allow the Search menu to display at the top of the site using Navigation Extras.

The CSS making the Primary Navigation menu sticky is from style.css, line 1402 (position:fixed;):

.nav-primary {
    background-color: #222;
    color: #FFF;
    left: 0px;
    position: fixed;
    top: 0px;
    width: 100%;
    z-index: 999;
}

Feel free to reply with a link to your site if you're still having problems.

Jamie

---

Jamie @ Ladebug Studios

[jbergen]

Hi,

The responsive menu icon (hamburger menu) is typically hidden using the CSS code display: none; until the screen shrinks down to a certain size. To make the hamburger menu always display in the Centric Pro theme, you can adjust style.css, line 1368 as follows:

#responsive-menu-icon {
	cursor: pointer;
	display: block;
	text-align: center;
}

Jamie

---

Jamie @ Ladebug Studios

[jbergen]

I was replying at the same time as Brad. My solution will work, but his suggestion to use the Bootstrap-style column classes is even better because it will make those widgets responsive (i.e., they'll stack on small screens.).

Jamie

---

Jamie @ Ladebug Studios

[jbergen]

Hi,

You just need to add clear: none; to your CSS rules for .home-section-1-right.

I hope that helps!
Jamie

---

Jamie @ Ladebug Studios

[jbergen]

Glad you got it! When strange things happen like that, it's often a caching issue. Sometimes, holding down Shift and pressing the reload button in your browser will take care of things. (I had caching issues on a site I was working on this weekend, and that fixed the problem.)

Jamie

---

Jamie @ Ladebug Studios

[jbergen]

Hi,

At what screen width are you viewing the site? Is the logo getting cut off horizontally or vertically. When I looked yesterday, I saw that it was getting cut off horizontally, which is why I recommended to increase the min-height. Also, if you could provide a screenshot of the problem, that would be helpful.

Jamie

---

Jamie @ Ladebug Studios

[jbergen]

Hi,

I had to deal with this on a photography site I made a while back. Here's a tutorial that I found useful that will hopefully help you get started.

Jamie

---

Jamie @ Ladebug Studios

[jbergen]

Hi,

The line of code that's making the footer background green is style.css, line 1690. Either you can change that as follows:

.parallax-pro-green input[type="button"]:hover, .parallax-pro-green input[type="reset"]:hover, .parallax-pro-green input[type="submit"]:hover, .parallax-pro-green .archive-pagination li a:hover, .parallax-pro-green .archive-pagination .active a, .parallax-pro-green .button:hover, .parallax-pro-green .footer-widgets, .parallax-pro-green .pricing-table a.button:hover {
    background-color: new_color;
}

Or you can just add this new line to style.css:

.footer-widgets {
	background-color: new_color !important;
}

I hope that helps!
Jamie

---

Jamie @ Ladebug Studios

[jbergen]

Hi,

On style.css, line 972, you can adjust the min-height as follows:

.header-image .site-title a {
    float: left;
    min-height: 250px;
    width: 100%;
}

That should make it take up the full height.

Jamie

---

Jamie @ Ladebug Studios

[jbergen]

Good question. It's totally fine to add them both in custom.css. And it looks like you've already done that!

Jamie

---

Jamie @ Ladebug Studios

[jbergen]

Hi Chris,

Okay, got it! Here are the two things to change:

custom.css, line 235, change color:

.comment-content {
    color: #000;
}

style.css, line 1375, add color:
.entry-comments .comment-author {
    margin-bottom: 0px;
    color: #000;
}

And, don't worry. I have zero comments on my blog. 😉 We've all got to start somewhere!

Jamie

---

Jamie @ Ladebug Studios

[jbergen]

Hi,

I'm wondering if the link you put in the header is correct. What if you tried this:

<link rel='stylesheet' type='text/css' href='http://www.fffdesignglobal.org/newfff/wp-content/themes/parallax-pro/custom.css' media="all" />

The reason I suggest this is because, when I go to the style editor for http://www.fffdesignglobal.org/newfff/, a custom.css does appear, but it's not CSS. It appears to be the code for http://piccianeri.com/newsite/.

If that doesn't work, do keep in mind that making a separate custom.css file isn't absolutely critical. I used to think that making a custom.css was the best way to modify a child theme, but Susan recently responded to a post and explained that it's actually okay to simply modify the child theme's style.css directly.

Jamie

---

Jamie @ Ladebug Studios

[jbergen]

Hi,

I'd be happy to help. Can you point me to a post on your site where you're having the issue? I couldn't find the problem by clicking on the latest few posts.

Jamie

---

Jamie @ Ladebug Studios

[jbergen]

Hi,

I just looked at the site on my computer and iPad, and the phone number in the header was black in every instance. Have you already resolved the problem?

In case it's still a problem for you, it looks like the white came from style.css, line 1146:

.site-header .widget-area a {
    color: #FFF;
}

But on my computer, that appears to be successfully overridden by your inline styling.

I hope that helps!
Jamie

---

Jamie @ Ladebug Studios

[jbergen]

Great! I'm glad you got it working.
Jamie

---

Jamie @ Ladebug Studios

[jbergen]

Hi,

I see your problem. It's happening because there is a top margin set on the site tagline. All you have to do is remove that CSS rule in your style.css file, line 1767.

Here's what it looks like now:

.minimum .site-tagline {
	margin-top: 200px;
	margin-top: 20rem;
}

When I removed it, the site looked good at iPad portrait screen widths.

I hope that helps!
Jamie

---

Jamie @ Ladebug Studios

[jbergen]

Hi,

This is definitely possible. If you want to make all the buttons on the homepage a different color, you can add something like this to the child theme's style.css file:

.home .button {
    background-color: new_color_here;
}

You might need to add !important to override the current theme CSS settings like so:

.home .button {
    background-color: new_color_here !important;
}

If you want to target a specific button, you can use the CSS ID associated with that widget. For example, the first button would be:

#text-12 .button {
    background-color: new_color_here;
}

I hope that helps!
Jamie

---

Jamie @ Ladebug Studios

[Author]

Posts