Forum Replies Created
-
AuthorPosts
-
MarcyParticipant
That tutorial discusses two ways to add a logo to the Genesis Sample.
1. The first part of the tutorial:
If you want to use a background image, then you need to use:
/* Logo, hide text */
.header-image .site-header .wrap {
background: url(images/logo.png) no-repeat left;
padding: 0;
}
And then name your logo, logo.png and add it to the /images folder.2. For the second part of the tutorial, it adds a custom upload of the header image in your WordPress under Appearance > Header.
So you add the code to your functions.phpadd_theme_support( 'custom-header', array( 'default-text-color' => 'ffffff', 'header-selector' => '.header-image .site-header .wrap', 'height' => 164, 'width' => 320, ) );
and then login to WordPress and upload the logo under Appearance > Header
Marcy | Amethyst Website Design | Twitter
MarcyParticipantThis is what you want to add to your functions.php to remove the Filed Under: and the Tagged With:
// Customize the post meta function add_filter( 'genesis_post_meta', 'bb_filter_post_meta' ); function bb_filter_post_meta($post_meta) { $post_meta = '[post_categories before=""] [post_tags before=""]'; return $post_meta; }
If you don't want to remove the Tagged With:, just use:
// Customize the post meta function add_filter( 'genesis_post_meta', 'bb_filter_post_meta' ); function bb_filter_post_meta($post_meta) { $post_meta = '[post_categories before=""]'; return $post_meta; }
Marcy | Amethyst Website Design | Twitter
MarcyParticipantMarcyParticipantYou can DM me @mjsdiaz1
I used to use the html5shiv, until Genesis added support. Have you tried removing it? Maybe there is interference (although there shouldn't be)
But if it's only the <main> that is the issue, I would add the div around it like you mentioned in your first post. Use the tutorial; it's an easy fix.
I tried this and it works, so you should be able to use it; note that I needed to add a 9 to the close div that isn't in the tutorial.
//* Add div.wrap1 around main add_action( 'genesis_before_content', 'sk_add_wraps_opening_divs', 9 ); function sk_add_wraps_opening_divs() { echo '<div class="wrap1">'; } add_action( 'genesis_after_content', 'sk_add_wraps_closing_divs', 9 ); function sk_add_wraps_closing_divs() { echo '</div>'; }
Marcy | Amethyst Website Design | Twitter
MarcyParticipantOK. You said three columns.
I am recommending that you install three text widgets in your home-section-1 and spread your content yourself between them.
Then the code will work.
Add the three text widgets and the content you want, and then I can look at it.
Marcy | Amethyst Website Design | Twitter
MarcyParticipantThis tutorial shows you how to do what you want in two different ways.
http://wpsites.net/web-design/add-featured-widgets-inline-anywhere-in-genesis/The first method is easier because you already have your full-width widget area, so you don't need to edit the functions.php.
Brad calls his widget area .category-top. Yours will be called .home-section-1 or .home-section-3 (whatever you choose)Brad uses 4 widgets, so where he has
.category-top .widget { float: left; padding: 0 2.8%; width: 25%; }
You would want
.home-section-1 .widget { float: left; padding: 0 2.8%; width: 33.333333333333%; }
(This is later in the tutorial)
If using 33% is too wide, you can try a slightly smaller number.
Also you may need to add a new image size to your functions.php if you are using the Genesis Featured Page or Posts widgets. It's this line in Brad's tutorial/** Add new featured image sizes */ add_image_size( 'featured-category', 100, 75, TRUE );
You will need to change the size to fit your image.
If you're using a text widget, you can adjust the image size yourself. Also if you need to use an editor for your text widget, I like using Black Studio TinyMCE Widget for clients.
And if you really choose to use a table, you can use Ultimate TinyMCE Plugin, but your page may not be responsive then.
Marcy | Amethyst Website Design | Twitter
MarcyParticipantThis tutorial tells you how to add the extra div around a container in genesis.
http://sridharkatakam.com/add-double-border-around-container-focus-pro/You don't link to your site, so I can't see what's missing.
Do you have this in your Genesis child theme functions.php?//* Add HTML5 markup structure add_theme_support( 'html5' );
That's what will allow IE8 to use containers like <nav> and <main> and <aside>
If you do have that, it may be that the media queries aren't being used in IE8.
I add this to my functions.php when I need to support IE8 (which is usually).// Add mediaqueries.js to header for IE < 9 add_action('wp_head', 'azccs_wp_head'); function azccs_wp_head () { echo '<!--[if lt IE 9]>'; echo '<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>'; echo '<html class="ie8">'; echo '<![endif]-->'; }
This allows IE8 to read the media queries, and so the pages all have the correct layout. I usually only have to add a couple of lines extra support for IE8 then.
Marcy | Amethyst Website Design | Twitter
MarcyParticipantRight now I don't believe you can use an SVG image through the WordPress Appearance > Header.
If you look at the link you posted, there are two methods. The first one uses <object> tags around the svg data file. The Appearance > Header still treats it as an , not an <object>.You can add the SVG if you use the second method which is to use the SVG as a background image. You can add it by editing your style.css or you can use a custom CSS editor plugin, like the one in Jetpack, if you use Jetpack.
So you would need to add the SVG to this element:
.title-area { background: url(image.svg) no-repeat scroll top top transparent; }
where image.svg is the full path to your SVG image in the WordPress Media Library.
When I tried SVG in my site, I used this instead:
header-image .title-area { background-position: left top; background-image: url(images/logo-250.svg); background-size: contain; height: 96px; width: 250px; }
It worked but I opted to use a png instead.
If you look at StudioPress themes they all have this section:
@media screen and (-webkit-min-device-pixel-ratio: 2) { .header-image .title-area { background: url(images/[email protected]); background-size: 250px 196px; } }
So at the top you would use:
.header-image .title-area { background: url(images/logo.png); background-size: 250px 196px; }
with just logo.png and then you would make a png twice the size for the [email protected]. The name is important; it looks for an image with @2X added to the original name.
This method also keeps your logo sharp.
Marcy | Amethyst Website Design | Twitter
MarcyParticipantI still see this:
.enews-widget input { font-size: 18px; margin-bottom: 20px; width: 50%; }
You have to find that in your style.css (I see it on line 794) and remove that width: 50%, so that it is
.enews-widget input { font-size: 18px; margin-bottom: 20px; }
and right below that add
.home .enews-widget input {
width: 50%;
}
Marcy | Amethyst Website Design | Twitter
MarcyParticipantSorry about that; I meant to look to see if you used the enews plugin elsewhere.
So try this, so it only changes width on the home page. Note that I returned the first code section to what the default theme had.
.enews-widget input { font-size: 18px; margin-bottom: 20px; } .home .enews-widget input { width: 50%; }
Then in the media query section you would just use:
.home .enews-widget input { width: 100%; }
Marcy | Amethyst Website Design | Twitter
MarcyParticipantIt looks like you made that particular button larger with:
#services a.button { float: right; line-height: 1; margin-top: -40px; margin-top: -4rem; padding: 20px 24px; padding: 2rem 2.4rem; }
That's a good way of doing it, if you just want to change the size of that one button.
I can't see anywhere right off that would keep the default code you have above from making the default size larger (in the code you posted), if you make the padding sizes to be the same as you have for the #services a.button that I posted.
Sometimes a particular plugin will style the buttons too much and then you will need to find the particular plugin code and override it in your style.css.
Do you have some other buttons that you need help with on that site?
Marcy | Amethyst Website Design | Twitter
MarcyParticipantYou don't need to reposition the primary nav.
You can create a menu that you call Primary Nav, in your WordPress Appearance section, but then don't assign it to a location.
Then go to Appearance > Widgets and find the Header Right Widget Area.
Then move the Custom Menu widget into the Header Right Widget Area, and from the drop down choose your Primary Nav.
That's how to add the Primary Nav to your Header Right Widget area.I am not sure if anyone has a mobile menu plugin for Genesis yet; I thought someone was working on it, but couldn't find one yet.
This tutorial by Sridhar Katakam seems the easiest to follow for a mobile menu in the header right widget.
http://sridharkatakam.com/make-header-menu-genesis-mobile-responsive-similar-beautiful-pro/You can Google for more Genesis mobile menu tutorials, but this is the only one I saw right off that was specifically for the header.
Marcy | Amethyst Website Design | Twitter
MarcyParticipantIn your style.css line 323 is this section of code:
input, select, textarea { background-color: #fff; border: 1px solid #ddd; color: #000; font-size: 20px; font-weight: 400; padding: 16px; width: 100%; }
It is the width: 100%; that makes the form input so wide.
You will want to find the section for the Enews Extended plugin, near line 783.
Find this CSS:.enews-widget input { font-size: 18px; margin-bottom: 20px; }
And add a smaller width like
width: 50%;
so it looks like this.enews-widget input { font-size: 18px; margin-bottom: 20px; width: 50%; }
Then in one of the smaller @media sections, like below - @media only screen and (max-width: 480px) {
you will want to add this to make it full width on phones:` .enews-widget input {
width: 100%;
}`
Marcy | Amethyst Website Design | Twitter
MarcyParticipantI'm glad that worked for you! You're welcome.
It looks to me like your Timezone is off by 2 hours.
When you are in your WordPress Admin under Settings > General, just above the Date Format and Time Format is Timezone. Make sure you have the correct one selected. Choose one that gives you the correct time. Then start a new post and see what time it says.You may need to log out and close your browser and then open to see a time change if there is caching of your site.
If that doesn't work, you'll need to start a new thread, so some one else can help because I don't have the old version of that theme. Explain the Date problem and give a link to your site.
Marcy | Amethyst Website Design | Twitter
MarcyParticipantYes. Paste it below all the text that is there. Then save it. When you save it, some or all of the default text may go away. But what you pasted will still be there.
You can do it!
Marcy | Amethyst Website Design | Twitter
MarcyParticipantI have given you the easy way to remove it; editing your CSS.
If you are worried about editing your style.css, you can use a Custom CSS editor like the Jetpack Custom CSS module. It looks to me like you're using Jetpack.
So in the Custom CSS editor, just add.topnav-right { display: none !important; }
Then you don't need to remove the other selectors. If you don't like it, then you can just delete the bit of code you added, and all will be back to normal.
Marcy | Amethyst Website Design | Twitter
MarcyParticipantOK.
Try this instead. In you styles.css find this section:.topnav-right { width: 700px; float: right; margin: 0; padding: 5px 0 0 0; text-align: right; }
and comment it out, and add display: none like this:
.topnav-right { /*width: 700px; float: right; margin: 0; padding: 5px 0 0 0; text-align: right;*/ display: none; }
Marcy | Amethyst Website Design | Twitter
MarcyParticipantMarcyParticipantMarcyParticipantIt's caused by a section called. .entry-footer .entry-meta
It still has padding on it..entry-footer .entry-meta { margin: 0 -40px; margin: 0 -4rem; padding: 32px 40px 8px; padding: 3.2rem 4rem 0.8rem; }
So change it to this:
.entry-footer .entry-meta { margin: 0 -40px; margin: 0 -4rem; padding: 0; }
That should help. If you still want a little padding, change the line to just have the bottom padding 8px.
padding: 0 40px 8px; padding: 0 4rem 0.8rem;
Marcy | Amethyst Website Design | Twitter
-
AuthorPosts