- This topic has 21 replies, 3 voices, and was last updated 3 years, 2 months ago by
Tom.
-
AuthorPosts
-
October 2, 2019 at 4:15 pm #1024748
Jose
(I’m using GP Premium)
As I say in the title, I have some problems with the footer.
I’ve done an entire redesign of my personal portfolio and I’m trying to configure the footer to look the same as I designed. The problem is that I don’t know how to solve some problems, because I just know a little of coding.
So, this is my footer design https://imgur.com/a/Ibhp3NY and these are my questions.
Should I use the widgets footer or the footer bar?
In both cases, how can I center the text?
How can I use a horizontal rule?
Following the last, how can I set the social icons above the horizontal rule?
How can I use a gradient in the footer?
And the last one, how can I edit the height to have exactly the height that I designed?Here is some information about the design of the image.
The text occupies 927px width
The height of the footer is 227px
The width of the horizontal rule is 1406px and have a size of 0.5px
Linear gradient colors are #373737 and #000000October 2, 2019 at 4:45 pm #1024768David
StaffCustomer SupportHi there,
first off best to get the content into the site and then we can look at the CSS required.
1. Customizer > Layout > Footer and set Footer widgets: 2
1.1 While you’re here edit the Copyright text and add<!-- no copy -->
2. Add your Content to Footer Widget 1 and the Form to Footer Widget 2.
3. Then in your Footer Bar widgets add your Menu and Social Icons.Once you have done that can you share a link to your site and ic an look at the CSS required for the layout and styling.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 2, 2019 at 4:56 pm #1024772Jose
Maybe the image makes some confusion.
The form is still in the body, and that isn’t a problem.
Is that what you meant when you said to put the form in footer widget 2?
October 2, 2019 at 5:44 pm #1024798David
StaffCustomer SupportSo you only need to add the Menu and the Social Icons ?
If so then they just do 1.1 and 3.
If you can share a link to the Site it would make things easier.Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 2, 2019 at 5:45 pm #1024800Jose
I can’t because it isn’t up in this moment, but I can post anything you need, vids or images. I’m going to try your tips and writte again once I’ve done.
October 3, 2019 at 2:25 am #1025009David
StaffCustomer SupportOK makes it trickier for us to provide the necessary CSS but if you can set the footer bar up as above then we can provide some guidance.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 3, 2019 at 6:41 am #1025215Jose
Hi again David, I did what you said in your last message, and this is what I got.
I’ve added the horizontal rule with a code provided by you that I saw in a topic, but I’m open to do everything you say.
So, I’ve added in the Footer Widget 1 a “Menu” and in the Footer Widget 2 a text with three images. Is that the correct way to do?
October 3, 2019 at 7:30 pm #1025788Tom
Lead DeveloperLead DeveloperHi there,
Is there no way we can get a copy of this site on a temp live server? If not, we’ll just be guessing with the specific CSS needed.
If you can get it live just temporarily, we can provide CSS that should work perfectly the first time.
Let me know ๐
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentNovember 8, 2019 at 7:21 am #1057053Jose
Hi Tom!
I’ve recently finished some works that was slowing the develop of the web, so, I’ve reactivated the website to continue with the process.
Here is my web in construction -> https://holasoyjose.es/
And I have 2 problems to solve:
1) As I said a few messages before, I need to set the footer as I show in my first message, and that was what we were trying to.
2) I’ve configured the nav of “Inicio” page as “transparent nav menu” with Elements, but I don’t know why it doesn’t works. I thought that it could have been because I centered the logo with this tutorial -> https://docs.generatepress.com/article/centering-logo-navigation/
I’ve been waiting your answers.
Thanks again.
November 8, 2019 at 4:15 pm #1057414Tom
Lead DeveloperLead DeveloperHi there,
So it looks like you need to:
1. Add an HTML/Text widget into the first widget area, and add a heading with some text. The word you need in different colors needs to be inside a span:
<h2>My heading <span class="highlight">here</span></h2>
2. Add a form shortcode into the second widget area.
Then you can style the footer widget area in the Customizer to match those colors.
Once that is done, I should be able to help with the CSS to match things a little bit closer.
For your Header Element, is it set to display on the “Front Page”?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentNovember 10, 2019 at 1:59 pm #1058918Jose
Hi Tom, I think that we are missunderstanding.
I need to configure the “black footer” that appears in my first image, not the blank space that have text and a form, because if you see my web with the link that I provided, you’ll see that I’ve already done.
I need to put the black section as in my first image. 4 words, an horizontal bar that divide the words and de social icons, and the social icons.
That last steps that I followed was what David said to me, in which he say “3. Then in your Footer Bar widgets add your Menu and Social Icons.”
November 10, 2019 at 8:16 pm #1059049Tom
Lead DeveloperLead DeveloperAh, sorry about that!
You currently have those widgets in the Footer Widgets area – can you try the “Footer Bar” widget area, instead?
Then, set it to center in Customize > Layout > Footer.
Let me know ๐
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentNovember 11, 2019 at 1:39 am #1059164Jose
Done! It looks closer than before to my design. Now we need to adjust the size and space and put an horizontal bar between that footer bar menu and social icons.
And I’ve done the change in the Menu Nav as you said setting in “Front Page” and it works!. Later, I’ll need a help to configure some things in the Menu Nav too, but first I’ll finish the footer.
November 11, 2019 at 5:45 am #1059349David
StaffCustomer SupportSo this CSS for adding some space around the menu and add the underline:
.footer-bar .widget_nav_menu { padding: 20px 0 30px 0 !important; border-bottom: 1px solid #ccc; margin-bottom: 40px !important; }
You’re social icons are just images – are you going to add links there ? Don’t want to provide some CSS that won’t work if you update the HTML
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/November 11, 2019 at 12:40 pm #1059879Jose
Yes David, in the end, the social icons will be linked.
I’ve used your code and it works correctly, now if you see my website, you’ll see that I need more space between words.
-
AuthorPosts
- You must be logged in to reply to this topic.