Join the Soledad Facebook Users Group here
for Share, assistance, discussion, and Updates related to Soledad WordPress Theme.

If you can't create a new ticket - you can send us an email via our contact form and we will get back to you.

Okay
  Public Ticket #2818759
social media footer
Closed

Comments

  • boezem started the conversation
    July 5, 2021 at 5:57pm

    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

  •  2,494
    PenciDesign replied
    July 6, 2021 at 3:32am

    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 replied
    July 6, 2021 at 1:38pm

    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

  •  2,494
    PenciDesign replied
    July 6, 2021 at 4:00pm

    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
    July 7, 2021 at 8:22am

    Hallo, 

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

  •  2,494
    PenciDesign replied
    July 7, 2021 at 8:54am

    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.