Hero theme – merge and expand footer widget columns

  • Unknown's avatar
    nilla2014 · Member ·

    Hi,
    The Hero theme contains 4 footer widgets and the separate WP site info line. I’d like to merge the 4 widgets into 3 only and expand column widths:
    left widget – copyright text
    centre widget – social media buttons
    right widget – WP site info text

    Hope I can do this with CSS? Many thanks.

    The blog I need help with is: (visible only to logged in users)

  • staff-happychia · Staff ·

    Please add copyright text to First Footer Widget Area, social media buttons to Second Footer Widget Area. Don’t add anything to Third and Fourth Widget Areas.

    Add the following style and see if you like the result:

    #colophon #tertiary .widget-area {
	margin-right: 27%;
}
  • Unknown's avatar
    nilla2014 · Member ·

    Thanks for the code. I’ve added everything but as the widget columns are still too narrow, everything displays vertically.
    I need to expand the first and second footers and if possible place the WP Site info text in the 3rd widget (or at least on the same line as the widgets). Or as my previous question, can I merge 4 widgets to 3 widgets?

  • staff-happychia · Staff ·

    Hero theme has the space to add 4 widgets (each with 23% width) in the footer, besides the WP site info.

    Unused widget space is still blocked, but left blank. So there is nothing to merge. We can only manipulate the width using CSS.

    I got this effect in my footer: https://cloudup.com/cjHUngtfBbG using the following CSS:

    #colophon #tertiary .widget-area {
float: left;
margin-right: 2%;
width: 48%;
}

.site-info:before {
display: block;
content: "Text";
margin-top: -60px;
font-size: 25px;
}

    It is difficult to work on the styles without looking at your site.

  • Unknown's avatar
    nilla2014 · Member ·

    Sorry, thought I’d made my site public-it’s public now.

    I’ve added the above code and you can now see how this displays.Perhaps I have some other code that’s interfering as it’s not displaying like your footer.

    I was advise to post the question on the CSS forum about merging the 4 widgets to 3 as this could be done in the Hero theme.

  • staff-happychia · Staff ·

    You have quite a bit of custom CSS. I removed everything (locally) and added the CSS I gave you earlier (with slight amend) to get https://cloudup.com/cJWrBBv00U7

    Please give title to copyright text and social icon widgets and see how it looks overall.

    It is perhaps a good idea to clean up your custom CSS and remove unused styles and be sure of the rationale for existing styles.

  • The topic ‘Hero theme – merge and expand footer widget columns’ is closed to new replies.