Featured Section Body Text Color, Read More Link, Footer "Blog at WordPress"…

  • Unknown's avatar
    scottamyx · Member ·

    Two questions.

    1. In the Port theme, the default header and body text color font appears to be black/gray. In the Featured section, when there is an image, CSS changes the body text color to white (and header), making the text unreadable. How do you prevent or override CSS to not show up as white in the Featured section?

    2. On the homepage, I have added three Featured. Though I added “Read More” as a link (and also tried using button) it’s not showing up as a clickable link on the homepage.

    3. I have the Premium upgrade yet I still see “Blog at WordPress. Port Theme” on the footer. How do I remove this?

    4. On mobile iOS, the Home banner image is highly magnified or does not automatically readjust the size to fit the mobile form factor. Temporarily, I have disabled “Add Background to Mobile Menu” but would prefer to show the image also on mobile.

    Thanks.

    The blog I need help with is amyxmckinsey.wordpress.com, redirected to amyxmckinsey.com

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there,

    1. In the Port theme, the default header and body text color font appears to be black/gray. In the Featured section, when there is an image, CSS changes the body text color to white (and header), making the text unreadable. How do you prevent or override CSS to not show up as white in the Featured section?

    I assume you are talking about your Services section. Given that the image used can vary widely in color and complexity, it can be a little difficult to keep the contrast high enough for easy reading. One thing that we could do to improve that would be to place a slightly transparent color as a background for the title and text. Add the following to your custom CSS and see what you think. 

    .home-section .section-head {
    background: rgba(0, 0, 0, 0.4);
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: 0;
    padding-bottom: 45px !important;
    padding-top: 10px !important;
}
#featured-pages.has-background p {
    color: #fff;
}
#featured-pages .wrap {
    background: rgba(0, 0, 0, 0.4);
    padding-top: 20px;
}

    You can darken or lighten the opacity of the backgrounds by changing the last number (0.4). The closer to 0, the more transparent, the closer to 1, the more opaque.

  • Unknown's avatar
    scottamyx · Member ·

    I tried the suggested CSS changes. It make the header of other sections also darkened with the transparent background.

    Is there any way to simply bold/ enlarge the body text so that it’s more readable?

    Also would you also address question #3?
    3. I have the Premium upgrade yet I still see “Blog at WordPress. Port Theme” on the footer. How do I remove this?

  • Unknown's avatar
    thesacredpath · Member ·

    Oops, hit submit too soon.

    2. On the homepage, I have added three Featured. Though I added “Read More” as a link (and also tried using button) it’s not showing up as a clickable link on the homepage.

    In general, when a theme creates an excerpt, which Port does, it will strip out the HTML, which will include the read more.

    We can get around this though.

    1. Put the words “read more” at the bottom of the page content and then use the link feature to link that text to the place you want your readers to go.
    2. Now, switch to the Text tab, and copy all the text and code from there and paste it into the Excerpt Module down below the text area (if it isn’t there, go to Screen Options at the top right and activate it).
    3. Save your page and then the Read More Link will appear below your content.

    Note that this will not work as a normal “read more”, so if you want expanded page content, you will have to create a second page with the full content and then link to that page in the shorter excerpt paged read more link. I hope this makes sense.

    3. I have the Premium upgrade yet I still see “Blog at WordPress. Port Theme” on the footer. How do I remove this?

    You are not allowed to hide the WordPress.com and theme footer credits per our Terms of Service (#11). Even the VIP sites here at WordPress.com (CNN, Time, etc.) are required to keep the footer credits. See the Frequently Asked Questions on the Custom Design support page for more information.

    You are allowed to restyle the footer credits to better fit with your design as long as they remain readable. Give the following CSS a try. It enlarges your copyright text, makes it darker, bold and puts it on its own separate line above the WordPress.com/Theme credits, and puts a little more space in-between them. 

    span.footer-text {
    display: block;
    font-size: 120%;
    font-weight: bold;
    color: #333;
    padding-bottom: 10px;
}

    4. On mobile iOS, the Home banner image is highly magnified or does not automatically readjust the size to fit the mobile form factor. Temporarily, I have disabled “Add Background to Mobile Menu” but would prefer to show the image also on mobile.

    This was the way the theme was designed, and changing this will result in some blank space to the left and right of the image on wide browser widths (greater than about 1500px), and a tall blank space below the image on smaller tablets and phones. You can test out the following. 

    #home-banner {
background-size: contain;
}

    I’ve tried some other adjustments to get rid of the large blank space below the image (with the above change) and have not found a way to get rid of it and have everything work as it should.

  • Unknown's avatar
    scottamyx · Member ·

    So far, everything is working well enough. Thanks.

    I do have couple of minor tweaks.

    1. Rather than making the background for the title and text transparent, can I simply increase & bold the body text? What would be the code snippet?

    2. I understand about the WordPress.com and theme footer credits. How would I be able to reduce the size and make it slightly lighter while still maintaining some readability per the policy?

    Many thanks.

  • Unknown's avatar
    thesacredpath · Member ·

    1. Rather than making the background for the title and text transparent, can I simply increase & bold the body text? What would be the code snippet?

    You can play around with the following. I spread out the letter spacing on the paragraphs a bit since without it the letters sort of blended together when bold. I also included a tiny text shadow with a 1px blur to help the text be a bit more readable when over light colored areas of the image. The second rule below is for the titles (Strategy, Artificial Intelligence… etc.). 

    #featured-pages.has-background p {
    color: #fff !important;
    font-weight: bold;
    letter-spacing: 0.5px;
    text-shadow: 1px 1px 1px #000;
}
.wf-active #featured-pages .title {
    font-weight: bold !important;
    font-size: 110% !important;
    text-shadow: 1px 1px 1px #000;
}

    2. I understand about the WordPress.com and theme footer credits. How would I be able to reduce the size and make it slightly lighter while still maintaining some readability per the policy?

    That is sort of a subjective thing. I would say this would still be considered readable. Given it is pretty tiny to begin with, I don’t think I would make it any smaller than 95%. See what you think. 

    #footer a {
    color: #aaaaaa;
    font-size: 95%;
}
  • Unknown's avatar
    auxclass · Member ·

    Why do people worry so much about the footer test? I don’t think many people read down that far and even fewer care or even understand it – in my opinion much ado about not much – also the stock text on your theme is small and blends well and does not stand out at all

  • Unknown's avatar
    scottamyx · Member ·

    You’re great! Thank you for your help.

  • Unknown's avatar
    thesacredpath · Member ·

    You are welcome.

  • The topic ‘Featured Section Body Text Color, Read More Link, Footer "Blog at WordPress"…’ is closed to new replies.