Black Friday Sale! Get up to $40 off GP Premium!Learn more

[Support request] Newbie Q's on CSS and drop shadows

Home Forums Support Newbie Q's on CSS and drop shadows

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #447353
    Anita

    I’ve been using GeneratePress for almost a year, and I’ve been happy. Now I want to do more “advanced” things, but I am not CSS savvy enough to mess with code. Have no idea where things are, what code I should add, so I’m easily overwhelmed. I have downloaded the Simple CSS plugin. But, I haven’t a clue how to use it or the Add CSS in the Customizer. I did see the GP Hooks in my menu, but until today, I didn’t know what they were for. So, while I know sort of what these things are supposed to do, I don’t know the how to use them part.

    Like others in older posts, I would like a drop shadow around my content page. So using some code I copied from another post from around 2014, I pasted it into the Additional CSS box. Now, as I say, I haven’t a clue as to what I’m doing, so I wasn’t surprised when it didn’t work, but only left the code visible on my site. Naturally, I didn’t want that, so I deleted the code from the CSS box. I think I even clicked out of the Customize window without saving changes. But–the code is still visible on the site, and I don’t know how to get rid of that.

    I’d so appreciate some advice and tutoring on these matters!

    GeneratePress 2.0
    #447409
    Anita

    In viewing the source in my browser, I found the code I’m trying to delete. But I don’t know where to go to actually delete it or how much of it.

    itemscope='itemscope'>
    	<div class="inside-article">
    		.divShadow { box-shadow: 10px -10px #CCC; }

    Not sure you’ll be able to see the site. I hope so. Having some issues with it redirecting to my publishing site. It seems to function fine from Chrome.

    #447425
    Leo
    Staff
    Customer Support

    Hi there,

    That code looks like it’s added in GP hooks? https://docs.generatepress.com/article/hooks-overview/

    Let me know 🙂

    #447901
    Anita

    Oh, thanks, Leo! I thought I had deleted those! Now, if I could only figure out how to do it right, somehow . . .!

    #448026
    Leo
    Staff
    Customer Support

    So you are trying to add a shadow around the container?

    If so try this CSS:

    .inside-article {
        -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
        -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
        box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    }

    Adding CSS: https://docs.generatepress.com/article/adding-css/

    You can customize the shadow using this site: https://www.cssmatic.com/box-shadow

    Let me know 🙂

    #448760
    Anita

    Oh, wow! Thank you soooooooo much, Leo! I’m so happy, I’m Snoopy dancin’!

    If I may ask, how would I alter the code for the whole page, or for the other sections if I wanted to do that, menu bars, sidebars, footers, and such. I have six sites, and I’d like to dress them up, but do them up different from the others.

    I can’t thank you enough! 😀

    #448823
    Leo
    Staff
    Customer Support

    For whole site it would be: https://docs.generatepress.com/article/adding-a-container-wrapper/

    Navigation:

    .main-navigation {
        -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
        -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
        box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    }

    Sidebar:

    .sidebar .widget {
        -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
        -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
        box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    }

    Footer:

    .site-info {
        -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
        -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
        box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    }
    #449101
    Anita

    Thanks for the codes, Leo! And your patience!

    #449424
    Leo
    Staff
    Customer Support
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.