Custom CSS for Snaps Theme

  • Unknown's avatar
    confessionsofabookgeek · Member ·

    Hi

    I’ve worked with some CSS before, but I’m struggling to put together what I need for the Snaps theme, and can’t seem to locate a Snaps specific forum on wordpress.com.

    I would like to make the following changes on the site:

    1. Change the hover colour on the main menu/social media menu from the current colour (red) to a custom colour.

    2. Reduce the white space gap between the main menu and the portfolio.

    3. If possible, reduce the white space between each portfolio image. I’ve seen this done on other sites, but can’t lay my hands on the CSS.

    4. I currently have the following text in a widget in the website footer –

    All material ©jameshughes2016 Member of Design & Artist Copyright Society http://www.dacs.org.uk/

    I would like to include this at the very bottom with the standard:
    Blog at WordPress.com. The Snaps Theme.

    Any help that can be offered would be much appreciated!

    The website I need help with is http://www.jameshugheswork.com

    Thanks!
    Rachel

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

  • Unknown's avatar
    dianakcury · Member ·

    Hi Rachel! Hope to help you here :)

    Please add the following on your stylesheet:

    1) Change the “green” for the color you like:
    .main-navigation .menu-social-links a:hover { background-color:green}

    2) Can change the value to 1em, 0.9em etc
    #content { padding-top: 0.5em;}

    3) Can change all the values here but must pay attention on how it will look :) 

    #projects article {margin: 0 1% 3.5%;width: 23%;}
#projects {margin: 0px}

    4) I added at the top of the WordPress.com and theme name, please note that we can add HTML inside this: 

    .site-info:before {
    content: 'All material ©jameshughes2016 Member of Design & Artist Copyright Society www.dacs.org.uk';
    display: block;
    font-size: 15px;
}

    The whole code: 

    .main-navigation .menu-social-links a:hover { background-color:green}

#content {padding-top:1em}

#projects article {margin: 0 1% 3.5%;width: 23%;}
#projects {margin: 0px}

.site-info:before {
    content: 'All material ©jameshughes2016 Member of Design & Artist Copyright Society www.dacs.org.uk';
    display: block;
    font-size: 15px;
}
  • Unknown's avatar
    confessionsofabookgeek · Member ·

    Hello! Thanks for coming back to me.

    1. This worked a treat, thanks! What would I need to include instead of .menu-social-links to change the hover colour for the main menu as well?

    2 & 3 work fab!

    4. Is it possible to hyperlink part of this text? I’ve included Website by PurplePR, and I’d like that to link back to my own website.

    Thanks again for your help, much appreciated!! :)

  • Unknown's avatar
    confessionsofabookgeek · Member ·

    Oh, also, could you help me tweak the following?

    1. Is it possible to use a #colour code for the hover colour instead of using a word? So I can use a specific colour?

    2. Can I decrease the white space between the end of the portfolio gallery and the start of the footer?

    3. Can I increased the size of the main menu font, and social media menu icons?

    4. Can I change the colour of the footer background? Ideally I’d like this to match the #colour code I’ll use for the menu hover in point 1.

    Thanks
    Rachel

  • Unknown's avatar
    thesacredpath · Member ·

    Hi Rachel,

    Is it possible to hyperlink part of this text? I’ve included Website by PurplePR, and I’d like that to link back to my own website.

    That isn’t possible with CSS. CSS is just a styling and positioning document used by the browsers. It cannot be used to add code, such as a link.
    Add the following and adjust the 4.0em as desired. The first rule is the padding at the bottom of the portfolio, the second is the font size and text color for the menu (non-hover), the third is the colors for the menu hover, the fourth is the social icon size, and the last would be the background color for the footer widget area. 

    #primary {
    padding-bottom: 4.0em;
}
.site-navigation a {
    font-size: 13px;
    color: #44ee00;
}
.site-navigation a:hover {
    background-color: #00bbee;
    color: #fff;
}
.menu-social-links li a::before {
    font-size: 18px;
    line-height: 1;
}
#secondary {
    background-color: #44ee00;
    padding-top: 20px;
}
  • Unknown's avatar
    confessionsofabookgeek · Member ·

    Thanks so much for all of your help!

    One last query – the hover colour for the menu works fab, but one of them (services) has a dropdown, which is still the original colour. Can I use CSS to change the dropdown hover colour to match the others?

    Thanks!

  • Unknown's avatar
    thesacredpath · Member ·

    Great, and for the hover color on dropdowns, add the following. 

    .main-navigation ul ul a:hover {
    background-color: #d1cfcf;
}
  • Unknown's avatar
    confessionsofabookgeek · Member ·

    That one doesn’t seem to be changing it…

  • Unknown's avatar
    thesacredpath · Member ·

    When I go to your site and hover over a submenu item, the background color changes from the original red to grey. When the submenu items are not hovered, they stay the same original red. Is that what you are wanting to change? If so, then add this also and put in the color you want. 

    .main-navigation ul ul a {
    background-color: #bbee00;
}

    If I’m misunderstanding, please let me know.

  • Unknown's avatar
    confessionsofabookgeek · Member ·

    Yes! That is correct.

    It’s working now, but as a result I’ve encountered another little snag…

    I’ve made the drop-down menu background colour white, to match in with the theme, and I’ve made the hover the same colour of grey. But the text on the drop-down menu is white, so now it isn’t visible when you hover on it. Could I have the code to change the font/text colour on the drop-down menu?

    Thanks so much for all of your help.

    Rachel

  • Unknown's avatar
    dianakcury · Member ·

    Hi Rachel!

    Just add:

    .sub-menu a {color:#444!important}

  • Unknown's avatar
    confessionsofabookgeek · Member ·

    Thank you all so much, you are all fabulous people!!! :)

  • The topic ‘Custom CSS for Snaps Theme’ is closed to new replies.