Andrew Misplon

Forum Replies Created

Viewing 15 posts - 1,936 through 1,950 (of 1,971 total)
  • Author
    Posts
  • in reply to: Footer problems #1264

    Andrew Misplon
    Keymaster

    If you’re feeling up for it, proceed to Appearance > Editor (normally you shouldn’t edit here unless in a child theme) and edit functions.php. This is normally not advised, one tiny error here will cause the theme to not render.

    Locate the following function:

    /**
     * Display the top bar text.
     */
    function ultra_top_bar_text_area(){
    	$phone = wp_kses_post( siteorigin_setting('text_phone') );
    	$email = wp_kses_post( siteorigin_setting('text_email') );
    	
    	if ( siteorigin_setting('text_phone') ) {
    		echo '<span class="phone">' . $phone . '</span>';
    	}
    	if ( siteorigin_setting('text_email') ) {
    		echo '<span class="email"><a href="mailto:' . $email . '">' . $email . '</a></span>';
    	}	
    }
    add_action('ultra_top_bar_text', 'ultra_top_bar_text_area');

    And replace the entire function with the following:

    if( ! function_exists( 'ultra_top_bar_text_area' ) ):
    /**
     * Display the top bar text.
     */
    function ultra_top_bar_text_area(){
    	$phone = wp_kses_post( siteorigin_setting('text_phone') );
    	$email = wp_kses_post( siteorigin_setting('text_email') );
    	
    	if ( siteorigin_setting('text_phone') ) {
    		echo '<span class="phone"><a href="tel:' . $phone . '">' . $phone . '</a></span>';
    	}
    	if ( siteorigin_setting('text_email') ) {
    		echo '<span class="email"><a href="mailto:' . $email . '">' . $email . '</a></span>';
    	}	
    }
    add_action('ultra_top_bar_text', 'ultra_top_bar_text_area');
    endif;

    Ideally this change shouldn’t be made without having FTP or File Manager access to your server. If something does go wrong you’ll need to navigate to /wp-content/themes/ on your server and delete the “ultra” folder to restore access to the site.

    in reply to: Footer problems #1263

    Andrew Misplon
    Keymaster

    No problem at all. I’ll work it up for you over the course of the evening. Chat in a little bit.

    in reply to: Footer problems #1261

    Andrew Misplon
    Keymaster

    I’ve added a tel: number to the phone link. Making this change on your site right now would require a child theme. The effort is no problem but I think I’m pretty close to getting this next update into the approval queue on WordPress.org. Looking at the queue length right now, if I submit in the next two days and assuming everything is accepted, the update should reach you in seven. Let me know if it’s more urgent than that and I’ll work this up for you now.

    The number entered will need to be in the international format. If you’d like a different presentation number to the number being dialled then we might need to child theme the change anyway.

    https://developers.google.com/web/fundamentals/device-access/click-to-call/click-to-call?hl=en/#use-the-international-dialing-format

    in reply to: Footer problems #1258

    Andrew Misplon
    Keymaster

    Super, glad to hear we’re making progress.

    Definitely send through the little things, I’m keen to get those smoothed out. You’re quite right, the phone number should launch a call link. Let me look into that and come back to you when I have more.

    Chat shortly.

    in reply to: Footer problems #1256

    Andrew Misplon
    Keymaster

    Hey 🙂

    Bottom Bar and Footer

    The gap between your footer widget and the text in the bottom bar is a combination of the bottom bar’s top padding and the footer widget’s bottom padding. If you’d like to have a another go please check the combination of the two. We’ve mentioned both selectors so need to re-insert them. They are:

    /* Footer widget padding */
    #colophon .widget {
      padding: 2.67857em 0 0 0;
    }
    
    /* Bottom Bar */
    .site-footer .bottom-bar {
      background: #313539;
      padding: 0 5% 0.89286em 5%;
    }

    What I’ve done there is set footer widget padding bottom to zero and bottom bar top padding to zero. Try that and make adjustments from there.

    Top Bar Menu

    Mmm, not sure. Still not there on my side. When I inspect the code the menu is empty. We could hide it:

    /* Hide Top Bar Menu */
    
    .top-bar-navigation { display: none; }

    Social Icons Menus

    I unfortunately can’t replicate the problem. I’m using OS X, in Chrome, Firefox and Safari the size is holding. Let’s try adding !important to the property:

    /* Bottom Bar Social Links Menu */
    
    #colophon .social-links-menu ul li a:before {
      font-size: 1.0714rem !important;
    }

    All you need to do is locate the above rule in your Custom CSS and after px or rem or em, whatever you used but before the closing ; please add !important. Hopefully that’s clear in my example above. For another example of !important in use, please see: https://css-tricks.com/when-using-important-is-the-right-choice/.

    Let me know how that all goes.

    in reply to: Footer problems #1254

    Andrew Misplon
    Keymaster

    Super, thanks.

    Bottom Bar

    /* Bottom Bar */
    .site-footer .bottom-bar {
      background: #313539;
      padding: 0.89286em 5%;
    }

    Adjust the first padding value as required, that represents top and bottom. If you’d like to change top and bottom on their own, then blown that short hand would look as follows:

    padding: 0.89286em 5% 0.89286em 5%;

    top right bottom left

    Social Links Menu

    We can either edit the font size of the social icons globally, for top and bottom bars as follows:

    /* Social Links Menus */

    .social-links-menu ul li a:before {
      font-size: 1.0714rem;
    }

    Or we can make it specific to the bottom bar:

    /* Bottom Bar Social Links Menu */
    
    #colophon .social-links-menu ul li a:before {
      font-size: 1.0714rem;
    }

    The current font size in px would be 15. rem and em just help with keeping everything scaling nicely if users use browser zoom. A fair bit of effort for that one use case. You’re fine to swap the rem value out with a px value.

    The above is un-tested. Let me know how it goes.

    in reply to: Footer problems #1252

    Andrew Misplon
    Keymaster

    Super, glad to hear you made progress.

    All these questions are great feedback, thanks, I’m taking notes.

    Can I make the gap between the phone number and copyright any smaller? Also, is there any way I can make the social icons bigger?

    Is the above question regarding the top bar? Sorry, I’m not quite with you there. Do you mean the gap between your phone number and email address? Thanks.

    Top Bar Menu

    We could remove this by navigating to Appearance > Menus, creating a new menu and adding no pages or links to it, leave the menu contents blank and assign it to the Top Bar Menu location.

    I’ll come up with a better way of handling this in the future!

    in reply to: Footer problems #1245

    Andrew Misplon
    Keymaster

    For sure, glad to help out.

    Switching to another theme, deleting Ultra and then re-installing won’t cause the loss of any site content or theme settings. I noticed a small change to the style.css file. Unfortunately any changes of that manner, any changes made via Appearance > Editor will be lost. I ran a quick diff on your stylesheet vs the 0.9.3 original. Below are the changes you’ve made:

    /* Calendar Widget */
    #wp-calendar th,#wp-calendar td {
        padding: 0!important
    }
    
    #wp-calendar thead th {
        padding-bottom: 0!important
    }
    
    /* Site Footer */
    .site-footer .footer-main {
        background: #313539
    }

    To avoid losing those, insert the above into Simple Custom CSS or the Custom CSS plugin you prefer.

    If you’ve made any modifications to theme files other than style.css and footer.php, please let me know. In that event we’d need to make use of a child theme.

    Summary: You’re now good to re-install Ultra as long as style.css and footer.php were the only theme files edited.

    in reply to: Footer problems #1242

    Andrew Misplon
    Keymaster

    Hi cloudontap

    Thanks for giving Ultra a try. (I’ve got an update on the way soon with lots of little fixes and additions.)

    Ultra isn’t using a sticky footer, rather, the background color of the site body matches the footer background color. This means, that on a page without much content, the footer will appear quite large. That’s not necessarily the problem here, but worth noting.

    The footer widgets are the ones with top and bottom padding, vs the footer itself, I did this to help with edge cases, like when there are no widgets present. To edit, please use a plugin like Simple Custom CSS or if you make use of Jetpack, then activate Jetpack Custom CSS and insert:

    Simple Custom CSS: https://wordpress.org/plugins/simple-custom-css/

    /* Footer widget padding */
    #colophon .widget {
      padding: 2.67857em 0 3.57143em;
    }

    Edit as required. You’re welcome to replace the em measurement with pixels.

    Removing the copyright/bottom bar sounds like a good idea for a theme setting, for now, let’s hotfix with the following:

    /* Hide the bottom bar */
    .site-footer .bottom-bar { display: none; }

    To restore your setup we ideally need to restore the edited files. All WordPress themes completely overwrite themselves when updating so any changes made via Appearance > Editor without using a child theme unfortunately aren’t upgrade safe.

    One way to restore theme files would be to switch to another theme, delete Ultra and re-install it. Alternatively, if you let me know what’s been edited, I could send through the contents of those files.

    in reply to: Main menu child items shown off screen #1240

    Andrew Misplon
    Keymaster

    Hey Matt

    Thanks for giving Ultra a try and for taking the time to send through feedback like this, it’s most appreciated.

    WordPress offers the ability to limit the number of levels deep a drop down menu can go. I’m not doing that in Ultra at the moment with the idea being that it gives a little more freedom. Drop down menus are absolute positioned, each new new list gets put next to the one before it and so on. I’ve checked out a few notable themes and it’s possible to re-create this problem you’re seeing in Ultra. Ultra has the menu, on a laptop screen especially, quite close to the edge. I think this brings to light this shortcoming quite quickly.

    For right now I’m afraid you’d need to manually restrict how many levels deep you’re going with the menu items that are near to the end of the menu and therefore close to the end of the screen.

    The page ideally shouldn’t be create a scroll bar when this happens, the menu items should just disappear off the end of the screen, I’ll look into that.

    I’ve looked around a bit, I think the only way of resolving this in the next version would be to either restrict the levels of drop downs that can be used OR go the more advanced route of using JavaScript to detect where the screen is ending and make adjustments based on that. I haven’t done this before so I’ll need to play around a little.

    Hopefully that helps a little to explain what’s going on. Let me know how you come along.

    in reply to: Issues with responsivness on small screens / smartphones #1225

    Andrew Misplon
    Keymaster

    Super; really glad to hear that helped.

    Chat soon.

    Cheers.

    in reply to: Issues with responsivness on small screens / smartphones #1214

    Andrew Misplon
    Keymaster

    Super, glad to hear that helped.

    You’re quite right. I was trying to balance the mobile menu on/off situations but I can check if the mobile menu is on and adjust the space available to the site title based on that.

    Let’s hotfix with the following:

    @media (max-width: 1024px) {
    
    	.site-header .site-branding-container {
      		max-width: 90%;
    	}
    
    	.main-navigation {
      		max-width: 10%;
    	}
    
    }
    

    `

    Or to make things a little more compact, the above rules could be inserted into the existing 1024 max-width media query we’re already using.

    Hope that helps.

    in reply to: Issues with responsivness on small screens / smartphones #1209

    Andrew Misplon
    Keymaster

    Thanks for all the testing Willem.

    Please let me know if you’d like to look at the IE problem, I’ll dive in then.
    I’ll take another look at making the site title more flexible. Glad to hear the hotfix will work in the very short term. Update to follow.

    I’m at: https://github.com/Misplon. Not too much going on there though.

    Thanks for raising the margin issue. It’s ben resolved for 0.9.4. To hotfix, please add the following:

    .site-content > .container {
      padding: 0 1.78571em;
    }

    Thanks 🙂

    in reply to: Issues with responsivness on small screens / smartphones #1206

    Andrew Misplon
    Keymaster

    Thanks for the wait and support. I think I’m there. The main issue in Firefox was that I wasn’t setting a width for the primary div when there was no sidebar present. In this situation Firefox sets the width equal to the content which in this case was the image width.

    Please could you try removing all the Custom CSS we’ve added so far and try the following:

    /* Ultra 0.9.3 Hotfixes - Remove After 0.9.4 */
    /* Site Title */
    @media (max-width: 1224px) {
    .site-header .site-branding h1.site-title {
        font-size:2.28571em;
        line-height:1.5625em;
        line-height:normal
    }
    }
    
    @media (max-width: 1024px) {
    .site-header .site-branding h1.site-title {
        font-size:2em;
        line-height:1.78571em;
        line-height:normal
    }
    }
    
    @media (max-width: 768px) {
    .site-header .site-branding h1.site-title {
        font-size:1.78571em;
        line-height:2em;
        line-height:normal
    }
    }
    
    @media (max-width: 768px) {
    .site-header .site-branding h2.site-description {
        font-size:.92857em;
        line-height:1.92308em;
        line-height:normal
    }
    }
    
    /* Paragraphs */
    p {
        white-space:pre;
        white-space:pre-wrap;
        white-space:pre-line;
        white-space:-pre-wrap;
        white-space:-o-pre-wrap;
        white-space:-moz-pre-wrap;
        white-space:-hp-pre-wrap;
        word-wrap:break-word
    }
    
    /* Layout */
    #primary {
        width:100%
    }
    
    @media (max-width: 1024px) {
    .site-header .site-branding-container {
        max-width:50%
    }
    }
    
    @media (max-width: 1024px) {
    .main-navigation {
        max-width:50%
    }
    }

    Hopefully that fixes the problems we’ve discussed. Let me know how it all goes.

    in reply to: Issues with responsivness on small screens / smartphones #1204

    Andrew Misplon
    Keymaster

    Hi Willem

    I’m unfortunately going to need to jump back in tomorrow with fresh eyes. I’m missing something at the moment, hopefully the problem will present itself when I take another look tomorrow. Sorry I couldn’t crack it this evening.

    Chat then.

    Thanks

Viewing 15 posts - 1,936 through 1,950 (of 1,971 total)
Scroll to top