add css text to header

  • Unknown's avatar
    cmalton · Member ·

    Hi, 2 things im in a ball crying about in frustration:

    1. I want to hide the stock title and tagline on my home page, and replace it with a custom css text that has some animations (fade in/out etc.)
    how Do i do this with the ovation theme?

    2. I’d like to eventually add a carousel to change the home page header image, how do I do this?

    please help :'(

    site: altonmagic.com

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

  • Unknown's avatar
    gotmaester · Member ·

    .site-title {
    display: none;
    }

  • Unknown's avatar
    gotmaester · Member ·

    Hi @cmalton,

    That should get you started. As far as adding other text, you will have to create a widget, and then move it into absolute position using CSS. Somebody else will probably have to help you with it. But you can help them out if you create a widget on your homepage with the text and everything the way you want it. Widgets that might be helpful include the following:

    1. image widget
    2. text widget
    3. html widget

    Also, keep in mind that WP.com strips out any java script, so I am not sure what you described is possible. One way around this though, is to create a .gif with slideshow photos, place it into an image widget, and then move it with CSS to the header. But once again, before anyone can help you, you should give them a head start and put what you want to into a widget on the page.

    I hope this helps. Good luck.

  • Unknown's avatar
    thesacredpath · Member ·

    Hi @cmalton, we can animate the existing title and tagline/site description if that would work for you. Hiding the existing text and adding text can be done also, but it is far more difficult. Go to Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS and see what you think on the fade in. I’ve set it for 4 seconds (4s in the first CSS rule) and you can adjust that. Make sure and adjust the 4s in each of the declarations in that first CSS rule. 

    .site-identity {
    -webkit-animation: fadein 4s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 4s; /* Firefox < 16 */
    -ms-animation: fadein 4s; /* Internet Explorer */
    -o-animation: fadein 4s; /* Opera < 12.1 */
    animation: fadein 4s;
}

@keyframes fadein {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to  { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to { opacity: 1; }
}

    2. I’d like to eventually add a carousel to change the home page header image, how do I do this?

    CSS is a styling document used by browsers to style and position the elements of a web page and cannot be used to add or change functionality, such as changing the static header image into a slider/carousel.

  • Unknown's avatar
    cmalton · Member ·

    Thank you every one for your guidance! thesacredpath, thats almost exactly what I wanted, is there a way to have each word appear individually?
    as far as my second question, is there a way to load an image carousel outside of css in the header? or is it pretty much stuck with a static image? I’d be fine with that, I wa just hoping for a bit more

  • Unknown's avatar
    cmalton · Member ·

    a friend of mine has a a header that I really like, I dont want to rip it off, I want to do my own version of it, his page is benbenjamins.com, How does his header work?

  • Unknown's avatar
    thesacredpath · Member ·

    …thats almost exactly what I wanted, is there a way to have each word appear individually?

    No, that is not possible since the title and tagline are each a single string of text, and we cannot control words within that string individually.

    You can add a Slideshow to the page content area, but it will not be full width of the window.

  • Unknown's avatar
    cmalton · Member ·

    thank you very much

  • Unknown's avatar
    thesacredpath · Member ·

    You are welcome.

  • The topic ‘add css text to header’ is closed to new replies.