Changing size or shape of feature pages (Circles)

  • Is it possible (and if so, how?) to change the size and/or shape of the circles on the front page for featured pages?

    Ideally we’d like rounded rectangles or similar with the same effect. I know it’s a big ask and I suspect the likely answer is “find a theme closer to our requirements” but I rather like this one ??

Viewing 3 replies - 1 through 3 (of 3 total)

  • You need to modify the border-radius property of .round div, using custom CSS, in different screen widths, using media queries. Here’s the pattern of the CSS, you just need to put your desired values in it, for each screen width (just narrow the browser window to see all cases):

    .round-div {border-radius: 170px;}

@media (max-width: 1200px) {
.span9.article-container .round-div {border-radius: 140px;}
.span6.article-container .round-div {border-radius: 110px;}
}

@media (max-width: 979px) {
.round-div {border-radius: 140px;}
.span9.article-container .round-div {border-radius: 110px;}
}

    The values have to be tested and changed (I haven’t tested them in possible layouts – both sidebars, one sidebar, no sidebars) but I hope I’ve set you on the right track.

    Thread Starter synaesthesia

    (@synaesthesia)

    Awesome. Reading up on css3.info for more details on this too, it’s a great learning resource ??
    Many thanks

    This answered my question and handled it beautifully. I Thank you too.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Changing size or shape of feature pages (Circles)’ is closed to new replies.