Forum Replies Created
-
AuthorPosts
-
andytc
ParticipantI looked in chrome, it was a little flaky , one minute it was showing, then after opening and closing Dev tools , it disappeared, then returned.. so weird , I’ve also just checked and think news pro adds a min-height to the content div , it does on the demo , a conflict somewhere with a plugin style I’d guess. The space appears after all content, before the footer and is under class Main
andytc
ParticipantHappy New Year Anita !! xx
andytc
ParticipantIf you mean the very large white space at the bottom of the pages and posts , it might be an inline style being dynamically added to the main content class as below , probably some JS from a plugin working on that , maybe one of the plugins you mentioned -
<main class="content" id="genesis-content" style="min-height: 4804.02px;">
which results in the style declaration in DEV tools shown below -
element.style { min-height: 4804.02px; }
Try disabling the plugin temporarily and see the result , in any event , this isn't being caused by genesis or the theme.
December 22, 2020 at 9:57 am in reply to: Aspire Pro theme – Setting a non-home page as the Blog posts page #502375andytc
ParticipantStart a new thread with that new question and try and give some more details as to what you want achieve.
Glad you fixed the 1st problem
December 22, 2020 at 6:36 am in reply to: Aspire Pro theme – Setting a non-home page as the Blog posts page #502370andytc
Participant<div class="left-content"><i class="fa fa-flag" style="font-size: 60px;color:green;"></i></div>
andytc
ParticipantI'm not seeing that on either site , so not sure what the problem is. Both header images are full width and look fine top to bottom.
andytc
ParticipantThe Tag links have in-line styles applied to them as shown below -
<a href="https://www.jeroenheijne.nl/tag/abft/" class="tag-cloud-link tag-link-627 tag-link-position-1" style="font-size: 8pt;" aria-label="ABFT (1 item)">ABFT<span class="tag-link-count"> (1)</span></a>
You can try overruling this with !important as below - add this into your CSS or the additional CSS box in the customizer -
.tag-cloud-link { font-size: 22px!important; }
andytc
ParticipantConfirm what Anita has observed, it all looks correct on an iPhone.
December 4, 2020 at 11:22 am in reply to: Monochrome Pro (newest version) – Remove White Space at Top of Website #502192andytc
ParticipantThe reason for the whitspace above the menu is the Skip links
<ul><li>
have padding applied to them as below -li { list-style-type: none; padding-bottom: 15px; }
That CSS will apply to all list items , we don't want that on the skip links
<li>
... soAdd this into custom css -
.genesis-skip-link li { padding: 0; }
andytc
ParticipantDidn't we answer this in another thread Carl ?
https://studiopress.community/topic/need-help-with-css-for-widget-sidebar-for-metro-pro/
andytc
ParticipantTO ADD - You could also add a custom field to that conditional that would give you the option to select which posts to show it on , post by post
andytc
ParticipantYou could do this with a little bit of JS if you're prepared to use a small script- this version will calculate the length of the 'article' and not the whole page , most I've seen calculate the whole body of the page , but that will include comments and other content on the page , which might not be ideal if you've got tons of comments or content after.
We'll control where it's shown with a conditional for single posts -
Add to childtheme functions.php
// Add Scroll Indicator for single posts add_action( 'genesis_before_content', 'pl_page_scroll_indicator' ); function pl_page_scroll_indicator () { if ( is_single () ) { ?> <div class="progress-bar"></div> <script> jQuery(document).ready(function($) { $(window).scroll(function() { // calculate the percentage the user has scrolled the article var scrollwin = $(window).scrollTop(); var articleheight = $('article').outerHeight(true); var windowWidth = $(window).width(); if(scrollwin >= $('article').offset().top){ if(scrollwin <= ($('article').offset().top + articleheight)){ $('.progress-bar').css('width', ((scrollwin - $('article').offset().top) / articleheight) * 100 + "%" ); }else{ $('.progress-bar').css('width',"100%"); } }else{ $('.progress-bar').css('width',"0px"); } }); }); </script> <?php } }
Add to custom CSS -
.progress-bar { height: 5px; background-color: #009ACF; width: 0px; z-index: 1000; position: sticky; top: 0px; left: 0; }
that's it , your done. Make coffee , enjoy
andytc
ParticipantAnita , the CSS causes the leave a Comment box and author box to be hidden
andytc
ParticipantHi Anita , I tried your tutorial CSS , it works fine on blog posts , but messes up the blog archive on Essence pro for some reason and it also appears on every page.
October 23, 2020 at 4:14 pm in reply to: Need help with CSS for widget sidebar for Metro Pro #501571andytc
ParticipantOk, no clue what that code is all about, hope your not using that in a sidebar , If it’s working then cool
andytc
ParticipantYou can only use the V2 icons listed here -
The icon you wanted is not in V2 list
The closest one to what you want would be - ion-connection-bars
Code like this , without the 'ios' -
<i class="icon ion-connection-bars"></i>
Note - Some icons are entered as below , as shown in the theme guide , but note the extra 'ios' - you would leave that out for some of the icons and just use the code it shows you , preceded by - 'icon'
<i class="icon ion-ios-cart-outline"></i>
or
<i class="icon ion-connection-bars"></i>
choose your icon from the list on that page in the link , click the icon and use the code shown.
October 23, 2020 at 6:49 am in reply to: Need help with CSS for widget sidebar for Metro Pro #501562andytc
ParticipantUpload the animated gifs to your media library and make a note of the path of the gif's
Go to widgets and drag a HTML widget into the sidebar - Give the widget the title - 'BRAND BOX HERE' as shown in your image example -
Add the code below into the HTML widget , CHANGE THE IMAGE PATHS TO YOUR OWN - This bit
/wp-content/uploads/2020/10/corporate-4.gif
<h4 style="text-align:center;background: #B0C4DE;margin: 0;padding: 10px 0 0 0;font-weight: 600;">BRANDS TRUST MUSIC</h4> <div id="gallery" class="gallery gallery-columns-2 gallery-size-thumbnail"> <figure class="gallery-item"> <div class="gallery-icon"> <img src="/wp-content/uploads/2020/10/corporate-4.gif" class="attachment-thumbnail size-thumbnail" alt="" loading="lazy"> </div> </figure> <figure class="gallery-item"> <div class="gallery-icon"> <img src="/wp-content/uploads/2020/10/corporate-3.gif" class="attachment-thumbnail size-thumbnail" alt="" loading="lazy"> </div> </figure> <figure class="gallery-item"> <div class="gallery-icon"> <img src="/wp-content/uploads/2020/10/corporate-2.gif" class="attachment-thumbnail size-thumbnail" alt="" loading="lazy"> </div> </figure> <figure class="gallery-item"> <div class="gallery-icon"> <img src="/wp-content/uploads/2020/10/corporate-1.gif" class="attachment-thumbnail size-thumbnail" alt="" loading="lazy"> </div> </figure> </div> <h4 style="text-align:center;background: #B0C4DE;margin: 0;padding: 0 0 10px 0;font-weight: 600;">Expert DJ Carl©</h4>
Add this Custom CSS into the Customiser css section
.sidebar .widget .gallery { background: #B0C4DE; margin-bottom: 0; padding: 20px; } .sidebar .widget .gallery-icon { background: #fff; } .sidebar .widget .gallery-item { padding: 3px; }
That's it , you're all set. We've used the output from a gallery widget as the base for the html. If you ever need to change the columns , just edit this section -
gallery-columns-2
change the number to 3 , 4 etc and add any extra images.
October 16, 2020 at 4:42 pm in reply to: Deprecated: Directive 'allow_url_include' is deprecated in Unknown on line 0 #501495andytc
ParticipantTry this link as it specifically mentions bluehost
andytc
ParticipantYou've got a JS error in the console relating to the plugin modern events calendar
Uncaught TypeError: jQuery(...).select2 is not a function
Deactivate that plugin and see if the other content in the footer appears
andytc
ParticipantThe sidebar needs to show the post title and a custom field with the post info. I based my code and settings on this:
What code do you have so far ?
Using hooks it will always show before or after the sidebar content. You could convert that code to make a shortcode and add that to a text or HTML widget , then show it wherever you want in the sidebar itself.
-
AuthorPosts