Community Forums › Forums › Archived Forums › General Discussion › What File Do I Modify to Change Header Layout and Design
- This topic has 14 replies, 2 voices, and was last updated 6 years, 10 months ago by cartess3.
-
AuthorPosts
-
May 14, 2017 at 10:08 am #206413cartess3Member
I'm currently using the AgentPress theme... I'd like to modify the layout at the top of the pages to look like the custom landing page I put on the front of the website. I'm trying to determine where I should go.
Here's the inner pages of the site which shows the default layout up top:
http://ameliahomes.wpengine.com/image-aligned-right/
Here's the page I want the top to look like:
https://ameliahomes.wpengine.com/I made that page using a landing page builder ... But now I want to make the inner pages of the AgentPress theme to look like the top because I like the features inside of AgentPress.
Please advise where I should go to look at making these changes so I can have a consistent look throughout the website.
May 15, 2017 at 6:49 am #206455Victor FontModeratorThere is no single file to change. All the styles, i.e., borders, colors, etc., need to be changed or added to the child theme's style.css.
To get the top bar, you register a new sidebar in functions.php and display it in the genesis_before_header hook. Google Carrie Dills tutorial for adding a utility bar to a Genesis theme.
You have to remove_action for the menu in functions.php and display it in the header right widget area instead. If the header right widget area is not available on the appearance/widgets page, then it has been disabled in functions.php. You would have to remove the code that disables it.
This all requires php, CSS, and HTML skills to accomplish and should take about an hour to complete.
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?May 19, 2017 at 11:28 am #206711cartess3MemberThank you Victor for taking the time to explain. I sincerely appreciate it. I have css/html skills, but never modified a theme on my own before. I will start here. Thanks again!
May 19, 2017 at 1:20 pm #206713cartess3MemberHmmmm...
When I added that code from Carrie's page, my site crashed and had to restore from back up... Is the code no longer working. I copied and pasted as shown below:
I'm using AgentPress Pro Theme
/** Register Utility Bar Widget Areas. */
genesis_register_sidebar( array(
‘id’ => ‘utility-bar-left’,
‘name’ => __( ‘Utility Bar Left’, ‘theme-prefix’ ),
‘description’ => __( ‘This is the left utility bar above the header.’, ‘theme-prefix’ ),
) );genesis_register_sidebar( array(
‘id’ => ‘utility-bar-right’,
‘name’ => __( ‘Utility Bar Right’, ‘theme-prefix’ ),
‘description’ => __( ‘This is the right utility bar above the header.’, ‘theme-prefix’ ),
) );May 20, 2017 at 6:04 am #206736Victor FontModeratorCarrie's code is correct, but somewhere along the line the quotes in the code were converted to curly quotes instead of straight quotes. The quotes in PHP have to be straight quotes, otherwise the code crashes.
Also, in Carrie's code, you have to change the theme-prefix to match your child theme's prefix. The theme-prefix for your theme is agentpress.
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?May 20, 2017 at 7:24 am #206746cartess3MemberAWESOME Victor. That fixed it!!!
Here's the corrected code with the 'straight-quotes'
/** Register Utility Bar Widget Areas. */ genesis_register_sidebar( array( 'id' => 'utility-bar-left', 'name' => __( 'Utility Bar Left', 'theme-prefix' ), 'description' => __( 'This is the left utility bar above the header.', 'theme-prefix' ), ) ); genesis_register_sidebar( array( 'id' => 'utility-bar-right', 'name' => __( 'Utility Bar Right', 'theme-prefix' ), 'description' => __( 'This is the right utility bar above the header.', 'theme-prefix' ), ) );
May 20, 2017 at 8:12 am #206758cartess3MemberUgh... I thought I was making process, but now the two widgets seem to display on top of teach other in the header. They're not showing in the right side (only the left)
May 20, 2017 at 8:24 am #206759Victor FontModeratorYou have to add the CSS to styles.css to display them properly.
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?May 20, 2017 at 8:55 am #206760cartess3MemberI'd added the following earlier to styles.cc
Did I do something wrong?
/* Utility Bar --------------------------------------------- */ .utility-bar { background-color: #333; border-bottom: 1px solid #ddd; color: #ddd; font-size: 12px; font-size: 1.2rem; padding: 10px 0; padding: 1rem; } .utility-bar a { color: #ccff33; } .utility-bar a:hover { text-decoration: underline; } .utility-bar-left, .utility-bar-right { width: 50%; } .utility-bar-left p, .utility-bar-right p { margin-bottom: 0; } .utility-bar-left { float: left; } .utility-bar-right { float: right; text-align: right; } .utility-bar input[type="search"] { background: inherit; padding: 10px 0 0; padding: 1.0rem 0 0; }
May 20, 2017 at 8:57 am #206761cartess3MemberI'd assume this part of the code would make it work:
}
.utility-bar-left,
.utility-bar-right {
width: 50%;
}.utility-bar-left p,
.utility-bar-right p {
margin-bottom: 0;
}.utility-bar-left {
float: left;
}.utility-bar-right {
float: right;
text-align: right;May 21, 2017 at 8:57 am #206799cartess3MemberDoes anyone know why the widgets appear on top of each other in the header?
I followed Carrie Dills tutorial for adding a utility bar to a Genesis theme.
Any advice would be appreciated.
Sincerely
May 21, 2017 at 1:12 pm #206805Victor FontModeratorWhen I view your site, the widgets are side-by-side. They are not on top of each other.
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?May 21, 2017 at 2:20 pm #206808cartess3Memberhmmmm ... That's odd. Looks like it corrected itself.
Thanks!
May 22, 2017 at 10:22 am #206839cartess3MemberI know y'all are tired of hearing from me ... And please know that I've been trying and trying. Spent 8 hours trying to short this out but can't seem to figure it out. I've restored my backup countless times but can't figure it out. Probably staring me right in the face.
I'm trying to get the dark grey utility bar to be the same width as the blue navigation menu:
https://ameliahomes.wpengine.com/contact/ANd then I"m trying to get the text within each of the widgets to be responsive when it's viewed on mobile devices.
I almost got that figured out as I've managed to get the right utility bar to be centered. But no matter what I do, I can't get the left utility bar to respond, nor get it centered.
Prior to the few changes I made, when it responded, the content in both utility boxes sat side by side.
The few changes I've made finally got it some they stack on top of each other when the screen resizes.
Any help is appreciated.
May 23, 2017 at 1:26 pm #206883cartess3MemberAny suggestions?
-
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.