[Resolved] Building a website from scratch using GenerateBlocks

[Leo]

The logo width slider is not there as you’ve activated the navigation as header option in the customizer so the logo size is controlled by the menu item height setting as explained here:
https://docs.generatepress.com/article/navigation-as-a-header/#basic

The Donate template is just using float right as the navigation location without the nav as header option mentioned above.

[Yvon-Pierre]

Bingo! That did it! I’ve got the slider now and I was able to adjust the size of the logo. Thank you so much!

Ready for next step!

[Yvon-Pierre]

Maybe how to turn text red in Donate Today menu button?

[Leo]

Edit your CSS from:

.main-navigation .main-nav ul li.donate-today a {
    background-color: #ffffff;
    border: 2px solid #000000;
    color: #FF0000;
    line-height: 35px;
}

to this:

.main-navigation .main-nav ul li.donate-today a {
    background-color: #ffffff;
    border: 2px solid #000000;
    color: #FF0000 !important;
    line-height: 35px;
}

[Yvon-Pierre]

Yes, that worked! Gee you’re good! I guess adding the text ” !important;” brings the priority of this color setting to the top, over the default. Do I understand this correctly?

I tried to match the navigation settings in Donate so that when I hover on top of a menu item, it raises a bit but the best I could do was change the Navigation Test Hover to red! Should we look at this next?

Feel free to suggest other stuff to explore or documentation to read/view during the weekend, even if it’s just to have a better idea for next week’s steps.

At the risk of repeating myself, I really appreciate your guidance with this. Since this is viewable in the forum, I hope that others can benefit from this and that maybe it will become the basis for creating a beginner’s guide which shows newbies like me the steps in GP & GB to rebuild on their own a starter site (Donate in this case).

[Leo]

I tried to match the navigation settings in Donate so that when I hover on top of a menu item, it raises a bit but the best I could do was change the Navigation Test Hover to red! Should we look at this next?

That’s just using this CSS:

/* navigation hover lift */

