• Hi there. I have a triple threat!

    I’m having trouble with my logo (View in Motion) always looking blured. I’m creating in Illustrator & exporting in a high res. When imported any applied it looks low res. This applies to PNG & JPEG files
    Any advice?

    What ccs I change the social links color in the bottom left. Both in normal & hover?

    Last but not least..
    What ccs changes the colour on the next/previous border & text towards the lower left & right? Currently they are white & my background is white. https://viewinmotion.com/portfolio/selfstarters/

    I’ve spent ages going through the code but I’m not a coder by any means so have found it hard to know the right point as I only learnt how to put this all together a few days ago

    Cheers in advance!

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Hi there,

    I’m having trouble with my logo (View in Motion) always looking blured. I’m creating in Illustrator & exporting in a high res. When imported any applied it looks low res. This applies to PNG & JPEG files
    Any advice?

    Just to confirm, currently you have the image with the file name, cropped-VIM_LOGO_600x91.jpg set as logo, and the dimensions are 600×91, correct?

    Are you working on a Retina screen by any chance? If so, that would explain the blurriness – for Retina screens we double up, i.e. the image should be double the display size to show at its best quality on a Retina screen, while on regular screens we automatically scale down the image.

    That’s why when you go to upload a logo it indicates a suggested image size of 1248 by 176 pixels.

    For what you’re using a PNG, preferably with a transparent background, would also be better than a JPG – less chance of quality loss when we scale down the image for non-Retina screens.

    Can you please try uploading a new PNG at the recommended size and check if that makes any difference?

    What ccs I change the social links color in the bottom left. Both in normal & hover?

    This should do it:

    /* Change colors for social menu */
    .site .jetpack-social-navigation a {
      color: green;
      background-color: orange;
    }
    .site .jetpack-social-navigation a:hover, .site .jetpack-social-navigation a:focus {
      color: pink;
      background-color: purple;
    }

    Just replace the colors with the actual values you want, and delete lines as necessary to change only the icon color or the background color.

    What ccs changes the colour on the next/previous border & text towards the lower left & right? Currently they are white & my background is white. https://viewinmotion.com/portfolio/selfstarters/

    Try this:

    /* Change previous/Next link colors */
    
    div.nav-links  a, .nav-links .meta-nav {
      color: black;
    }
    
    div.nav-links  a:hover {
      color: blue;
    }
    

    Due to the way the code is structured it’s not possible to change the hover color for the “Previous” “Next” text itself. That always stays the base color, while the border and title text changes on hover.

    I also noticed the title on that page is invisible because it’s the same as the background. You can change that using the following:

    /* Change color of post/page/project titles */
    h1.entry-title {
      color: black;
    }
    Thread Starter jylesmck

    (@jylesmck)

    You my friend are an absolute legend! Thank you so much for helping out. All is not sorted

    Glad I could help ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Logo blur / Social links color / Portfolio next previous color’ is closed to new replies.