Archived topic
Idea child Theme - Design Issues
17 replies · Started by Janet Davis on October 26, 2021
Hello,
I am using the Idea Child Theme - Love it - But I need some assistance in tweaking the design. (This is a new build.)
On the about/experience page I am having the following issues on all devices.
1) Large amount of extra white space after the experience block. I tried using the padding to fix this, but then the colored background doesn't cover the lettering area so it can be seen.
2) The Static Page and Archive Hero Element. I was not able to move the dynamic option (Hello World) into the image.
Also if there is an element I like but want to tweak for different criteria is there a way to duplicate it so I don't have to start from scratch?
Thank you
Janet
Hi Janet,
Glad you like the Idea template.
So for question 1, the block is using gradient backgrounds, in your case, you can disable the Use Gradient option under the Background tab: https://docs.generateblocks.com/article/container-overview/#backgrounds
Then add the background color in the colors section.
For question 2, select the block with background image, add a headlineblock to it, then you should be able to choose dynamic options. The video in the below article should be helpful:
https://docs.generatepress.com/article/block-element-page-hero/
And to re-use the elements or sections, you can actually select the block, when the tool bar appears, click on the 3 dots icon, select Copy, then you can paste this block to other elements or pages. Please be noted, the blocks with dynamic features can only work in GP elements, they don't work in pages or posts.
Let me know if you need further assistance :)
Ying,
1) The gradient on this page is disabled and there is a background color chosen that doesn't show up.
2) I was able to get the name in the header but now the image is too huge. I tried to change it but nothing I did help.
thank you
1) Large amount of extra white space after the experience block. I tried using the padding to fix this, but then the colored background doesn’t cover the lettering area so it can be seen.
You have too much padding bottom on it. It has 1750px padding bottom. Any particular reason why this is added?
Can you provide a mockup image of how you want things to be laid out? The 1750px seems to have been added on purpose for something but if you can provide a specific mockup we can follow, perhaps we can offer a better alternative to achieve the same goal w/o doing hacky paddings. :D
2) I was able to get the name in the header but now the image is too huge. I tried to change it but nothing I did help.
You can reduce the min-height value so the portion of image shown will be smaller. :D
The padding at the bottom was the only way I could get the gradient background color from the child theme from GP to cover all of the information so it could be seen since it is white lettering.
Mock up. I want it to look exactly how it is but without the white space.
2) where is this min height value?
Thank you
Can you provide admin login using the private info field so we can take screenshot show you how to set the values exactly?
Let me know :)
I’m not comfortable giving anyone codes to my site.
It’s a GP child theme.
All I did was change the padding on the bottom.
As far as the image I haven’t changed anything for size. I just need to know where.
Can you take screen shots of how it’s suppose to be, and then I can compare?
Thank you
I made the similar layout as yours, shot a clip for you to understand better:
1. Add background color to the container, remove gradient:
https://www.screencast.com/t/CHtEJmLotSN
2. Please remove the 1750pxbottom padding from the container.
3. The min height is under spacing tab:
https://www.screencast.com/t/iN2o7Asi
I was able to get the min height issues solved.
The background not so much. I removed the gradient. I put in the code fro color from your vid and it is not the right color on mine. It’s 3 tone and worse
Thank you
Janet
You mean the var(--accent-2) color?
If the site imported before the release of GP 3.1 which has the global colors options, then likely you don't have this color set on your site, so this color won't.
This is the HEX color code for the blue #7b94b5.
The page doesn’t look correct at all. It is two tones at the top, lots of extra space still etc.
The gradient is still on:
https://www.screencast.com/t/9MIP7XHs
The gradient is now off on all devices.
The padding is zero.
There is now large blue space instead of white space.
The paddings are zero
I don't see the large blue space:
https://www.screencast.com/t/lZkuQbWroJd
Can you specify which part do you mean?
Below the last information there is a great deal of blue space. I checked it on my tablet, phone and desktop. And yes I cleared my cache. I am not sure why it shows differently on your end