Help with the Nowell theme

  • Unknown's avatar
    jrhowe6 · Member ·

    Hello, I am a scientist currently using the Nowell theme (I posted on those forums but I was told to come here) for my personal website.

    The Nowell theme comes pre-installed with most of the logos for most of the commonly-used social media sites displayed on the theme’s social media menu. I also want to link to two social media sites commonly used by scientists, Google Scholar and ResearchGate, in my social media menu below. However, their logos are not included in the theme and just show up as generic link symbols. How could I make the social media menu display their logos? For reference, this is the Google Scholar logo and this is the ResearchGate logo.

    Thank you so much for your help!

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

  • Unknown's avatar
    gemmacevans · Member ·

    Hi jrhowe6,

    Thanks for linking to the logos. I’ll look into what would be possible here and follow up with you by email :)

  • Unknown's avatar
    gemmacevans · Member ·

    I have some CSS you can try. Please paste the following code into My Sites > Customise > CSS (underneath what is already there):

    li.menu-item-46 a::before,
li.menu-item-177 a::before {
    visibility: hidden;
}

li.menu-item-46 a,
li.menu-item-177 a {
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
}

li.menu-item-46 a {
    background-color: white;
    background-image:url('https://jamesrhowevi.files.wordpress.com/2018/05/google-scholar-logo.png');
}

li.menu-item-177 a {
    background-image:url('https://jamesrhowevi.files.wordpress.com/2018/05/28757557-f82cff1a-7585-11e7-9317-072a838dcca3.png');
}

    background-image:url can be changed to another file in your Media Library if you want to use logos in another colour.

    Let me know if that does what you are looking for.

  • Unknown's avatar
    jrhowe6 · Member ·

    Yes, that worked wonderfully, thank you very much! I just have one additional question. How can I get these logos to go from dark grey to white when the cursor goes over them?

  • kokkieh · Staff ·

    I’m afraid that is not possible.

    The icons added by the menu are SVG images we import as a custom font on the site, and that your browser draws on the page when it is loaded, so their color can be styled with CSS just like any other HTML element.

    However, the new icons you added are PNG image files that are loaded from your media library, and the color of the image is hard-coded in the file itself.

    As an alternative, we could help you with CSS to disable the hover effect on the other images so it’s at least consistent.

    .social-navigation a {
	color: white;
}
  • Unknown's avatar
    jrhowe6 · Member ·

    That’s fine, it still looks good with the CSS you gave me to add for consistency. Thank you very much!

  • The topic ‘Help with the Nowell theme’ is closed to new replies.