.main-navigation .main-nav ul li > a {
	-webkit-transition: all 500ms ease-in-out;
	transition: all 500ms ease-in-out;
		-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

.main-navigation .main-nav ul li:hover > a {
	-webkit-transform: translate3d(0, -4px, 0);
	transform: translate3d(0, -4px, 0);
}

[Yvon-Pierre]

Cool! That’s working. I guess I’ll have to learn some CSS!

The last thing to fix in my primary navigation is the behaviour and colour of the “Donate” button when we hover on it. In the starter site, the button stays put and the background changes to a dark green or turquoise when you hover on it. In my case the button lifts like the other menus items and the background turns transparent.

Since I think this can be fixed with css, I tried to find the css on my own by installing the Donate Starter site on another sub domain and then explore the content using File Manager in cPanel. I went to the following directory: Home directory > public_html > wp-ds > wp-content > themes> generatepress > assets > css. Here is a picture of what I found in this css folder: https://www.screencast.com/t/ONiyPC1qw6q. I looked at the style.css and all.css files, searching for “main-navigation” to try to find the correct area but to no avail.

Can you please show me how to fix the “Donate” button in my navigation so that it stays put and the colour changes to dark green when we hover on it? Also, if you could point to where I should have looked for the css, I would appreciate it?

Thanks!

[Leo]

That’s working. I guess I’ll have to learn some CSS!

We are always happy to help with the custom CSS we used in the templates.

The last thing to fix in my primary navigation is the behaviour and colour of the “Donate” button when we hover on it. In the starter site, the button stays put and the background changes to a dark green or turquoise when you hover on it. In my case the button lifts like the other menus items and the background turns transparent.

Try this with the previous CSS:

.main-navigation .main-nav ul li.donate-today a:hover {
    background-color: #000 !important;
    color: #fff !important;
}

Since I think this can be fixed with css, I tried to find the css on my own by installing the Donate Starter site on another sub domain and then explore the content using File Manager in cPanel. I went to the following directory: Home directory > public_html > wp-ds > wp-content > themes> generatepress > assets > css. Here is a picture of what I found in this css folder: https://www.screencast.com/t/ONiyPC1qw6q. I looked at the style.css and all.css files, searching for “main-navigation” to try to find the correct area but to no avail.

The custom CSS used in templates can always be found in the Additional CSS field in the customizer.

Let me know if this helps 🙂

[Yvon-Pierre]

Great, thanks again for your help Leo and for your offer to help with css.

I checked in Appearance -> Customize -> Additional CSS. I do see the css for the navigation hover lift (message #2257427 above) but not the one for the button hover lift. I copied the one you gave me in the last message before this one (#2259286). It worked all right but I’m puzzled as to why it doesn’t show in the Additional CSS section of the starter site. Is there another place where I can find the css codes used in starter sites? No worries if it’s not easily accessible.

I’m ready for the next step. The footer maybe? Unless you think something else should be done first.

[Leo]

It worked all right but I’m puzzled as to why it doesn’t show in the Additional CSS section of the starter site.

Sorry – the Donate Today button is actually created through an Element called Navigation Donate Button in the original template:
https://www.screencast.com/t/jK4modUEm6UU

I just prefer the menu item method a little more in this case 🙂

I’m ready for the next step. The footer maybe? Unless you think something else should be done first.

Looks like you are making your way through the page content so let’s move on to the footer.

The footer is also created with a block element – site footer as explained here:
https://docs.generatepress.com/article/block-element-site-footer/

Take a look at the article and video and let me know if you have any questions.

[Yvon-Pierre]

“Sorry – the Donate Today button is actually created through an Element called Navigation Donate Button in the original template:
https://www.screencast.com/t/jK4modUEm6UU”

Got it! Now it makes sense. Thank you so much for showing me where to look to see how the Donate Today button was done. I explored the element and I’m pretty sure I could duplicate it.

I’m almost done with the footer. You can take a look here: https://donate.max4uni.com/wp_donate/

I just have to figure out the social media buttons. I’ll work on it tomorrow because I have to go now.

[Leo]

The social media buttons is just using a buttons block with icons:
https://docs.generateblocks.com/article/buttons-overview/
https://docs.generateblocks.com/article/buttons-overview/#icon

[Yvon-Pierre]

Hey Leo,

Thanks for your guidance and the great resources you point to. I especially like the resources with the little gif animations.

The footer is completed as well as the Home page (https://donate.max4uni.com/wp_donate/). Apart from the choice of pictures, I think it looks pretty similar to the original Donate Home page. Having installed the Donate starter site on a different sub-domain is a tremendous help to reverse engineer it and see the exact settings.

Only two things I cannot figure out:
1-The Shortcode on the Home page. I presume I need to create the blog articles first as this area is supposed to show the last three articles;
2-On the Home page, there is a gray bar in between the last content container and the custom footer. No idea how it got there and no idea how to remove it. I double and even triple checked the last content container and the custom footer element. I cannot see anything that is related to this gray bar. Maybe I have to change something in the default footer but I’m not sure if this intuition is correct.
I’d like to hear your thoughts on these two issues.

I’m thinking of working on the blog page and the blog articles next, unless you suggest something else.

As always, thank you so much for your help as I’m working into rebuilding the starter site and most importantly learning so much along the way.

[Leo]

1-The Shortcode on the Home page. I presume I need to create the blog articles first as this area is supposed to show the last three articles;

The shortcode is coming from the WP Show Posts plugin:
https://wordpress.org/support/plugin/wp-show-posts/

However, it can now be replaced with the Query Loop block we recently introduced in GB 1.5:
https://docs.generateblocks.com/article/query-loop-overview/

2-On the Home page, there is a gray bar in between the last content container and the custom footer.

Try removing the 80px of top margin added to the Container block of your footer element:
https://www.screencast.com/t/JjxiT1jdc

Let me know if this helps 🙂

[Yvon-Pierre]

“Try removing the 80px of top margin added to the Container block of your footer element:
https://www.screencast.com/t/JjxiT1jdc”

Yes, it did the trick. I’m impressed that you could go inside my website to see what’s going on. You have magical power!

By the way, how to you make the nice quotes from my messages in here? Is it by using the B-QUOTE button?

One thing I don’t understand though. In the Donate starter site that I installed in a different sub-domain (https://donate-starter.max4uni.com/wp-ds/), the container in the footer element does have a top margin set to 80px (this is where I got this settings). How come it doesn’t add the gray bar on the original starter site but it does on mine? Any idea why?

I’ll look into the Shortcode later on and will get back to you.

All the best!

[Author]

Posts