Forum Replies Created
-
AuthorPosts
-
jbergen
MemberHi,
You can center your logo by modifying style.css, line 899. First, remove
float: left;
. Then adddisplay: block;
andmargin: 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
MemberHi,
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
September 27, 2014 at 5:46 pm in reply to: Genesis Responsive Slider and Education Pro Theme #126024jbergen
MemberHi,
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
MemberHi,
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
MemberHi,
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
MemberI 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
MemberHi,
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
MemberGlad 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
MemberHi,
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
MemberHi,
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
MemberHi,
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
MemberHi,
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
MemberGood 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
MemberHi 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
MemberHi,
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
MemberHi,
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
MemberHi,
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
Memberjbergen
MemberHi,
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
MemberHi,
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
-
AuthorPosts