[Resolved] Building a website from scratch using GenerateBlocks

[Yvon-Pierre]

I tried to do this part but I can’t figure it out:
“And then you can style the Donate Today now button in the navigation using this method here:
https://docs.generatepress.com/article/adding-buttons-navigation/”

In fact, I don’t even know how to get the header to show.

I tried to reproduce the Home page following your video walkthrough. You can see it here: https://donate.max4uni.com/wp_donate/

Since I don’t have your images and icons, I’ve used others. I think the blocks are OK and I got to almost half the page but then got stuck at the Shortcode block. I don’t even have “Show Posts” listed on my WP Dashboard. So I thought it was a good idea to stop here and wait for your feedback.

[Leo]

I tried to do this part but I can’t figure it out:
“And then you can style the Donate Today now button in the navigation using this method here:
https://docs.generatepress.com/article/adding-buttons-navigation/”

What issue are you having? It doesn’t look like step #1 of adding a custom class has been for the Donate Today menu item:
https://docs.generatepress.com/article/adding-buttons-navigation/

Let’s not worry about the rest yet.

[Yvon-Pierre]

I clicked on the link in the first sentence of the “adding-buttons-navigation” article, which says: “The Adding Buttons article shows you how to add buttons in content using some simple HTML and CSS.” I got stuck while trying to figure out what applied to me on that page.

But thanks to your feedback, now I understand that I was supposed to go to step 1. So I opened the Menus section, clicked on the menu for the page “Donate Today” (they do this process with the Home page in the tutorial but I think it needs to go to the Donate Today page in my case), type “donate-today” under CSS Classes, and saved.

If I understand this well, now I’m supposed to put the following CSS in the primary navigation:

@media (min-width:769px) {
.main-navigation .main-nav ul li.donate-today a {
background-color: #ffffff;
border: 2px solid #000000;
color: #000000;
line-height: 35px; /*this number will likely need to be adjusted*/
}
}

Where to I go to add this CSS in the primary navigation?

[Leo]

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

[Yvon-Pierre]

OK, I installed Simple CSS and copy-paste the text “@media…}” in post #2254720 above. It did put a box around “Donate Today” but not sure if it’s doing what it’s suppose to do. Is it OK? If so, ready to move on!

[Leo]

Yup that looks good – the button style can be tweaked in the CSS if needed.

Next, edit the home page to set the Content Container to Full Width and Disable the Content Title:
https://www.screencast.com/t/4b1B90k3l2X

Reference articles:
https://docs.generatepress.com/article/content-container/
https://docs.generatepress.com/article/disable-elements-overview/

[Yvon-Pierre]

Done! Thanks!

[Leo]

Awesome! Just reviewed your site and looks like you are making good progress.

The next step would be to create a merged header element used throughout the entire site:
https://docs.generatepress.com/article/transparent-header-and-navigation/

I would highly recommend watching the video in the documentation 🙂

[Yvon-Pierre]

By the way, following your video walkthrough, I did as much as I could of the Home page. I cannot complete the Shortcode though.

[Leo]

Sounds good. Let me know when the merged header element step is done.

[Yvon-Pierre]

I watched the video and read the instructions a few times. I got some of it but not all. Compared to the Donate starter site, my logo is a bit too big and the words in the menu a bit too small. No idea how to fix this.

[Fernando]

Hi Yvon-Pierre,

With regards to the logo size, you may modify this in Appearance > Customize > Site Identity.

With regards to the menu item size, you may modify this through Appearance > Customize > Typography. Example: https://share.getcloudapp.com/yAu1lkzo

Lastly, with regards to the shorcode, do you already have WPSP? Alternatively, we can use GenerateBlocks Query Loop Block to achieve the recent posts section as well. It will be available in the next update of GB which is around a week to 10days from now. You can also manually update GB with version 1.5.0-rc.3: https://generateblocks.com/generateblocks-1-5-dynamic-data-query-loops-image-blocks/

Kindly let us know.

[Yvon-Pierre]

Hello Fernando,

I went to Appearance > Customize > Site Identity. I clicked on Change logo and then I clicked Edit Image. I thought I could use the Scale image or Image Crop section to resize the logo but it doesn’t seem to work. Maybe because the logo is an SVG file? What should I do to resize the logo?

Thanks for the instructions in regard to typography. I was able to increase the size of the menu font. Unfortunately, I cannot change the color of the button “Donate Today” to red. I updated the CSS from #000000 to #FF0000 but the font remains white (even though it should be black since the color in CSS was #000000). Confused!

You lost me with the last paragraph about the shortcode. If you don’t mind, I will need a little bit more hand holding to go through this step.

Thank you!

[Leo]

Hey!

Let’s handle one issue at a time 🙂

Looks like you’ve got the merged header element done so that’s good.

As for logo size, have you tried using the Logo width slider in the customizer?
https://docs.generatepress.com/article/adding-header-logo/

That should be the best way when using an SVG file.

[Yvon-Pierre]

Oh I agree Leo, one issue at a time!!

Even though GP 3.1.3 is installed, there is not slider in Appearance -> Customize -> Site Identity. This is what I see on my screen: https://www.screencast.com/t/jwg8SWitCT

[Author]

Posts