Add Widgets to footer

  • Author
    Posts
  • #147960

    beverlycooks
    Member

    Hi,

    Is it possible to add widgets to the footer? I do not want a sidebar but I do want to add a search widget somewhere. Is there anywhere I can add a search widget apart from the sidebar?

    The blog I need help with is happynut.recipes.

    #147961

    beverlycooks
    Member

    Also, if I do use a sidebar is it possible to make the header image the full width of the screen? I would like the sidebar to stop when it reaches the header image. Thanks!

    #147969

    lelandf
    Theme Author

    Hi there,

    Since you have a Premium plan, we’re pretty limited by Custom CSS. Ideally we’d be moving elements around on the page in other ways, but we may be able to make do with Custom CSS for now.

    To answer your questions:

    “Is it possible to add widgets to the footer?”

    No. As stated in the Setup guide: Owari has one area to display widgets, in the sidebar.

    “if I do use a sidebar is it possible to make the header image the full width of the screen?”

    Not really. The theme is not marked up for this kind of flexibility with Custom CSS. See this attached screenshot in which you can see the header and content area are wrapped in the same column.

    There is probably some really janky way to absolutely position the header to be full width, then setting top padding on the content and sidebar elements, to simulate as though the header were still part of the document flow. Absolute positioned elements are taken out of the document flow, as if they have 0 height. It would be a pretty messy solution.

    Instead, I’ll focus on moving the search box to another location on the page.

    “Is there anywhere I can add a search widget apart from the sidebar?”

    1. Add the Search widget and only the search widget to your sidebar. At this point, your site should look something like this: https://cloudup.com/cJGMtQVuYxX

    2. Add the following Custom CSS to the page:

    body .widget_search {
    	position: absolute;
    	top: -44px;
    	width: 200px;
    	right: 1px;
    	margin: 0;
    }
    
    body .header-content-wrap,
    body .site-footer {
    	width: 100%;
    }
    
    .widget-area {
    	padding: 0 !important;
    }
    
    body .site {
    	max-width: 1200px;
    }

    At this point, your site should look something like this: https://cloudup.com/cyrRG7SpK3M

    Search box moved to header. Sidebar apparently removed.

    I can’t see your site to be sure, although I’m assuming you’re not using social icons. If you are, just increase the “right” value on the .body .widget_search rule to push the search bar away from them.

    Also, the “width” of the search box can be adjusted if you have too many menu items. Right now it’s set to 200px.

    Best of luck and let me know if you have any other questions!

    -Leland

    #147992

    beverlycooks
    Member

    That worked, thanks!

    Another question, on my categories pages an example of a title is “Category:Dessert”. Is it possible to get rid of the word “Category:”? Just leave the word dessert.

    Thanks
    Bev

    #147993

    beverlycooks
    Member

    One more thing, is it possible to change the colour of the background on the left and right hand side? (currently light grey). Thanks!

    #148040

    lelandf
    Theme Author

    Hi there,

    Another question, on my categories pages an example of a title is “Category:Dessert”. Is it possible to get rid of the word “Category:”? Just leave the word dessert.

    Not a straightforward way of doing that with the theme’s current HTML markup.

    Took me a while but I thought of a janky solution that uses Custom CSS to hide the entire original page title, then writing it out a new title in a nearby element while mimicking all the original page title styles.

    This would need to be done on each category, as outlined below:

    /* This hides the original category page title */
    .category .page-title {
    	display: none;
    }
    
    /* This mimics the styles across all category page titles */
    .category .page-header {
    	clear: both;
    	color: #000;
    	font-weight: 700;
    	font-size: 2em;
    	margin: .67em 0;
    	padding-top: 36px;
    	font-size: 48px;
    	line-height: 1.5;
    }
    
    /* Still mimicking styles across all category page titles, this time at narrower window widths */
    @media (max-width: 400px) {
    	.category .page-header {
    		font-size: 30px;
    	}
    }
    
    /* This is how you write out new page titles for each category */
    .category-desserts .page-header:before {
    	content: "Desserts";
    }
    
    .category-cookies .page-header:before {
    	content: "Cookies";
    }
    
    .category-frozen-cakes .page-header:before {
    	content: "Frozen Cakes";
    }

    is it possible to change the colour of the background on the left and right hand side? (currently light grey).

    WordPress.com has some built-in features for customizing colors like this, as seen in the Owari setup guide: https://wordpress.com/theme/owari

    Some more information on WordPress.com color customization features can be seen here: https://en.support.wordpress.com/custom-design/custom-colors/

    It doesn’t look like the left background is customizable with that, so you can use Custom CSS for that part, like so:

    body .header-content-wrap,
    body.longer-sidebar .main-wrap {
    	background: yellow;
    }

    That’s a pretty ugly example so feel free to replace yellow with any valid CSS color value: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value

    Finally, while I’m happy to help with these sorts of things and it’s fun for me to solve these sorts of puzzles, I wanted to let you know about WordPress.com’s CSS Customization support forum that may be a useful resource for you for future questions of a CSS-focused nature: https://en.forums.wordpress.com/forum/css-customization/

    I get that it’s kind of a blurred line between CSS customization support and theme support, just wanted to let you know in case you weren’t aware of it already. If in doubt, or if you use that forum and a solution while using Owari (or another one of my themes) isn’t adequate, feel free to ask me in the premium theme support forum and I’ll see what I can do!

    Best regards,
    Leland

    #148051

    beverlycooks
    Member

    Thanks for that, I was able to hide the category titles and add my own. However, the font was not right, I have selected Ubuntu for the font I’m using, can the titles be changed to this font? Thanks

    #148053

    beverlycooks
    Member

    I have just checked my website on my iphone and ipad, unfortunately the position of the search bar is absolute and therefore is in the wrong position on both devices. On the iphone and ipad it blocks my social icons and on the iphone it also blocks my main menu. Is there a solution to this? Thanks

    #148054

    beverlycooks
    Member

    By the way, my website is no longer private so you can try to view it on various devices http://www.happynut.recipes

    #148076

    lelandf
    Theme Author

    I have selected Ubuntu for the font I’m using, can the titles be changed to this font?

    It looks like you figured this out? FYI, in the .category .page-header rules, I’d probably change:

    font-family: ubuntu

    to:

    font-family: ubuntu, sans-serif;

    In the unlikely event the Ubuntu font was unavailable, you would be sure it would at least fall back to a sans-serif system font. Not a huge deal, just wanted to point that out because it’s what I would do.

    On the iphone and ipad it blocks my social icons and on the iphone it also blocks my main menu. Is there a solution to this?

    It looks like you figured out how to move the search box over so as to not block social icons on the iPhone/iPad anymore?

    Anyway, this Custom CSS will make sure the position of the search box is adjusted to be all the way to the right at the responsive breakpoint (this is when the social icons are moved out of the top bar, so it matches up with that):

    @media (max-width: 799px) {
     body .widget.widget_search {
      right: 0;
     }
    }

    By the way, my website is no longer private so you can try to view it on various devices http://www.happynut.recipes

    Awesome, thanks for the heads up! Your site looks cool! I was kinda flying blind because some of the items were dependent on things I couldn’t see like custom fonts, social links menu usage, etc…so this definitely helps.

    Let me know how this goes!

    Best regards,
    Leland

    #148082

    beverlycooks
    Member

    Thank you so much, it’s all working great! One minor thing, on my iphone and ipad the social icons appear in the drop down bar of my main menu which is fine, however the search bar is also next to the social icons in the drop down menu. Can this be removed? Thanks!

    #148099

    lelandf
    Theme Author

    Ah, I see what you’re saying. The search box is next to the social icons on mobile when the mobile menu is active. It also covers up a couple of them (Pinterest and YouTube) at some phone-specific widths.

    I have another janky solution for you. This isn’t exactly hiding the search box when the mobile menu toggle is active, it’s just covering it up with an empty white box.

    Also, I’m layering the social icons on top of that empty white box so the Pinterest and YouTube icons are no longer hidden.

    /* This covers up the entire bottom part of the mobile menu with an empty white box */
    .main-navigation.toggled .social-links:after {
      background: #fff;
      content: "";
      display: block;
      height: 48px;
      width: 100%;
      bottom: 0;
      position: absolute;
      z-index: 2;
    }
    
    /* This layers the social links on top of the aforemnetioned empty white box */
    .main-navigation.toggled .social-links .menu {
      position: relative;
      z-index: 3;
    }

    Let me know how this works out!

    Best regards,
    Leland

    #148119

    beverlycooks
    Member

    It all works perfectly, thank you so much! Really appreciate your efforts!

    #148122

    lelandf
    Theme Author

    It all works perfectly, thank you so much! Really appreciate your efforts!

    Awesome! So glad to hear that!

    Best of luck with your new site.

    -Leland

The topic ‘Add Widgets to footer’ is closed to new replies.