Tag: topic

I have a website that I customize for a client and I admit that I'm not too familiar with generating SVGs.

The site – HERE VERBUNDEN uses a topic with an integrated review function and currently uses a hexagon as a shape. My customer wants it to be a square instead.

I found the area with the shape in the theme files, but if I change the hexagon into a circle, it will not be properly formatted nor will it look so good. I was hoping a simple new SVG path would solve the problem, but it doesn't seem to be. It seems to completely discard the formatting.

Any guidance or support you can give would be greatly appreciated

The code that generates the hexagon serves as a reference below. In the middle is the "Path" section that creates the hexagon.

PHP CODE

 $reviewScoreOutput = '';
        if(($reviewScore != '') && ($reviewScore > 0)) {
            $reviewScoreOutput .= '
';
            $reviewScoreOutput .= '
';
            $reviewScoreOutput .= '';
            $reviewScoreOutput .= ''.$reviewScore.'';
            $reviewScoreOutput .= '
';
            $reviewScoreOutput .= '
';
        }

CSS CODE

.post-score {
display: inline-block;
color: #fff;
font-weight: 700;
line-height: 1;
text-align: center
}

.post-score__inner {
    position: relative;
    z-index: 10
}

.post-score-star {
    font-size: 1.2em;
    line-height: 1;
    color: #f7e74a
}

.hexagon-svg {
    width: 100%;
    height: auto
}

.post-score-hexagon {
    position: relative;
    display: inline-block;
    line-height: 0;
    vertical-align: middle
}

.post-score-hexagon .hexagon-svg {
    width: 50px;
    padding: 2px;
    -webkit-filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.25));
    filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.25));
    overflow: visible
}

@media(min-width:768px) {
    .post-score-hexagon .hexagon-svg {
        width: 60px
    }
}

@media(min-width:1200px) {
    .post-score-hexagon .hexagon-svg {
        width: 64px
    }
}

.post-score-hexagon .hexagon-svg g path {
    fill: #fc3c2d
}

.post-score-hexagon .post-score-value {
    position: absolute;
    top: 50%;
    right: auto;
    bottom: auto;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    text-shadow: 0 0 10px rgba(0, 0, 0, .08)
}

@media(min-width:768px) {
    .post-score-hexagon .post-score-value {
        font-size: 22px
    }
}

@media(min-width:1200px) {
    .post-score-hexagon .post-score-value {
        font-size: 26px
    }
}

.post-score-hexagon--s .hexagon-svg {
    width: 50px
}

.post-score-hexagon--s .post-score-value {
    font-size: 20px
}

.post-score-hexagon--l .hexagon-svg {
    width: 100px
}

.post-score-hexagon--l .post-score-value {
    font-size: 42px
}

.post-score-hexagon--xl .hexagon-svg {
    width: 100px
}

@media(min-width:1200px) {
    .post-score-hexagon--xl .hexagon-svg {
        width: 120px
    }
}

.post-score-hexagon--xl .post-score-value {
    font-size: 42px
}

@media(min-width:1200px) {
    .post-score-hexagon--xl .post-score-value {
        font-size: 50px
    }
}

.mnmd-review .post-score-hexagon .hexagon-svg {
    -webkit-filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.3));
    filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.3))
}