Navigation
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • #1232810

    princias
    Participant

    Hello,

    it appears that WordPress isn’t playing too well with the customizer favicon / site icon settings. When linking to a post, the WP-Icon is displayed next to site URL instead of site logo / favicon / social fallback image.

    See here: http://christiani.com/test/link-test-page/

    How do I replace the WP-icon with my own?

    BTW: The whole embed / Insert from URL-feature acts a bit wonky (sometimes, the pasted link is invisible in the editor but opens when clicked; sometimes, a preview is generated, and sometimes it isn’t…). I’m not sure if that’s a WP problem, or if it’s a compatibility issue with X.

    Another Question:

    I’m using Ethos, and I keep stumbling over text that is invisible because its color is set to semi-transparent white by theme default, and I’m using white / transparent background. There’s no option in the customizer that affects this font color.
    I’ve manually traced and replaced the color settings via Custom CSS for each widget etc., but I’d prefer if you could tell me the one core setting that fixes that font color for the entire theme.

    Kind regards,
    c

    #1232832

    Rue Nel
    Moderator

    Hello There,

    Thanks for writing in! When embedding a WordPress, it will display your post with an icon. That icon will not come from your customizer setting or your site’s favicon. You have to set it up usually if you are using multiblog setup. To change it with the favicon you have set in the customizer, you need to customized it.

    Because what you are trying to accomplish requires a template customization, we would like to suggest that you use a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

    After the child theme is set up, please add the following code in your child theme’s functions.php file

    // Apply the customizer's favicon to WP Embedded content 
    // =============================================================================
    add_filter( 'get_site_icon_url', 'x_custom_wp_embedded_icon' );
    function x_custom_wp_embedded_icon($url){
      $icon = x_get_option( 'x_icon_favicon', '' );
    
      if ( $icon != '' ) {
        return $icon;
      } else {
        return $url;
      }
    }
    // =============================================================================

    We would loved to know if this has work for you. Thank you.

    #1233335

    princias
    Participant

    I’ll check it out, thanks.
    Any feedback on my second question?

    Kind regards,
    c

    #1233344

    princias
    Participant

    Oh, and — the icon in embed links shouldn’t require a template customization. Please consider updating the customizer in a timely manner; WP’s original solution seems a lot more useful and user-friendly to me.

    #1233611

    Jade
    Moderator

    Hi there,

    As for the sidebar widget colors, there is a setting in the customizer that controls the heading and text colors. Kindly refer to the screenshot below for reference.

    #1234552

    princias
    Participant

    That one only works for the sidebar, not for Footer or Superfly widgets (and probably not for Header bar, either.)
    Here are some(!) of those that I’ve changed manually:

    .x-colophon.top a,
    .x-colophon.bottom a,
    .h-widget,
    .x-colophon,
    .x-colophon a,
    .x-social-global a,
    .x-colophon.bottom .x-nav li a{
    text-transform: none !important;
    color: rgb(80, 114, 130);
    }

    .widget{
    text-transform: none !important;
    color: rgb(80, 114, 130);
    }

    So what’s the “top-most” setting for this that allows me to be sure that I can actually use a white background everywhere on the site without worrying that some text might show up invisible because of the original theme design?

    Also, I’d appreciate a response on where you guys are heading with the Customizer if WP is getting better and better out-of-the-box.

    Kind regards,
    c

    #1234902

    princias
    Participant

    Hi,

    The functions.php update works for showing the icon in embed links, but nowhere else — not in Jetpack email subscriptions, not in the dashbord, etc….

    Please, sort this out. I’ve been quite happy with X and haven’t had much cause to post here, but this annoys me, cause it’s quite unnecessary.

    Kind regards,
    c

    #1235164

    Rad
    Moderator

    Hi there,

    Sure, will forward this as feature request.

    Thanks!

    #1235720

    princias
    Participant

    Great, thanks.

    I’d still like to know
    a) how to get the icon to show up in my subscription emails (and everywhere else in the Jetpack/Wordpress universe)
    b) the overarching font color selector for ALL widgets. I’d prefer not to waste time fishing around for invisible text and figuring out selectors via inspector…

    Cheers,
    c

    #1235842

    Rad
    Moderator

    Hi there,

    a. Jetpack is not our plugin and we have no control over its functionality, including the emails it sends. You may try checking their documentation.

    b. You can force them like this,

    .widget, .widget a {
    color: rgb(80, 114, 130) !important;
    }

    There is no way it can automatically change itself based on its background that makes it invisible. It has to be manually applied depending on the layout and backgrounds.

    Thanks!

    #1235900

    princias
    Participant

    Hi Rad, it isn’t changing itself, it’s the original font color setting from the original layout with a dark background that becomes invisible on my white one.

    And I DO think that it’s your responsibility to ensure that a core wordpress function isn’t screwed up by your theme!

    #1236212

    Rad
    Moderator

    Hi there,

    That isn’t part of the core, you may provide the site’s URL that has this issue. I don’t see any recent posts or widgets that have invisible content.

    You said you don’t prefer to waste your time and figuring the selector, hence, I just provided the global selector used regardless of theme or plugins for the widget styling. That of course will replace all other styling because you don’t prefer to selectively style it with selectors.

    Thanks!

    #1236596

    princias
    Participant

    Hi Rad,

    Re: “core wp function”, I was referring to the site icon problem — making sure that your version of the customizer doesn’t screw up the functionality IS your responsibility imho. So, how do I get it to work the way it would if X-customizer wasn’t interfering?

    As for the invisible content — of course I’d make sure that there’s none of it on the live site, wouldn’t I?
    It is still showing in widgets etc. that I plan to add to the live version. Since X sets the color for a number of widgets and minor font colors by default so that they only show up on a dark background, and since there’s no option in the customizer that affects that apart from the sidebar, what is it you’re asking your customers to do?
    Figure out which selector is responsible every time, which is especially annoying in my case because
    I can’t immediately see IF and WHAT is missing that needs re-styling?
    Cheers, c

    #1236628

    Christian
    Moderator

    Hey there,

    Regarding the Site Icon, it is a new API and X has a favicon setting before this new WordPress feature became available. For compatibility reasons, this has not been implemented in X yet but I’ve forwarded this as feature request.

    As for Ethos, it was designed for certain areas to have a dark background that is why there is no option. If you’re going to use CSS to modify it, you need to target the text first before the background. Here’s the text classes for the footer

    /* Widget Title */
    .h-widget {
        color: yellow;
    }
    
    /* Widget Text */
    .widget {
        color: gold;
    }
    
    /* Widget Links */
    .widget a {
        color: aqua;
    }
    
    /* Footer Content */
    .x-colophon.bottom .x-colophon-content {
        color: aquamarine;
    }
    
    /* Footer Content Link */
    .x-colophon.bottom .x-colophon-content a {
        color: coral;
    }
    
    /* Footer Links */
    .x-colophon.bottom .x-nav li a {
        color: cyan;
    }
    
    /* Footer Social Icons */
    .x-social-global a {
        color: lime;
    }

    Change the colors as per your requirements.

    Thanks.

    #1237603

    princias
    Participant

    Thank you, Christian. Much appreciated!