Homepage image with text overlay

  • Author
    Posts
  • #125591

    garnetshield
    Member

    I’m using the header image with randomized images. I’d like to display a text header with tagline that overlays the image. No linking desired, just a text branding message. How is this achieved?

    Need text overlay to show on all devices. I tried using an image with text embedded, but the responsive nature was not optimal. The text was off to the left and didn’t show on mobile.

    The blog I need help with is garnetshield.wordpress.com.

    #125778

    emilysuesrq
    Theme Author

    Hello,

    For the Purpose Theme, the only way to display text over a header image is by adding a featured content slideshow. Since you already have a group of header images selected, I would recommend adding these in as posts, applying a tag, such as “featured”, and adding those images as the featured image. Next, add an excerpt (click Screen Options, and select Excerpt) in the post at the bottom of the page. You can then go into the Featured Content section within the customizer and designate the tag to be displayed.

    However, this option is only available for the Home Page. I hope this helps, please let me know if you need any help with anything else or clarification on how to do the Featured Content slideshow.

    Best Regards,
    Emily

    #125810

    garnetshield
    Member

    Thank you, Emily.
    Can I avoid linking from the home page to the post that has only a headline and tagline? I’m not really posting a blog as much as trying to show branded text.
    Thanks for the answer to follow-up question.

    #125827

    emilysuesrq
    Theme Author

    Yes, you can add the following code within the Additional CSS section of the customizer:

    .slideshow .headline a {
      pointer-events: none;
    }
    .slideshow .more-link {
      display: none;
    }

    Let me know if you need any further assistance!

    Best Regards,
    Emily

    #125847

    garnetshield
    Member

    Thank you, Emily!
    I’m getting closer.

    See https://garnetshield.wordpress.com/. I’m able to have the static image / text in the home page centerpiece area with no link.

    Can I hide the blog entry from the homepage lower on the page, which is showing the latest blogs? Also from the blog page summary itself (https://garnetshield.wordpress.com/blog/)?

    I’ve assigned the blog to the “uncategorized” category, but I don’t see any forum entries about hiding uncategorized blogs.

    Thank you for staying with me on this one.

    David

    #125863

    emilysuesrq
    Theme Author

    No problem, David. Things are looking good on your site, nice job!

    To hide the “News” section on your Home Page where the blog posts are showing up: within the customizer, navigate to Theme > Featured News Category. In the dropdown menu there, choose “-Select-” at the top, and this should make that section disappear from the Home Page.

    To hide the first post on the blog page (the featured image for the Home Page), apply the following code to Additional CSS:

    #post-219 {
        display: none;
    }

    That should hide just that one post on the blog page. I hope I’ve understood and answered your questions, let me know otherwise! :)

    -Emily

    #125869

    garnetshield
    Member

    Emily,
    Both tips worked beautifully and as you described. Thank you.

    #125870

    emilysuesrq
    Theme Author

    Good to hear! You are welcome :)

    -Emily

    #125872

    garnetshield
    Member

    Emily,
    You’ve been so awesome, hoping you can help again.

    I’m using your Purpose theme and trying to switch to two horizontal footers — one for quick links and one for our address/phone. I don’t want to display the header names. Right now, the theme calls for four columns. I’ve tried adjusting CSS based on some things I found in forums, but nothing has worked yet. Can you advise? Thank you.
    https://garnetshield.wordpress.com/

    #125875

    garnetshield
    Member

    Me again. I think I might have the solution. Let me know if this CSS modification is OK:
    /* Horizontal Footer Menu */
    .footer-widgets .widget {
    width: 100%;
    text-align: center;
    }

    Thank you.

    #125880

    emilysuesrq
    Theme Author

    You’re welcome, I’m happy to help! It seems like you’re on the right track with the footer, and the code you provided should work fine. I have viewed what you’ve got now, are you trying to make any modifications, or do you have it the way you like it now?

    #125888

    garnetshield
    Member

    Hi again, Emily.

    I’ve adjusted the link color to match the company’s logo color of #7b1315 (I can use the web safe color of #800000, if necessary). However, now the link color in the primary navigation can’t been seen on the Home (https://garnetshield.wordpress.com/) or About Us pages until the user scrolls because of the dark background images. Is there CSS to adjust the link color of the primary menu?

    Also, when I changed the link color, the white headline in the 3rd panel (How Does My Business Benefit?) is gray and doesn’t work against a dark background. Any ideas on how to style that one?

    I’ve been able to update CSS to use that color on some horizontal rules, too, such as the blockquote on the main page and the side widgets on the Technical Details page.

    Thank you.
    David

    #125890

    emilysuesrq
    Theme Author

    Hi David,

    Can you please grant me permission to view the site? I have requested an invite, thank.

    -Emily

    #125892

    garnetshield
    Member

    Emily,
    Thanks for replying. Permission granted.
    David

    #125893

    emilysuesrq
    Theme Author

    Hello David,

    It appears the following styles are affecting the color of the header text:

    #wrap #header .site-title a, #wrap #header .menu a, #wrap #header .menu a:link, #wrap #header .menu a:visited, #wrap #header .menu-toggle, #wrap #header .menu-toggle::before, .mobile-menu a, .mobile-menu a:link, .mobile-menu a:hover, .mobile-menu a:visited, .page .mobile-menu a, .page .mobile-menu a:link, .page .mobile-menu a:hover, .page .mobile-menu a:visited {
        color: #333;
    }

    I’ll need to know how/where you added these. Did you add them inline in Additional CSS or within the theme itself? Thanks.

    #125894

    garnetshield
    Member

    Hi, Emily.
    I’ve added CSS only in the customize CSS area in the theme of the site. I haven’t done any in-line customizations. So far, we’ve been using WordPress as the host.

    I don’t see any code in my customization for #wrap.
    I did color the link text in the menu for mobile because it was showing white text on a white background. It’s the last item in the code.

    Here’s my full customization:

    /*
    Welcome to Custom CSS!

    To learn how this works, see http://wp.me/PEmnE-Bt
    */
    /* featured slideshow hide link and set font color */
    .slideshow .headline a {
    pointer-events: none;
    color: #ffffff;
    }

    .slideshow .more-link {
    display: none;
    }

    /* hide featured blog post from blog page */
    #post-219 {
    display: none;
    }

    #post-373 {
    display: none;
    }

    /* custom widget headline treatment */
    .widget_custom_html h6 {
    border-bottom: 4px double #ccc;
    border-top: 4px double #ccc;
    font-size: 20px;
    }

    .widget_media_image h6 {
    border-bottom: 4px double #800000;
    border-top: 4px double #800000;
    font-size: 20px;
    }

    .widget_text h6 {
    border-bottom: 4px double #800000;
    border-top: 4px double #800000;
    font-size: 20px;
    }

    .widget_twitter_timeline h6 {
    border-bottom: 4px double #800000;
    border-top: 4px double #800000;
    font-size: 20px;
    }

    .widget_contact_info h6 {
    border-bottom: 4px double #800000;
    border-top: 4px double #800000;
    font-size: 20px;
    }

    /* widget bulleted list */
    .textwidget li {
    list-style-type: square;
    display: list-item;
    }

    /* Horizontal Footer Menu */
    .footer-widgets .widget {
    width: 100%;
    text-align: center;
    }

    /* Hide Site Name Under Footer */
    .footer-information {
    display: none;
    }

    /* garnet color of horizontal rule */
    hr {
    color: #800000;
    }

    /* garnet color of blockquote */
    blockquote {
    border-top: 4px double #800000;
    border-bottom: 4px double #800000;
    }

    /* black link in main menu for mobile */
    #menu-primary li.menu-item a {
    color: #1d1d1d;
    }

    #125895

    garnetshield
    Member

    Emily,

    I’ve made a couple more changes.

    I’ve fixed the headline and button link color on the story with the background. See this code:

    /* white h2 in headline with bg */
    .text-white h2 {
    color: #ffffff
    }

    /* white button in article with bg image */
    .text-white a:link {
    color: #ffffff
    }

    Last issue is the maroon link color on the main navigation when the image is dark. I tried this and a few other variations, but no luck:
    /* header background always on */
    .header-bg {
    display: block;
    }

    Any ideas on the last one?

    David

    #125896

    emilysuesrq
    Theme Author

    Hello David,

    For some reason, the previously mentioned styles are loading when they shouldn’t be on your site:

    #wrap #header .site-title a, #wrap #header .menu a, #wrap #header .menu a:link, #wrap #header .menu a:visited, #wrap #header .menu-toggle, #wrap #header .menu-toggle::before, .mobile-menu a, .mobile-menu a:link, .mobile-menu a:hover, .mobile-menu a:visited, .page .mobile-menu a, .page .mobile-menu a:link, .page .mobile-menu a:hover, .page .mobile-menu a:visited {
      color: #333;
    }

    Those styles only appear in the theme within a media query. Meaning, they should only be present when the browser is scaled down to the size of a mobile device. However, on your site the styles appear upon full-browser size. This is likely the cause of most of your style issues.

    This issue only appears to be happening on your site, so the source of the problem is probably a missing closing bracket or div somewhere in your custom code. Unfortunately, this is very difficult for us to troubleshoot. As a result, I’ve tagged the WordPress.com staff to take a look into this issue.

    Hopefully, we can get this resolved for you. Thanks!

    #125898

    kathrynwp
    Staff

    Hi there – those grey links are coming the colour palette selected in the Customizer.

    You can see the relevant CSS using a browser inspector or by viewing the browser source – it’s in a section in the document head that starts with <style type="text/css" id="custom-colors-css">

    It can be overriden by adding this to your custom CSS:

    #wrap #header .site-title a, #wrap #header .menu a, #wrap #header .menu a:link, #wrap #header .menu a:visited, #wrap #header .menu-toggle, #wrap #header .menu-toggle::before, .mobile-menu a, .mobile-menu a:link, .mobile-menu a:hover, .mobile-menu a:visited, .page .mobile-menu a, .page .mobile-menu a:link, .page .mobile-menu a:hover, .page .mobile-menu a:visited {
      color: #fff;
    }

    Or if you prefer to keep some of them grey, you can remove any elements from the above, as needed.

    #125899

    garnetshield
    Member

    Thank you, Emily and Kathryn.
    I was able to add custom code that modified the color of the site header and navigation links. Plus, I tweaked something that fixed my button link color.
    Happy Monday to you both.

The topic ‘Homepage image with text overlay’ is closed to new replies.