Adjusting details

Discussion in 'Terschelling' started by rockstar, Jan 18, 2017.

  1. rockstar

    rockstar New Member

    Jan 17, 2017
    Likes Received:
    Hi there,

    because of the very nice workflow regarding adding images to galleries/portfolios I'm sooner than expected able to adjust some details now. Font-size for navigation seems to be a bit too small; where to adjust in css? Maybe it's possible to allow font-size-modifications in the backend with one of the next updates? Color-adjustments of hover-links would be nice, too.

    Another thing: where to define color of the overlay of the thumbs in gallery's archive-view? Is it possible to get rid off the small icon that shows the preview-image full size? I think it's confusing because I expect to see the gallery when I click but I only see a bigger version of the thumb...

    Thanks. Really a very nice theme, btw.

  2. maimairel

    maimairel Administrator
    Staff Member

    Apr 16, 2014
    Likes Received:
    Hi rockstar,

    Thanks and glad you're happy with the theme :)

    As for now, there's no way to adjust the font size via the backend. You can do it with custom CSS, just one line would do the job.
    Color adjustments can be done through the customizer, via color > accent color.

    Overlay color also needs custom CSS, I'll give you both CSS at the end of this reply.
    Hiding the enlarge icon, right now can only be done via CSS, but this is something I'll be adding for the next update.

    Anyway, here you go:

    CSS for menu:
    Code (CSS):
    .site-nav li { font-size: 0.75rem; }
    0.75rem is 0.75 * 16px = 14px; I recommend keeping it in rems, so 20px would be 1.25rem

    CSS for overlay color:
    Code (CSS):
    .entry-card--card .entry-card__thumbnail:before {
        background-color: #000000;
        opacity: 0.5;
    Both background color and opacity above are using the default values, customize it to your liking :)

    CSS for hiding enlarge icon:
    Code (CSS):
    .entry-card__links .pswp-item__trigger { display: none; }

Share This Page