Archived topic
Blending background look
10 replies · Started by Mfon on January 27, 2020
Hello,
I am trying to move one of my site to GeneratePress. But I have a couple of challenges.
1. I am unable to blend the background look. The boxes keep showing, tried changing colours. I want it to look same as former theme.
2. The ads on the header is cut at the end. Not showing all. See what I mean here https://prnt.sc/qtegnk
3. How can I change the paignation From this https://prnt.sc/qtei3n to something like this https://prnt.sc/qtej8x
I am not a coder :)
Thank you
Hi there,
1. Customizer > Colors > Content change this to match Customizer > Colors > Body
And in Customizer > Additional CSS - remove this if you want to get rid of the border:
.inside-article,
.sidebar .widget,
.comments-area {
border: 1px solid rgba(232, 234, 237, 1);
box-shadow: 0 0 10px rgba(232, 234, 237, 0.5);
}2. I am note seeing an Advert ?
3. I provide some CSS to do that here:
Thank you.
Using this works
/* Center Navigation */
#nav-below {
text-align: center;
}
/* Page Number styling */
#nav-below .page-numbers:not(.dots) {
background-color: #fff;
color: #000;
border: 1px solid #000;
padding: 5px 15px;
box-sizing: border-box;
line-height: 30px;
text-align: center;
}
/* Change current and hover colors */
#nav-below .page-numbers:not(.dots):hover,
#nav-below .page-numbers.current {
background-color: #333;
color: #fff;
border: 1px solid #333;
}
/* increase width of dots.... */
#nav-below .page-numbers.dots {
display: inline-block;
min-width: 40px;
}
But the problem is the button are too close together. How do I space them? Giving error with web.dev
Edit this part of the CSS to include the margin properties ie
/* Page Number styling */
#nav-below .page-numbers:not(.dots) {
background-color: #fff;
color: #000;
border:1px solid #000;
padding: 5px 15px;
box-sizing: border-box;
line-height: 30px;
text-align: center;
/* Add the margin properties below for extra space */
margin-left: 10px;
margin-right: 10px;
}Thank you very much David. That works but it is not fixing the Web.dev issue.
I guess I know what the issue is. Is it possible to have the dot in a tile like the rest?
I mean like this https://prnt.sc/qtz498
Hello David,
I just noticed what could also be the problem. The pagination is not showing on mobile. Only desktop. How can I solve this?
Can you link me to the site ? The one you provided in the Site URL field isn't using GeneratePress - let me know.
Hello David, I am moving that particular site to GeneratePress from my MyThemeShop. So the staging is where I have the issue. But I have another live site with GeneratePress, same issue.
You can see the name of the live site with same issue on this temporary screenshot. https://send.firefox.com/download/6649e1bce6873c76/#y8hP5j8xhDfMp-3jwRj8Tg
Ok - the DOTs are not a link so wouldn't be the cause of the problem.
First off lets fix the mobile styling as that may be effecting web.dev report.
The CSS i provided you have included inside an @media rule so its only applied to desktop.
So remove the code i gave you and add it between the very last } and /* End GeneratePress Site CSS */
Then it should apply to desktop.
If web.dev still reports they are too close the try increasing the margins ie.
/* Add the margin properties below for extra space */
margin-left: 10px;
margin-right: 10px;:)
That was my mistake.
Thank you very much Dave.
What of the ads overflowing? On the same website I sent via screenshot
You're welcome.
RE: Ads overflowing - i replied here
