Forum Replies Created
-
AuthorPosts
-
February 12, 2015 at 8:35 pm in reply to: Outreach Pro – unable to revert back to default header #140668TonyaMember
Hi Amy,
It's happening because of the header widget's title. The color for it is set to #fff (white) so you can't see that it says Member of: on the screen, but the title is there. It takes up space, which is pushing the image below it (on the right side) down and making the header taller.
I'd recommend that you remove the widget's title from the widget itself. By doing so, the image will pop back up.
Cheers,
Tonya
Software & Electrical Engineer and Programming Teacher 路 I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer BootcampTonyaMemberHi Renee,
Let's see if we can figure this out together.
1) For a full-size background image, you can do this in 2 ways: (1) with CSS and (2) with backstretch.js. For the CSS method, you do the following (Note: change body to whatever tag you are targeting):
body { background-image: url(//theurlhere); /* or if you are loading it using Customizer, then you do not need this per sey */ background-attachment: fixed; background-color: #fff; /* pick a color here to load as default */ background-position: 50% 0; background-repeat: no-repeat; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; }
2) For the site title, I'm going to make an assumption that you have a logo and want the words to not display. In that case you do the following:
.site-title a, .site-title a:hover { text-indent: -9999px; }
This text-indent kicks it off of the page.
I hope that helps you out.
Cheers,
Tonya
Software & Electrical Engineer and Programming Teacher 路 I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer BootcampTonyaMemberHi,
You want to make sure that you are loading the Montserrat font in the enqueue process, as I only see Open Sans being loaded. In the enqueue_scripts() function (in your functions.php file), you want to add the following:
|Montserrat:700
just after Open+Sans.
Cheers,
Tonya
Software & Electrical Engineer and Programming Teacher 路 I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer BootcampTonyaMemberHey Cheryl,
A quick tip for you:
If you change your style.css file, make sure that you also uptick the child theme version number, as found in functions.php:define( 'CHILD_THEME_VERSION', '3.0.1' );
You want to do this to ensure that folks who have already visited your website get your latest changes. You see the browser caches the resources in history for each site that a person visits until they clear their browser's cache. WordPress appends the version number to the files to ensure that your visitors get the version you want them to see.
Another way to do changes without ever touching your child theme is to use a plugin, such as the one I have or JetPack.
Cheers,
Tonya
Software & Electrical Engineer and Programming Teacher 路 I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer BootcampTonyaMemberHi Cheryl,
Excellent. You're welcome 馃檪
Enjoy your day,
Tonya
Software & Electrical Engineer and Programming Teacher 路 I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer BootcampTonyaMemberHi Ed,
Let's see if I can help you out.
1) Lower down the page content so that it's not hidden under the header/navbar:
If you go to line 549 of your style.css, you'll find that the margin-top being applied to .site-inner is very small. Your header's height is 77px. Therefore, you should have at least 100px here or more.
2) Page & Post titles: I assume that you want to hide these on the home and front-page. Correct? I'm assuming there is a front-page.php file in your theme. If yes, then you can simply put the 2 hooks in there as part of the "genesis_meta" callback, e.g.:
add_action( 'genesis_meta', 'altitude_front_page_genesis_meta' ); function altitude_front_page_genesis_meta() { //* Remove all post titles remove_action('genesis_entry_header', 'genesis_do_post_title'); }
If you'd prefer to do it in the functions.php file, then you would add a conditional such as:
add_action( 'genesis_meta', 'altitude_genesis_meta' ); function altitude_genesis_meta() { if (is_home() || is_front_page()) { //* Remove all post titles remove_action('genesis_entry_header', 'genesis_do_post_title'); } }
Cheers,
Tonya
Software & Electrical Engineer and Programming Teacher 路 I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer BootcampTonyaMemberHey & Welcome,
No problem at all. The top section is called the site-header and it has a styling class of .site-header. In your style.css file on line 865, you can see that a background-color of white (i.e. #fff) is being applied to .site-header.
.site-header { background-color: #fff; /* <- You want to change the #fff which is white to another color */ min-height: 160px; /* This sets the minimum height of the header area */ }
To make this red or any other color, you simply change #fff to the hex color that you want. You can do a google search for "hex color codes" and then find the color you like. For example, red has many variations, but you could do #FF0000.
TIP:
I also want to share with you that as a best practice, it is best not to edit your theme's style.css file directly as when the theme is updated you lose your changes. Rather, you can use a plugin that offers custom styling such as JetPack and then just add this to it:.site-header { background-color: #FF0000; }
Cheers,
Tonya
Software & Electrical Engineer and Programming Teacher 路 I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer BootcampTonyaMemberHi,
Aligning can be "fun" LOL Here you go:
.site-footer img { width: 38px; height: 38px; vertical-align: middle; }
Cheers,
Tonya
Software & Electrical Engineer and Programming Teacher 路 I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer BootcampTonyaMemberCentering can drive you crazy sometimes. LOL
What is happening is: there is specific styling in the stylesheet for the featured post that is overriding the aligncenter class on the image. You can see it on line 1293 of your style.css file:
.featuredpost img, .featuredpage img, .featuredpost .avatar, .featuredpage .avatar { background: #FFFFFF; margin: 0 5px 5px 5px; /* <- this is overriding the centering */ padding: 4px; border: 1px solid #DDDDDD; }
To center the image, margin left and right need to be set to auto and not 5px, i.e. margin: 0 auto 5px;
Cheers,
Tonya
Software & Electrical Engineer and Programming Teacher 路 I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer BootcampTonyaMemberSure, I'd hook into "genesis_markup_footer-widgets_output". Let me explain:
1) If you look in genesis/lib/structure/footer.php and around line 62, you see that the footer-widgets div is created by calling genesis_markup and passing the context of 'footer-widgets'. Now you need to take a look at genesis_markup() to see where you can hook in to modify the content.
2) genesis_markup() is found in genesis/lib/functions/markup.php. Head down to line 68 and you'll see that the $tag is assigned through a filter "genesis_markup_{$args['context']}_output". I noted above that the context is set to "footer-widgets"; therefore, you want to hook into "genesis_markup_footer-widgets_output" as follows:
add_filter('genesis_markup_footer-widgets_output', 'callback_to_add_html_after_opening_footer_widgets', 10, 2); /** * Add content after the opening footer-widgets div * * @since 1.0.0 * * @param string $tag HTML * @param array $args Array of the args * @return string Amended HTML string */ function callback_to_add_html_after_opening_footer_widgets( $tag, $args ) { $tag .= '<div class="your-class-here">This is where you would put your HTML</div>'; return $tag; }
Cheers,
Tonya
Software & Electrical Engineer and Programming Teacher 路 I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer BootcampTonyaMemberExcellent. Remember you can also switch it to be background-color: #000; (which is black) instead of using rgba. We typically only use rgba when we need to play with the opacity.
Software & Electrical Engineer and Programming Teacher 路 I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer BootcampTonyaMemberHello Nathan,
The header background color is set in your style.css file on line 872:
.site-header, .single-post .site-header.shrink, .site-header.shrink { background-color: rgba(0, 0, 0, 0.5); }
It's actually black with 50% opacity. Now you can change this color to whatever you'd like either by using rgba settings or switching it over to a hex color.
Cheers,
Tonya
Software & Electrical Engineer and Programming Teacher 路 I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer BootcampTonyaMemberYou're welcome. 馃檪
Software & Electrical Engineer and Programming Teacher 路 I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer BootcampTonyaMemberYou can adjust the margin-top on the .inner-site class to add space between the header and main article area. You do this change within the style sheet. See line 445-446.
.site-inner { clear: both; margin-top: 150px; /* was 100px */ margin-top: 15rem; /* was 10rem */ }
You can add more or less to the margin-top for your needs.
Cheers,
Tonya
Software & Electrical Engineer and Programming Teacher 路 I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer BootcampTonyaMemberHello,
There are a few options for modifying this area:
1) You can use the Genesis Simple Edits plugin.
2) You can hook into the filter 'genesis_footer_creds_text' (see line 149 in genesis/lib/structure/footer.php)
3) You can hook into the filter 'genesis_footer_output'. (see line 160 in genesis/lib/structure/footer.php)
The first option requires no coding on your part, whereas the two others do.
For #2, you would do the following:
add_filter( 'genesis_footer_creds_text', 'lunarwp_customize_site_footer_creds' ); /** * Customize the site footer * * @since 1.0.0 * * @param string $creds_text Genesis generated credits text * @return string Amended credits text */ function lunarwp_customize_site_footer_creds( $creds_text ) { return sprintf( '[footer_copyright before="%s "] · [footer_childtheme_link before="" after=""]', __( 'Copyright', 'genesis' ) ); }
Cheers,
Tonya
Software & Electrical Engineer and Programming Teacher 路 I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer BootcampTonyaMemberYou're welcome.
Software & Electrical Engineer and Programming Teacher 路 I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer BootcampTonyaMemberHi Yordi,
In your style sheet, you want to add the following to center the image:
.landing-header img { margin: 0 auto; display: block; }
Cheers,
Tonya
Software & Electrical Engineer and Programming Teacher 路 I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer BootcampTonyaMemberYes, you add it for 768px.
@media only screen and (max-width: 768px) { .site-inner, .wrap { max-width: 80%; }
Then you will need to adjust when you get to 480px. Typically I put the max-width on the smaller devices to 95%. This would go at the end of the style.css file.
@media only screen and (max-width: 480px) { .site-inner, .wrap { max-width: 95%; } }
Cheers,
Tonya
Software & Electrical Engineer and Programming Teacher 路 I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer BootcampJanuary 22, 2015 at 6:45 am in reply to: Order of Home Page Widgets for Responsive Mobile Phone Design #138254TonyaMemberHi again,
Sorry for the late reply. I haven't been receiving emails from the forum for some reason. I'm glad you got it worked out.
Cheers,
Tonya 馃檪
Software & Electrical Engineer and Programming Teacher 路 I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer BootcampTonyaMemberHello Jeremy,
I do apologize. I just received your last email early this morning, but hadn't received any of your others. Odd.
To adjust the width, the easiest approach is to adjust the max-width in the media-queries of your style.css file. For example, on the iPad, you would go to line 1822 and adjust the max-width down to say 860px, as follows:
@media only screen and (max-width: 1139px) { .site-inner, .wrap { max-width: 860px; /* was 960px; */ }
You would then need to repeat this reduction of max-width on the other mobile devices, until the social media plugin switches into mobile mode, which I believe is 480px.
For iPad in portrait mode, you go down the file to line1867 :
@media only screen and (max-width: 1023px) { .site-inner, .wrap { max-width: 650px; /* was 750px; */ }
and then just continue moving down through the media queries.
Cheers,
Tonya
Software & Electrical Engineer and Programming Teacher 路 I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp -
AuthorPosts