Changing Site-Title + Post-Title Colour and Visual-Behaviour.

  • Resolved zer0blok

    (@zer0blok)


    7 years, 9 months ago

    After customising Scrawl a little i’ve noticed my set-up is now a bit unclear in terms of navigation around the Site, as i’ve turned-off some of the visual signals present in the theme which do make it clear. I need to change the colour and visual behaviour of the Site-Title and the Post-Titles.

    (1) I’m using the Site-Title as the main-navigation; clicking on Title takes you to the static front-page, which is also the menu-page. The Title doesn’t look like it does anything though, as it’s the same fixed colour as the normal text.

    * (i) How can i change colour of the Site-Title?

    *(ii) If possible, i’d like the Title to behave the same way as the (now hidden) Menu-Icon: usually a light-grey, darkens on mouse-hover to indicate a link.

    -I have tried adding to the following css to simple change the colour, but to no effect:

    .site-branding {
    width: 100%;
    text-align: center;
}

    (2) Posts-page is set to show excerpts of Posts. I’m not using a ‘Read More’ link at the end of the excerpt (i.e. there is no text to indicate there is more to read). The user must click on the Post-Title to go to the full-post. Atm, however, because the colour of the Post-Title is the same as the normal text, you might think you were looking at the full-post, and not click on the Title.

    * Change Title colour on Post-page (ideally light-to-dark on mouse-hover)
    * On full-post, Title is dark /same colour as normal text.

    https://puproket.com

    With thanks in advance.
    ??

    • This topic was modified 7 years, 9 months ago by zer0blok.
Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi zer0blok,

    This CSS should take care of everything:

    /* Site Title Color */

.site-title a {
    color: #606666;
    opacity: 0.5;
}

/* Site Title Hover Color */

.site-title a:hover {
    color: #606666;
    opacity: 1;
    transition: .2s opacity ease-in-out;
}

/* Blog Page Post Title Hover Color */

.blog .entry-title a:hover {
    color: #606666;
    opacity: 1;
    transition: .2s opacity ease-in-out;
}

/* Blog Page Post Title Color */

.blog .entry-title a {
    color: #606666;
    opacity: 0.5;
}
    Thread Starter zer0blok

    (@zer0blok)

    Hello David C,

    And thank you. Works perfect.
    ??

    ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Changing Site-Title + Post-Title Colour and Visual-Behaviour.’ is closed to new replies.