Transparent title required

  • Resolved Alice Todd

    (@alice-todd)


    9 years ago

    Hello,

    I am trying to make the title of my page https://www.swimquest.uk.com transparent, however the code I have put into the CSS below doesn’t seem to be working:

    .site-title {
	width: 305px;
    color: transparent;
}

    At the moment I have just deleted the title from the settings page to get around this issue, but this is not great for my SEO. Would you be able to help?

    Many thanks,

    Alice

Viewing 11 replies - 16 through 26 (of 26 total)

  • Try applying the transparent color to the description. Like this:

    .site-title a, .site-description {
    color: transparent;
}

    If that doesn’t work, I don’t know…

    Thread Starter Alice Todd

    (@alice-todd)

    The display: none does work, but it also makes my logo go away (so there is just a blank space at the top of the page).

    .site-title a, .site-description {
    color: transparent;
    }

    Doesn’t work … gah! Not sure what to do. Is there a way to make the logo image appear in front of the text instead of making the text transparent maybe?

    What are you applying the display: none to? the title or the description?

    Thread Starter Alice Todd

    (@alice-todd)

    The title …

    hmmm… This is weird…

    But you do manage to apply other css right?

    Thread Starter Alice Todd

    (@alice-todd)

    Yep – other CSS works fine.

    Moderator Kathryn Presner

    (@zoonini)

    You shouldn’t need any CSS in order to hide the site title in Pictorico – or any theme, as that option is built into WordPress core.

    Open your Customizer’s Site Identity panel, and uncheck the “Display Header Text” box. That should do the trick.

    Let me know how it goes. If I’ve misunderstood what you’re trying to accomplish, just let me know.

    Thread Starter Alice Todd

    (@alice-todd)

    Hi Kathryn,
    Thanks for the suggestion – this hides the title all together, whereas I still want to logo to be displayed. Is this possible?

    Alice

    Moderator Kathryn Presner

    (@zoonini)

    Ah, I see what the issue is. You added a logo on the Site Title element via custom CSS:

    .site-title a {
    background: transparent url("https://swimquest.uk.com/wp-content/uploads/2015/11/SWIMQUEST_LOGO_FOR-WEB-e1448796620370.jpg") no-repeat scroll 0 0;
    display: block;
    height: 80px;
    overflow: hidden;
    text-indent: 100%;
    width: 305px;
}

    So if you now hide the element either with custom CSS or via the Customizer, you end up hiding the logo as well.

    The text-indent: 100%; part of the above code should in theory have been hiding your site title text, but I think something the CSS isn’t quite right.

    Try replacing the entire block of CSS above with this instead:

    .site-title a {
  background: transparent url("https://swimquest.uk.com/wp-content/uploads/2015/11/SWIMQUEST_LOGO_FOR-WEB-e1448796620370.jpg") no-repeat scroll 0 0;
  display: block;
  width: 305px;
  height: 75px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

    Now add back your site title – let me know how it goes.

    Thread Starter Alice Todd

    (@alice-todd)

    AMAZING!

    This worked, thank you thank you thank you!

    Alice

    Moderator Kathryn Presner

    (@zoonini)

    Great – you’re very welcome! I’ve marked this thread as resolved.

Viewing 11 replies - 16 through 26 (of 26 total)
  • The topic ‘Transparent title required’ is closed to new replies.