Site Title and Site Logo (both)

Home Forums Auberge Site Title and Site Logo (both)

Viewing 10 posts - 1 through 10 (of 11 total)
  • Author
    Posts
  • #19111

    katw
    Participant

    Site Title and Site Logo (both)

    Resolved

    Hey there! Have you noticed this support service is provided FREE of charge?
    If you like the speed and accuracy of resolutions, please consider supporting me with a small donation. Thank you

    Consider a donation →

    Hi Oliver,

    I have Plus version.

    I would like both the Site Title and Site logo to appear on the header.

    Currently it is only one or the other.

    Also the CSS is inconsistent in the treatment of text-wrap for the site-title. On the home page the word breaks mid-way and a hyphen is added. On other pages (when top banner appears on page-scrolling) the word wraps to next line whole (no mid-point break or hyphen). Thought you would like to standardize that behaviour in next release.

    Cheers

    Kat

    #19118

    Oliver Juhas
    Keymaster

    Hi Kat,

    The theme was designed to display only logo image or site title text. If you need both, please use this custom CSS:

    .site-title .screen-reader-text {
    	clip: auto;
    	position: static !important;
    	height: auto;
    	width: auto;
    	line-height: normal;
    	overflow: visible;
    }

    Thank you for spotting the issue with site title breaking. To explain, the theme adds styles to break long words in all heading tags. And as the site title is a h1 heading tag in homepage, it works fine, but as it is not a heading on other pages, word breaking doesn’t work. Here is a custom CSS for how to fix it (I will fix this in next theme update too):

    .site-title {
    	max-width: 100%;
    	overflow-wrap: break-word;
    	word-wrap: break-word;
    }

    However, please note that support for this style differs from browser to browser. That’s why Firefox adds hyphens automatically, while Chrome does not.

    Best regards,

    Oliver Juhas
    WebMan Design

    #19151

    katw
    Participant

    Thanks Oliver,

    CSS certainly un-hides the site heading but I end up with a flickering blue box with the screen-reader text when the mouse hovers over the site-title. Also the site-title vanishes when the box appears.

    This is fast flickering in mobile mode… like a disco light which is a bit much.

    ALSO

    Is there a way to get the site-logo to float left as I have a very long site heading which wraps to two lines.

    I would like the two lines to be at right of the logo.

    Lastly

    The image appears to be scaled to half the size of image imported (75px vs 150). It is blurry with the re-scale so can I just load an image that is optimised for the correct height and width? 75×75

    Or do you rescale this logo according to responsive breakpoints?

    #19163

    Oliver Juhas
    Keymaster

    Hi Kat,

    …I end up with a flickering blue box with the screen-reader text when the mouse hovers over the site-title.

    This is due to screen-reader-text class applied on the logo text. You can certainly override it with custom CSS, but in this case I think the easiest way would be to remove the class via your child theme‘s functions.php file like so:

    function child_theme_site_title( $output ) {
      $output = implode( ' {/} ', $output );
      $output = str_replace( 'screen-reader-text', '', $output );
      return explode( ' {/} ', $output );
    }
    add_filter( 'wmhook_wm_logo_output', 'child_theme_site_title' );

    In this case the CSS I’ve provided previously to unhide the site title text is obsolete.

    Is there a way to get the site-logo to float left…

    Try this custom CSS:

    .site-branding {
    	overflow: hidden;
    }
    .site-branding img {
    	float: left;
    }

    The image appears to be scaled…

    There is a max height applied on the logo image to fit into header container. Try this custom CSS to override:

    .site-branding img {
    	max-height: 150px;
    }

    Please try using your browser code inspector to determine the custom CSS code overrides for your theme modifications.

    Best regards,

    Oliver Juhas
    WebMan Design

    #19165

    katw
    Participant

    Thanks.

    1.

    Not wanting to sound ungrateful but by removing the “screen-reader-text” class from the site heading am I not affecting the site accessibility for vision impaired?

    2. Thanks

    Yes I can use developer tools but given your intimate knowledge I thought it better not to stumble around and seek advice.

    3. Thanks,

    I just wanted advice as to the feasibility of using an image size closer to the header height to avoid excess scaling. 150×150 the size recommended is a big image, when it only seems to need one around 75.

    Appreciate your ideas though. I will experiment.

    #19166

    Oliver Juhas
    Keymaster

    Hi Kat,

    Please note that the screen-reader-text class is used in site title for hiding the text accessibly. As you need to display the text, removing that class is what you actually need. My previous CSS code was actually overriding the styles applied by that class, but surely the hover/focus effect of the class was still applied and that’s why you’ve experienced the flickering effect. In your case the removing screen-reader-text is actually needed and will not affect your site’s accessibility in any way – your text is visible and readable.

    Please feel free to adapt the code I’ve provided to fit your logo size :) I just used 150px as an example.

    Best regards,

    Oliver Juhas
    WebMan Design

    #19226

    katw
    Participant

    Hi Oliver,

    I have added the function you gave me to suppress/remove the .screen-reader-text class. It works well.

    But on all pages except home a large top margin or padding appears above the site-title. This is the space occupied by the previously hidden H2 heading.

    If I re-enable .screen-reader-text the issue goes away.

    I had a quick look at CSS styles associated with the .screen-reader-text class and cannot see a way of fixing this beyond repeating the CSS styling the screen-reader-text class applied.

    Is this the best approach?

    #19228

    katw
    Participant

    Don’t worry Oliver.

    I have a working solution. Was better keeping the .screen-reader-text class and applying CSS overrides to change the hover etc states.

    Cheers

    Kat

    #19233

    Oliver Juhas
    Keymaster

    Hi Kat,

    Please understand that I can only provide tips for custom theme modifications – please read terms of service. Providing whole theme modifications solutions is beyond the scope of this free support service. You should really build upon my tips and test and tweak them to your needs.

    The margin/padding most likely came from site title tag styling. Please use your browser code inspector to check what styles you need to override to remove the margin/padding.

    Or try to modify the PHP function I’ve provided to be more specific:

    function child_theme_site_title( $output ) {
      $output = implode( ' {/} ', $output );
      $output = str_replace( 'span class="screen-reader-text"', 'span', $output );
      return explode( ' {/} ', $output );
    }
    add_filter( 'wmhook_wm_logo_output', 'child_theme_site_title' );

    Best regards,

    Oliver Juhas
    WebMan Design

    #19241

    katw
    Participant

    I had already indicated I had done just that and no response was required.

    Thank you for your suggestions and help thus far.

Viewing 10 posts - 1 through 10 (of 11 total)

You must be logged in to reply to this topic.