Forum Replies Created
-
Posts
-
You'll need to modify your stylesheet. Try the following css...
Line 392
#nav ul { float: left; width: 100%; background: #509ac9; }Line 403
#nav li a { display: block; padding: 10px 10px 8px; position: relative; text-decoration: none; color: white; }Line 409
#nav li a:hover, #nav li a:active, #nav .current_page_item a, #nav .current-cat a, #nav .current-menu-item a { color: #FFF; background: black; }Hope this helps. 🙂
Ooh, I like the direction you're headed. This is a very elegant, modern-looking site. 🙂
I would agree that some more text should go on the left-hand side of the large screen shot. Something to balance it out a bit. I'm sure there's a good reason why you chose it, but I feel like there's too much contrast between the dark theme and the rest of your site's color scheme.
Maybe a picture or some kind of illustration to spruce up your about page? The inner pages of the site need some images to break up the text (I'm guilty of this, too, on my sites Lol). On that note, repeating design elements do a great job of pulling together a site if you don't wanna slow it down with large images.
It's looking very nice. xo
The theme's layout is clean and the colors work well together. I think you've done a great job! The menu worked for me and I didn't see an issue with the background.
Super cute!
Hi Jennifer,
Glad I could help!I took a peak at the site and it looks like you've got it all sorted now. Apologies for the delayed response. 🙂
Jennifer, disregard the code above. It's not pasting in correctly from the browser.
Let's see if it works this time...
Line 511
#home-featured { background: url("http://teachgoodstuff.com/wp-content/uploads/2013/05/Jennifer1_2.jpg") no-repeat scroll top center #F2FAFF; margin: 0 0 50px; }Line 537
.home-featured-right { background: url(images/dashes-bg.png) #d05353; border: 5px solid #fff; font-size: 16px; margin: 0 auto; width: 430px; }
Hi Jennifer,
If you're comfortable modifying CSS, try this...
Starting on Line 511, the background should be aligned top vs. left.
You can copy & paste the following...
<pre> <div class="webkit-line-content">#home-featured {</div> <div class="webkit-line-content">background: url("http://teachgoodstuff.com/wp-content/uploads/2013/05/Jennifer1_2.jpg") no-repeat scroll top center #F2FAFF;</div> <div class="webkit-line-content">margin: 0 0 50px;</div> <div class="webkit-line-content">}</div>Starting on Line 537, the code should look like this...
</em> <div class="webkit-line-content">.home-featured-right {</div> <div class="webkit-line-content">background: url(images/dashes-bg.png) #d05353;</div> <div class="webkit-line-content">border: 5px solid #fff;</div> <div class="webkit-line-content">font-size: 16px;</div> <div class="webkit-line-content">margin: 0 auto;</div> <div class="webkit-line-content">width: 430px;</div> <div class="webkit-line-content">}</div> <pre><em id="__mceDel">
The code above differs in that the right float has been removed & the margin has been modified so that the opt-in box is centered.
Thanks for clarifying, anitac. 🙂
I was approaching my solution from an SEO perspective -- the position of the header title would change, but not the info that will be displayed in the meta description/title tags.
A font for writing on a page? Can you please clarify the question?
You can start by changing the floats in the stylesheet.
For example, the title area should be floated to the right (line 72).
Float the header widget area to the left (line 109).
You may also have to change the widths to accommodate the logo, etc.
Does the blog post itself contain at least one image within it? She can upload images to blog posts via the media uploader.
Specifying a featured image doesn't make it automatically appear in a blog post entry (although I'm not familiar with the Mompreneur theme).
Either way, Facebook tries to find several images included on a web page and serve them up as possible thumbnails...it doesn't necessarily rely on the featured image.
You can modify the font in the style sheet.
The Metro theme uses Helvetica for the body font. On line 251 of your stylesheet, you need to change 'Lato' to Helvetica.
Hi, Sue. I failed to mention that by using the logo as the header background, the tabs will eventually shift to left, hiding the logo as the screen size is condensed.
Ideally, you should use the logo as an image floated left, then within the Responsive Design section of your style sheet, make the menu drop below it as the screen size is reduced.
The Education theme has styled the responsive menu to drop into 2 rows, that's just the way it is. And in my opinion, the menu doesn't look weird at all when split into 2 rows.
That being said, I don't think fixing the top margin or padding will help either (someone else correct me if I'm wrong).
It would be a matter of tinkering extensively with the menu styles to modify the responsive menu effect. For example, you could do away with using the tab image as a background and instead, style the menu with pure CSS to maintain more control over its appearance.
Hopefully those ideas will help to inspire you to find a solution. I personally don't have the time to restyle your menu, but can certainly offer up suggestions and feedback for whatever you decide to do. 🙂
We're good. No worries.
In regards to the header, the logo looks a bit cut off (the circle). To fix this, I would bump up the header min-height from 120px to about 140px and grab a new slice/graphic of the header background so that the logo is centered between the top and bottom.
An alternative would be to scale down the logo and title text so that you can decrease the min-height to say...about 90 or 100 px. If you do this, then you can remove the top padding from the widget area (line 225 of the stylesheet) that contains your tabbed navigation.
In a nutshell, I agree that it's not worth the effort to reconfigure the menu just to get rid of the space above it.
A bit of white space never hurt anything, but if it still bugs you, you can always add a text widget (a widget within the menu widget) to fill in that area. For example, I added a toll-free number to the space -Â http://www.easleadership.com/.
Change the margin in your style sheet that starts on line 409 to this...
margin: 0 auto 32px; margin: 0 auto 2rem;
Try this CSS code on line 2453 of your style sheet (directly above Responsive Design section)...
If you can't see the code above, you can also access it here.
Hope this helps. 🙂
Well, you want the smallest file size possible.
A good rule of thumb is to aim for 50K or below, so 45K is "ok," but you always wanna go as small as you can without compromising too much on image quality.
If speed is a big concern, you might want to start looking into CDN options for image/file hosting (this WPbeginner article does a good job of covering the basics).
MaxCDN is pretty popular. There are other CDN providers, like CloudFlare & Amazon. You'll have to do your research to see which best fits your budget and needs.
If you're looking for hosting options that boost performance, there's always Synthesis. <-- Not an affiliate link. I came across this post written by Yoast that explains why Synthesis works well with Genesis-powered sites.
Best of luck!
Anna, the large block of code posted above should have been in a Gist. My apologies, I'm trying to help, but I'm new at posting code in forums.
Use the code below to replace lines 1529 through 1765 in your stylesheet...
If you can't see the code in this reply, you can also find it here.
Just saw the lovely blank code box. Ok, Anna, try grabbing the code from here...
Â
