Hiding site title and description in Arcade theme

  • blogllg · Member ·

    Hi,

    I am using Arcade theme, and I would like to hide the site title and description, but I cannot locate the box that will allow me to uncheck ‘Display header text’.

    I have added the following to the CSS #site-title, #site-description { display: none} but now the header image does not redirect to the homepage.

    Could someone please let me know what I need to do to get this to work?

    Thanks.

    The blog I need help with is littlelostgirl.co.uk.

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

  • lizthefair · Member ·

    This is a bit of a hack, but if you replace the code you used with this:

    #site-title, #site-description { opacity: 0;}

    That should make the text transparent, but leave the link back to the home page. I wasn’t able to test this very well since the text in question was hidden, so let me know if it works out.

  • blogllg · Member ·

    Hi,

    Thank you for your reply.

    I tried this, and it worked, but the title and description both scroll up and then disappear.

    Are you able to help with another code to hide it completely, whilst still allowing the header to be clicked on?

    Thanks.

  • lizthefair · Member ·

    hmm. If the opacity is “sticking” the behavior you are describing shouldn’t happen.

    You might try this instead:
    #site-title, #site-description {opacity: 0 !important;}

    because this is a premium theme I can’t put it on my test site to play with it, which makes it harder for me to help–but it does mean you can get help directly from your theme’s designer. So, if we cant get the code above to work the next step is to ask your question in your theme’s forum linked below.

    http://premium-themes.forums.wordpress.com/forum/arcade

    Hope you are able to figure it out!

    P.S. It looks like you may have also removed the info about your theme and WordPress.COM hosting from your footer, which is not allowed. Could you please put that back? Thanks!

    From the Custom Design info FAQ:

    May I remove the Admin Bar, credit links such as ‘Blog at WordPress.com’, theme, font, or toolbar links?

    All WordPress.com bloggers are required to maintain the Admin Bar (the dark bar that appears at the top of WordPress.com sites when logged in) as well as credit links in the footer, even our VIP bloggers. Please do not hide or alter text or links for the footer credits or the toolbar. Modifying the style of the footer text (i.e. colors and font size) is fine as long as it’s still readable. Using CSS, you can also add content like a copyright notice to the existing footer. If you would like to do that, you can ask in the CSS Customization forum and Staff or our community volunteers would be happy to help you do that.

  • thesacredpath · Member ·

    @blogllg, the one problem you may run into is a bit of confusion having the See More button overlaying the header and the header also clickable.

    We can make the title area within your header image clickable easily enough with the following CSS. Remove the #site-title {display: none;} from your CSS and add the following to make the title within your header image clickable. 

    #site-title a {
    font-size: 50px !important;
    position: relative;
    top: 100px;
    left: 90px;
    color: rgba(0, 0, 0, 0);
}

    What this does is to increase the normal site title size so that it is approximately the same height of the title in the image and then uses position: relative to move it down and over the top of the title in the image and then sets the text-based site title to fully transparent (0 opacity).

  • blogllg · Member ·

    @thesacredpath, Perfect!!!! It works. Thank you very much. Would you be able to help with my last problem?

    The See More button has an animation, but because I’ve moved it down so that it does not overlap the site title, when the animation plays it starts from its original position and then bounces back down to where I’ve placed it. I would like it to start playing from its new position then come back down. I had the following CSS code in to stop it from playing while I get an answer, but I’ve removed it so that you can see what I mean.

    * {
    /*CSS transitions*/
    -o-transition-property: none !important;
    -moz-transition-property: none !important;
    -ms-transition-property: none !important;
    -webkit-transition-property: none !important;
    transition-property: none !important;
    /*CSS transforms*/
    -o-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    -webkit-transform: none !important;
    transform: none !important;
    /*CSS animations*/
    -webkit-animation: none !important;
    -moz-animation: none !important;
    -o-animation: none !important;
    -ms-animation: none !important;
    animation: none !important;
    }

    @lizthefair, I have put back the credit links.

    Thanks.

  • lizthefair · Member ·

    @blogllg– thanks! You are in good hands with @thesacredpath so I’ll step out. Best wishes on finishing up these last bits of customization :)

  • thesacredpath · Member ·

    Hi, I temporarily hid your site image and tested the see more button and the animation is still there right with the button, but due to the darkness of your background image where the button is, it isn’t visible. It is done by setting a rgb color with an alpha opacity filter. Try adding the following to the bottom of your CSS and then hover over the see more button. Originally the color set in the theme was a black with a 0.1 opacity (nearly transparent). In my demo code below, I’ve used white (255, 255, 255) with an opacity of 0.5. The first three numbers are the RGB color value and the last is the opacity. You can play with that and see what you think. A number closer to 1 will be completely opaque and 0 would be completely transparent.

    #more-site:hover {
    background: rgba(255, 255, 255, 0.5);
}

    Just for grins, you can also try the following which uses a red RGB color with an opacity of 0.5.

    #more-site:hover {
    background: rgba(204, 0, 34, 0.5);
}
  • thesacredpath · Member ·

    @lizthefair, may thanks for all your help in the forums. It is very much appreciated and you are doing a wonderful job.

  • blogllg · Member ·

    @thesacred path, the see more button is visible and the animation is there, both of which I want, however I would like the see more button animation to start from its current position, as I had to move it down in order for it to not overlap with the title.

    In other words, how do I change the starting position for the see more animation?

    Thanks a lot.

  • thesacredpath · Member ·

    I’m seeing the animation on the button itself, right where it is on your main page. Are you still seeing it not aligned with the button?

    I’ve checked it in Chrome, Firefox and Safari on my Mac, and also in Internet Explorer 9, 10 and 11 and the animation (hover effect) is centere right on the See More button.

    If you are not seeing this, what browser and browser version are you using?

  • designsimply · Member ·

    Hi, I’m just checking in to see if this issue was resolved or not.

    how do I change the starting position for the see more animation?

    The position of an animated element depends on the rules for the element itself as well as the related @keyframes rules if an animation is applied. For example, take a look at this CSS from the original Arcade theme stylesheet:

    @-webkit-keyframes fadeHeader {
  0% {
    top: 20px;
    opacity: 0;
  }

  50% {
    top: 20px;
    opacity: 0;
  }

  100% {
    top: 0;
    opacity: 1;
  }
}
@-moz-keyframes fadeHeader {
  0% {
    top: 20px;
    opacity: 0;
  }

  50% {
    top: 20px;
    opacity: 0;
  }

  100% {
    top: 0;
    opacity: 1;
  }
}
@-o-keyframes fadeHeader {
  0% {
    top: 20px;
    opacity: 0;
  }

  50% {
    top: 20px;
    opacity: 0;
  }

  100% {
    top: 0;
    opacity: 1;
  }
}
@keyframes fadeHeader {
  0% {
    top: 20px;
    opacity: 0;
  }

  50% {
    top: 20px;
    opacity: 0;
  }

  100% {
    top: 0;
    opacity: 1;
  }
}

    Source: http://s0.wp.com/wp-content/themes/premium/arcade/style.css?m=1406162680g&minify=false

    See how the values for top vary from 0px to 20px? Those will affect the placement of the animated elements. I’m not sure just changing those values will work in your case because it depends on what other CSS you have already changed. Try adding custom CSS in your Appearance > Customize > CSS editor that overrides those rules first, and if that doesn’t work reply back here.

    The See More button has an animation, but because I’ve moved it down so that it does not overlap the site title, when the animation plays it starts from its original position and then bounces back down to where I’ve placed it.

    I’m not seeing what you have described at http://littlelostgirl.co.uk/ is that the right blog? If you still need help, can you provide a link to where I can see the problem in action?

  • The topic ‘Hiding site title and description in Arcade theme’ is closed to new replies.