- This topic has 19 replies, 3 voices, and was last updated 3 years, 3 months ago by
David.
-
AuthorPosts
-
October 4, 2019 at 9:18 pm #1026649
Carol
I love this theme~! I’ve been looking for something like this for a while.
Question: Can you please explain why using a CSS plugin isn’t good to do along side GP?
Does it make the GP run slower or something?
I’m new to all this, so really want to know.
In header, I’d love to have my logo to the left, nav. menu in the middle, and custom search field to the right in header.
I can build this, (except for blue icon), with the CSS plugin I have, but not in the header where I want it – just in sidebar or elsewhere.
Hate to bug you guys, but truly wondering if I should just delete my CSS plugin or if it’s okay to use.
Thanks for all the help.
Fantastic theme and exceptional support!
Carol
X80Ws+031v45
October 5, 2019 at 6:49 am #1026846David
StaffCustomer SupportHi there,
Some people have great experiences with them, others do not.
My concern is the plugin adds extra code in order to add the CSS. Which is a bit overkill if you’re only looking to make a few styling changes.If you want we’re more then happy to provide some CSS to create the style you’re looking for.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 5, 2019 at 7:25 am #1026869Carol
Thanks for the reply.
Would it be difficult to put that search above to the right of the nav menu?
If not, no worries.
Thank you.
October 5, 2019 at 7:42 am #1026875David
StaffCustomer SupportYou could add the search widget to the Customizer > Widgets > Header Widget.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 5, 2019 at 8:01 am #1027021Carol
That’s a great idea.
I did that.
Now, how to get the nav. menu center on header?
Thank you so much!
October 5, 2019 at 8:35 am #1027044David
StaffCustomer SupportAdd this CSS:
.inside-header { display: grid; grid-template-columns: auto auto; justify-items: end; } .site-logo { justify-self: start; }
Then try this CSS for styling the search widget – adding the search icon isn’t really possible with the standard WP search widget:
.search-form { display: flex; } .search-form>* { border-radius: 50px; } .header-widget { border-radius: 50px; background-color: #eee; padding: 5px; } .nav-float-right .header-widget .widget { padding-bottom: 0; } .search-form input.search-field { border: none; background-color: transparent; color: #000; } .search-form input[type=submit], input[type=search] { padding: 2px 15px; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 5, 2019 at 10:02 am #1027087Carol
Thanks.
“Unknown property” in code.
1) How to put Nav. menu center on same line as logo?
2) Search style change
– When entering text in search, text is white – needs to be black.
– Height of search needs to be much less, maybe 60% of what’s there.
– Don’t want search gold button or any image unless a little icon.
– Can you add a magnifying glass?
Thank you very much.
October 5, 2019 at 10:33 am #1027103David
StaffCustomer SupportYou can ignore those two warnings in the additional CSS – WordPress uses an old CSS lint which doesn’t do CSS Grid properties.
I adjusted the CSS above to make those changes. The button uses the Customizer > Colors > Buttons settings.
Adding an icon is not possible with the standard WP search widget unfortunately.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 5, 2019 at 11:09 am #1027125Carol
Okay, will ignore that message. Thank you!
Still would like to…
1) Don’t want any search button at all.
2) Search field not as wide – decrease by about 1/4 (more like image example).
3) Drop shadow and blur like image sample of blue search?
3) ** Nav. menu still isn’t centered – it’s broken to the next line.
Thank you so much.
October 5, 2019 at 11:40 am #1027153David
StaffCustomer SupportI edited the CSS above to remove the button.
The Nav looks ok to me – its inline with the logo ?Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 5, 2019 at 11:47 am #1027155Carol
Thanks.
I was editing my message above as you were posting. π
This is my view:
Nav. menu still on second line…
I know this is nitpicky, but can the Search word have no elipses? lol
Thank you so much!!!
I can wait on this…no hurry at all.
October 5, 2019 at 3:34 pm #1027241David
StaffCustomer SupportSo do you want the logo – nav – search all in the inline ?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 5, 2019 at 4:22 pm #1027258Carol
Yes.
logo left, nav. menu center, search on the right.
Thanks.
October 6, 2019 at 4:46 am #1027455David
StaffCustomer SupportOk totally misread that π
So replace the first part of the CSS with this:.inside-header { display: flex; align-items: center; } .header-widget { order: 5; top: unset !important; } .main-navigation { margin-left: auto; margin-right: auto; }
To reduce the width of the search field try this:
.widget .search-field { max-width: 15ch; }
CH unit is characters so that would be 15 text characters wide.
Box shadow will need to be applied to the header-widget eg.
.header-widget { box-shadow: 0 2px 10px 3px rbga(0,0,0,0.5); }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 6, 2019 at 6:53 am #1027507Carol
David! My nav. menu is center on same line with logo! Yay!! π Thank you!
* I don’t know where to put that code for “header widget”…I don’t think I have a header widget.
This is my view:
Could we tweak search a bit when you’re not too busy?
1) Search field thinner – lessen height (like blue example pic)
2) Remove elipses
3) Font size of “Search” smaller, maybe by 2pt, and bold
4) Background of search field white w/ drop shadow and blur/spread to mimic sample image. Color of blur is: #CDE1F2 (So technically, there’s no border, but the border will be the shadow/blur because the bg is white.)
No hurry at all. Thank you very much!!!
Carol
-
AuthorPosts
- You must be logged in to reply to this topic.