Forum Replies Created
-
AuthorPosts
-
TonyaMember
Thanks, Brad!
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 Robert,
You can achieve this fairly easily. If you look in genesis/lib/structure/post.php and go to about line 303 you find the genesis_do_post_content() function. This function handles how the content is rendered (displayed out to the browser). If all you want to do is show the full posts on the Category 506 archive page, then here is a snippet to help you out:
add_action( 'genesis_entry_content', 'tonya_do_post_content' ); add_action( 'genesis_post_content', 'tonya_do_post_content' ); /** * Show the full content vs. excerpt for specific category * * @since 1.0.0 * * @uses genesis_do_post_content() * * @return void */ function tonya_do_post_content() { //* If this is category 506, then override the settings & just render //* out the full content. if ( is_category( 506 ) ) { the_content( __( '[Read more...]', 'genesis' ) ); } //* Otherwise, call the standard Genesis function & let it handle the output else { genesis_do_post_content(); } }
So basically, if it is the right category you are targeting, then call the_content() which outputs the full post; else call Genesis and let it handle it.
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,
For content that overflows the container, you would use text-align: justify;. However, in your case, the site title is shorter than the total width of its container, as #title-area { width: 450px; }. To stretch out the site's title to fill the container, you have a couple of options:
1) use word-spacing - which will add spacing between the words
2) use letter-spacing - which adds spacing between each letter (character)For example, let's say you want to just space out the words, like justify would do. You would add the following:
#title-area #title { word-spacing: 10px; }
You will need to adjust the spacing for the mobile breakpoints. For example, I would set word-spacing: normal; for devices smaller than 480px. You can play around with the settings to achieve the exact look that you want.
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,
Just scrolling through a few pages of content from the home page, I'm seeing that category-shopping and category-business-advice do not have a new images and therefore is loading the default.
You can see this on http://www.barnsalebusiness.com/page/2/ and http://www.barnsalebusiness.com/page/3/, http://www.barnsalebusiness.com/page/4/ for example.
I assume you are wanting custom images for these categories. You'll need to go through all of your categories and then decide which ones (if not all) you want a custom image for the flag area.
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 BootcampTonyaMemberPlease provide a link to your website for us to help you out.
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,
The responsive portion of your website is controlled via the style.css file near the bottom. You want to remove the code within each of the @media rules. These are the breakpoints which control the mobile versions based upon the device's screen width.
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! You are very welcome.
Please help us out and mark this is a "Resolved", when you get a moment. Have a wonderful 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 BootcampTonyaMemberHello,
Here is a good article that walks you through how to add custom fonts to your theme. The basic steps are:
1) Upload the font files to a fonts folder in your child theme.
2) Add the @font-face to the style.css file ( or custom stylesheet ). If you are using a separate stylesheet, you will need to enqueue that file using wp_enqueue_style (which goes in the functions.php file or plugin file).
3) Last, every place where you want to use your new font, you need to add (or modify) CSS to reference the font. You do this using font-family.
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,
It occurs via a combination of jQuery (in global.js) and CSS (in style.css). When the page scrolls to a certain position, the jQuery adds a class, "fixed", to the primary navbar. In the style.css file (stylesheet), you can search for .nav-primary.fixed and you'll find the following entries:
.nav-primary.fixed { position: fixed; top: 0; }
A fixed position that is set to top 0px means it sticks (stays fixed) to the top of the screen. There's a bit more styling in there too that you'll need to grab.
Using either Chrome Dev Tools or Firefox Firebug, you can view the HTML, CSS, and JS to see how it all works together. See how the first li HTML element in the primary navbar is called "small-site-title". This is the small logo you see that appears on the left side of the screen. Looking again in the style.css file, you will find how the opacity is transitioned when .fixed is applied or how it is hidden when it is not applied.
Again you can view all of the files via Chrome Dev Tools, or simply purchase the Cafe child theme to gain full access. From there, you can implement the functionality into your child theme.
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 are very welcome! Enjoy the rest of your day.
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 Ilene,
BTW Love your website. Big fan of service dogs!
We are going to do this via CSS, i.e. in your stylesheet. Please follow the steps:
1) Add a Text widget into the Header Right widget area and put this code into it:
<div class="home-donation-widget"> <h4 class="widget-title widgettitle">SUPPORT VETERANS</h4> <a href="https://www.z2systems.com/np/clients/herodogs/donation.jsp" onclick="__gaTracker('send', 'event', 'outbound-widget', 'https://www.z2systems.com/np/clients/herodogs/donation.jsp', '');" target="_blank"> <img class="aligncenter wp-image-7538 size-full" src="/wp-content/uploads/donate.gif" alt="Donate Now" width="147" height="47"> </a> </div>
Leave the widget title blank (do not fill it in). Then save the widget.
Ok now you have the donation widget in the header under the Social Share icons. However, it is showing on all pages. Let's take care of that with CSS.
2) If you have already edited the Outreach Pro child theme, you can add the following styles into the style.css. Otherwise, I highly recommend that you use something like Jetpack's CSS Editor, which allows you to add styling without ever touching your child theme.
Either way, add the following styles:
.home-donation-widget { display: none; } body.home .home-donation-widget { display: block; float: right; }
If you added these changes to your theme's style.css file, you need to also uptick your theme's version number. See this article on how to do that.
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 BootcampTonyaMember[blush][blush]
You are so very welcome! I'm always glad to help out.
Enjoy the rest of your day/evening/night,
TonyaP.S. If you would be so kind as to mark this topic as Resolved, all of us here would appreciate it. Thank you 🙂
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,
Absolutely you can do this. There are a few steps here. Please follow them in order:
1) Go to Appearance > Widgets > and expand out both the Home -Top and Home - Middle widget areas. This is where your featured widgets are located. Now expand those out too.
a.) Just below "Show Post Info" is an text field where it says [post_date] By [post_date] By [post_author_posts_link] [post_comments]. You can change this to: By [post_author_posts_link] [post_comments][post_categories before=''].
b) Click on Save
c) Repeat for the other featured post widget.
d) If you want the date listed under the title, simply add [post_date] back into the above text field where you want it to appear.2) Now open up your style.css file and search for '.js .content .home-middle a .entry-time', it's on line 966. You want to change this to be:
.js .content .home-top .entry-categories, .js .content .home-middle .entry-categories {
Notice that we are now including the entry-categories for styling instead of the .entry-time. Save the file.
3) Now you need to edit the js/entry-date.js file. Simply copy and paste this code in:
jQuery(function( $ ){ // add js body class $('body').addClass('js'); // find time for each entry and move it inside the image link $('.home-middle article, .home-top article').each(function(){ // var $time = $(this).find('.entry-time'); //* Swapping out time for categories instead var $categories = $(this).find('.entry-categories'); $(this).find('a.alignleft, a.alignnone, a.alignright').append($categories); }); });
Notice that $time is commented out and we search for $categories in the DOM and append it inside of the image area.
4) Is this site live? If yes, then you need to uptick the CHILD_THEME_VERSION, which is found in your functions.php file. Here is an article that explains all about it.
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 are very welcome! Always glad to help out.
Enjoy the rest of 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 BootcampTonyaMemberAbsolutely. Remove the change you just did and then just below the closing }, add this:
body.home .header-image .site-title a { min-height: 170px; }
And set the min-height to what you want it to be.
If you are using Jetpack, I highly recommend using the Custom CSS add-on and making changes to your site in that file instead of altering your theme's style.css file.
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,
Right now your header height is being set by 2 factors:
1) Your logo is 434px wide x 174px high.
2) On line 195 of your style.css file, the min-height is set to 177px;
.header-image .site-title a { background-position: center !important; background-size: contain !important; float: left; display: block; min-height: 177px; /* See right here is set to 177px */ text-indent: -9999px; width: 100%; }
Is the white space relative to the nav menu (and you want to keep your logo large) or the header in general?
1) If the former, then start by reducing the white space within your logo. Then adjust the min-height to match the logo's height.
2) If the latter, then simply reduce min-height, as your logo will scale down.
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 BootcampTonyaMemberBTW If you don't mind, please mark this one as "Resolved". 🙂
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 are very 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 BootcampTonyaMemberAround line 2121 in the style.css add the following:
.responsive-menu { display: none; }
I know that the editor doesn't have line numbers, so just search for #responsive-menu-icon. It is in the breakpoint for
@media only screen and (max-width: 768px)
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 BootcampTonyaMemberGo to line 1486 (or search for .responsive-menu-icon) in the style.css. You need to change each of the .responsive-menu-icon to #responsive-menu-icon like so:
/* Responsive Menu --------------------------------------------- */ #responsive-menu-icon { cursor: pointer; display: none; margin-bottom: -1px; text-align: center; } #responsive-menu-icon::before { content: "\f333"; display: inline-block; font: normal 20px/1 'dashicons'; margin: 0 auto; padding: 10px; } .site-header #responsive-menu-icon::before { padding: 0; }
2) Then on line 2126, remove the #responsive-menu-icon from this line so that now this styling looks like this:
.genesis-nav-menu.responsive-menu > .menu-item > .sub-menu, .genesis-nav-menu.responsive-menu { display: none; }
3) Then in the next group, change .responsive-menu-icon to #responsive-menu-icon so that it looks like this:
.genesis-nav-menu.responsive-menu .menu-item, #responsive-menu-icon { display: block; }
Let me know what happens. Make sure you uptick CHILD_THEME_VERSION so that I get the latest revisions.
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