Home page manipulation

• 

  bowlesrocks · Member · Jun 22, 2016 at 6:23 pm

  • Copy link
  • Add topic to favorites

  Please take a look at my ‘work in progress’ site: https://wordpress.com/design/bowlesrocks.com

  You’ll hopefully see a home page split into a 2×2 grid.

  I have achieved this by setting page content to mosaic and the quantity set to 4. And then tagging the pages using ‘featured-content’ to pull into this section. A bit of a fudge but it works.

  My client has requested that each of the four cells contains not only the page title but the page summary and a call to action button or text link.

  I contacted the ‘Happiness Engineers’ who said that this was possible using css.

  I’d be very, very grateful for some assistance. Thanks.

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

• 

  thesacredpath · Member · Jun 23, 2016 at 5:08 am

  • Copy link

  @bowlesrocks, sorry, but these things are not possible with CSS. CSS is a styling document used by the browsers to style and position the elements of a web page. The elements have to be there in the HTML for us to do anything with them. We cannot add a div for s summary nor can we add an HTML link or call to action.

• 

  bowlesrocks · Member · Jun 24, 2016 at 5:50 am

  • Copy link

  I did think as much, but thought I’d ask anyway.

  Could I add a margin between the four boxes to add some separation?

  Thanks for the reply.

• 

  thesacredpath · Member · Jun 24, 2016 at 6:46 pm

  • Copy link

  Add this to the end of your custom CSS and see what you think. It does add a bit of white space to the left and right margins. We can get rid of that, but it is a bit complex. Let me know what you think and we can go from there.

  @media screen and (min-width: 640px) {
  	.home #featured-content article {
  		border: 2px solid #fff;
  	}
  }