Archived topic
Newbie Q's on CSS and drop shadows
8 replies · Started by Anita on December 11, 2017
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!
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.
Hi there,
That code looks like it's added in GP hooks? https://docs.generatepress.com/article/hooks-overview/
Let me know :)
Oh, thanks, Leo! I thought I had deleted those! Now, if I could only figure out how to do it right, somehow . . .!
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 :)
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! :-D
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);
}Thanks for the codes, Leo! And your patience!
No problem!
