Forum Replies Created
-
AuthorPosts
-
MarcyParticipant
The Hilltop Church site uses several menus that are displayed or hidden using Media Queries for different size devices. I think their logo is always text-only.
They start on the desktop size with the Directions and Contact Us buttons in a text-widget inside the Header Right widget. They also use a menu in the Primary Navigation location.
They also have an additional widget added to the footer with a Custom Menu that uses the CSS -
#footer-nav-menu {
display: none;
}As you make the browser window smaller, the logo, Header Right widget, and Primary Navigation center. This is done in the Genesis sample with a media query (and maybe in Outreach?). Basically (I may have missed something)
@media only screen and (max-width: 768px) {
#header .widget-area,
#title-area {
width: 100%;
}.genesis-nav-menu li,
#footer .gototop,
#header ul.genesis-nav-menu {
float: none;
}.genesis-nav-menu,
#description,
#footer .gototop,
#header .widget-area,
#title,
#title-area {
text-align: center;
}
}Then for a smaller device size, they show the footer menu with
#footer-nav-menu {
display: block;
}and they hide the primary navigation with
#nav .menu {
display: none;
}They also add the menu button at the top that links to the #footer-nav-menu; I would use a bit of jQuery, but I think they just added the code to their functions.php; I'm not sure. They use the Genesis "gototop" to get back to the top.
To give you some more ideas on how to do this, you can look at this post too.
http://www.studiopress.community/topic/help-me-make-vertical-menu-more-responsive/
Marcy | Amethyst Website Design | Twitter
MarcyParticipantMarcyParticipantMarcyParticipantI noticed that you're using CommentLuv. I don't think Jetpack Comments are compatible with Commentluv still. Here is a list of plugins that don't work with Jetpack. http://jetpack.me/troubleshooting/known-issues/
Marcy | Amethyst Website Design | Twitter
July 18, 2013 at 5:44 pm in reply to: Platinum Theme – How to Add Dates on the Blog Index Page #51373MarcyParticipantTo your theme's home.php template, you could add:
//* Add the post info function
add_action( 'genesis_before_post_content', 'genesis_post_info' );You can see more on this here:
http://my.studiopress.com/snippets/post-info/#remove
Marcy | Amethyst Website Design | Twitter
MarcyParticipantIf it's still an issue for you, now that the Genesis 2.0 RC1 is released, and you haven't submitted a bug report, you can use this form to submit a bug report.
http://www.studiopress.com/contact
Marcy | Amethyst Website Design | Twitter
MarcyParticipantIt looks like you have them centered now. It looks like you added
.submenu { margin-left: -100px; }
Is this the way you want it now? If you still want to have them align on the right, you can try -150px, and then tweak it a few pixels, if it needs more.
Marcy | Amethyst Website Design | Twitter
MarcyParticipantTry this; it won't make a grid, but more posts will fit the page.
Go to your WordPress Dashboard. Click on Genesis and then on Theme Settings.
Find the section "Content Archives"In that section, in the dropdown Select one of the following, choose "Display post excerpts"
Then if you like, check Include the featured image. And choose the image size you want for your category posts.I don't think that doing this will affect your other pages, but it may, so be sure to look at what settings you are using before you change them.
Marcy | Amethyst Website Design | Twitter
MarcyParticipantThere is no archives.php in the WordPress template heirarchy, only archive.php
See this image:
http://codex.wordpress.org/images/1/18/Template_Hierarchy.png
from this page:
http://codex.wordpress.org/Template_HierarchyFirst, have you looked at the Genesis Theme settings:
Genesis > Theme Settings in the section Content ArchivesYou can use this to customize your blog, archive, and category listings. They will all be the same though, so if you want the category archive to be different, you would need to do something else.
You can create a category.php template for your theme, or you can add conditional code to your functions.php using
is_category() { /* your code */ }This tutorial can help you; it has the hook you need to remove the content, if all you want is an image and title.
http://www.diywebsitetips.com/genesis-category-page-customization
To get the featured image, you would want to make sure that in Genesis > Theme Settings in the section Content Archives you have checked Include the Featured Image.If you want to remove the post info and post meta, which may be all you want to do, this page will help
http://lorib.me/code/genesis-removechange-post-infometa/This is the Genesis Hook reference, in case you need to remove anything else.
http://my.studiopress.com/docs/hook-reference/Let me know how you do with this.
Marcy | Amethyst Website Design | Twitter
MarcyParticipantThe code the targets the current menu item is:
.genesis-nav-menu .current-menu-item a {
color: #ff0000;
}That should do it for all the navigation menus.
You can make the color anything you like, instead of the red color.
Marcy | Amethyst Website Design | Twitter
MarcyParticipantIn the media query section, try this:
.header-image #title a {
width: 100%;
)
Marcy | Amethyst Website Design | Twitter
July 14, 2013 at 4:02 pm in reply to: Setting featured image size + Excluding widget area from styling #50691MarcyParticipantYour links go to a "Things yet to come" page, so I can't see anything.
For your images, have you tried this:
From your WordPress Dashboard, click on Genesis > Theme Settings
Then find the section Content Archives.
Find the "Include the Featured Image?" section and check it.
Then you should be able to choose the size of image you want.You should not need to code you added because the 150x150 thumbnail size is standard for WordPress.
Marcy | Amethyst Website Design | Twitter
MarcyParticipantMarcyParticipantIn genesis, the sidebar content is always after the main content, no matter where the sidebar is placed. You can change the order with jQuery, if you know how.
But since Genesis is so flexible, you could try using 2 menus. Since you're a Designer/Dev, I'll just describe it; you'll have to tweak the code to fit your site.I would add the custom sidebar menu to Primary Navigation Menu in your Dashboard under Appearance > Menu, so now you have the same menu twice, one in the sidebar and one under the header.
In the CSS, give it display:none;
I think it's .menu-primary { display: none; }Then in the media query where the .sidebar width goes to 100%, change
.menu-primary { display: block; }
and
#nav_menu-2 { display: none; } or maybe .widget_nav_menu {display: none;}You will need to keep the responsive CSS for the .menu-primary from the original Agency to have it display 100% width, if you've removed it.
You may also need to add an additional media query for the sidebar menu going back to the desktop website size.
Something like:
@media only screen and (min-width: 961px) {
#nav_menu-2 {
display: block !important;
}
}
Where the min-width is 1px larger than the size you used for the mobile width.
Marcy | Amethyst Website Design | Twitter
MarcyParticipantThis is what I'm seeing on your site now:
.nav-secondary li a {
padding: 9px 16px 8px 15.5px;
}With this in Firefox, there is an extra space on the right because "Reviews" moves to the next line; it all fits on one line in Chrome. Part of the reason is that padding in FF and Chrome is always just a little different, and also because you are using a half pixel which is interpreted differently by different browsers.
If it were my site, I would use 15px for both the padding-right and padding-left as follows:
.nav-secondary li a {
padding: 9px 15px 8px 15px;
}This makes the menu fit in both FF and Chrome with just a little extra on the right side.
Marcy | Amethyst Website Design | Twitter
July 13, 2013 at 5:10 pm in reply to: How can I get the excert area to display with read more? #50574MarcyParticipantYou will want to go to the Genesis > Theme Settings screen from your WordPress dashboard.
Find the section Content Archives.
Change "Select one of the following" to "Display post excerpts"
Since you are using the excerpt area in the post, you don't need to limit content.
You will probably want to use "Include the Featured Image?" though and choose an image size.If you have not set Featured Images on your posts, you will need to go back to those posts and add one.
Marcy | Amethyst Website Design | Twitter
MarcyParticipantMarcyParticipantFirst try going to your Dashboard and then Settings > Permalinks
Be sure that you have clicked the radio button Post name (it will probably add /%postname%/ to the Custom StuctureThen look at the Category base and Tag base section and make sure there is nothing in those. Save.
Then go to Pages > Blog and over on the right under Page Attributes and Templates, choose the Blog template.
If you don't have a page named Blog, create one with the title Blog, put don't add any content to the page, and use the Blog template.See if this works.
Marcy | Amethyst Website Design | Twitter
MarcyParticipantYou will want to use a % for the width instead of a pixel width. Try this for width on .featured-box.
Change the current width to max-width and add a new width. I have 100% to try first, but you may need to reduce this to 95% or something else, depending on which section you have this in. For more precise help, we would need a link to your site..featured-box { -moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #00; color: #0; border: 2px solid #ddd; border-radius: 10px; margin: 0 auto; max-width: 870px; width: 100%; overflow: hidden; padding: 20px; }
Marcy | Amethyst Website Design | Twitter
MarcyParticipantTo reduce the height of the search form, you would find this section:
.s { -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #FFF url(images/search.png) center left no-repeat; border-radius: 5px; color: #AAA; font-style: italic; margin: 0; padding: 10px 10px 10px 35px; width: 180px; }
Change the padding to reduce the top and bottom padding. To make them 0, you may want them to be 5px instead:
padding: 0 10px 0 35px;For the menu height, find
.menu-primary a, .menu-secondary a, #header .menu a { color: #FFF; display: block; padding: 15px 15px; position: relative; text-decoration: none; text-transform: uppercase; }
Changing the padding on this section will also affect your header menu height, so you will want to make a separate section for .menu-primary a just below this.
.menu-primary a { padding: 5px 15px; }
You will want to adjust the first padding number so that it looks good with your font and your search form.
Marcy | Amethyst Website Design | Twitter
-
AuthorPosts