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

[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!

[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.

[Leo]

Hi there,

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

Let me know 🙂

[Anita]

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

[Leo]

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 🙂

[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! 😀

[Leo]

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);
}

[Anita]

Thanks for the codes, Leo! And your patience!

[Leo]

No problem!

[Author]

Posts