social media footer | PenciDesign Support

PenciDesign Supporter replied

5 years ago

Staff Reply

Hi,

Please use this CSS code to change the font size of the title:

.footer-instagram h4.footer-instagram-title span {
    font-size: 32px;
}

There is no option to add the custom content below the images.

Regards,
PenciDesign.

boezem replied

5 years ago

Customer Reply

Hallo,

Thanks you, but is there also a code to adjust the height and colors for the content above/below the images? See attachment.

PenciDesign Supporter replied

5 years ago

Staff Reply

Hi,

If you want to advance customize, you must edit by adding more CSS code. For example background color and spacing:

.penci-insta-thumb ul.thumbnails li {
    padding: 0 10px; /* spacing  */
}
.penci-insta-thumb ul.thumbnails li a:after {
    background: red; /* background color */
}

Regards,
PenciDesign.

boezem replied

5 years ago

Customer Reply

Hello,

Thank you very much!!

The only thing I have trouble with now is to adjust the style, the background, colors and distances for example in the Instagram footer. This does not work when editing the Widget and also not in the customizer. How do I do this?

Regards,

Saya

PenciDesign Supporter replied

5 years ago

Staff Reply

Hi,

Please go to Appearance → Customize → Additional CSS then add the following custom CSS code:

:root {
    --penci-insta-thumb-color: #fff; /* change color here */
    --penci-insta-thumb-width: 1px; /* change border width */
    --penci-insta-thumb-spacing: 15px; /* change spacing */
}
.penci-insta-thumb li:before,
.penci-insta-thumb li:after {
    pointer-events: none;
}
.penci-insta-thumb li:before,
.penci-insta-thumb li:after {
    position: absolute;
    top: var(--penci-insta-thumb-spacing);
    right: var(--penci-insta-thumb-spacing);
    bottom: var(--penci-insta-thumb-spacing);
    left: var(--penci-insta-thumb-spacing);
    content: '';
    opacity: 0;
    -webkit-transition: opacity 0.50s, -webkit-transform 0.50s;
    transition: opacity 0.50s, transform 0.50s;
    z-index: 2;
}
.penci-insta-thumb li:before {
    border-top: var(--penci-insta-thumb-width) solid var(--penci-insta-thumb-color);     border-bottom: var(--penci-insta-thumb-width) solid var(--penci-insta-thumb-color);
    -webkit-transform: scale(0, 1);
    transform: scale(0, 1);
}
.penci-insta-thumb li:after {
    border-right: var(--penci-insta-thumb-width) solid var(--penci-insta-thumb-color);
    border-left: var(--penci-insta-thumb-width) solid var(--penci-insta-thumb-color);
    -webkit-transform: scale(1,0);
    transform: scale(1,0);
}
.penci-insta-thumb li:hover:before,
.penci-insta-thumb li:hover:after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

Regards,

PenciDesign

boezem started the conversation

5 years ago

Conversation Start

Hello,

I would like to adjust my social media footer like the attached example (or see https://buzzblogprotheme.com/fashion). However, I can't find these settings (in the Widget area or in the Customizer). For example, the frame that arises with hover (mouse-over). Also, it is not possible to adjust the colors or change de border space.

Can you help m?

Regrads,

Saya