Codeless
  • Support Home
  • Themes
  • Support
  • WordPress Tutorials
    • How to Start a Blog
    • Best Website Builders
    • Best Small Business Hosting
    • Email Marketing Services
    • Cheap WordPress Hosting
  • Video Tutorials

Community Forums

add icons between rows – overlapping

    • 6 years, 1 month ago siqve006
      Participant

      Is this attached mockup possible in visual composer where I overlay an image over the separated colors of a row? and how would I go about doing this?

      https://www.dropbox.com/s/a7tbqwczcglezgv/mockup.png?dl=0

    • 6 years, 1 month ago Mirela
      Participant

      Hello,

      Yes, you can create this look by adding margin to the bottom row. Go to Row settings > Extra Class Name (screenshot), add a custom css class. Then in General Options > Custom Css box, add margin to the new class. Example:

      .row_with_margin{
           margin-top: -20px;
      }

      Best regards!

    • 6 years, 1 month ago siqve006
      Participant
      This reply has been marked as private.
    • 6 years, 1 month ago siqve006
      Participant
      This reply has been marked as private.
    • 6 years, 1 month ago Mirela
      Participant

      Hello,

      You can add this css to align the icon in mobile:

      @media (max-width: 979px){
      .row-dynamic-el .media .type_image.alignment_center {
          left: 100px !important;
      }
      }

      Add it to your Custom Css box in General options.

      -To add icons under slider and above footer, you need to follow the same structure as this row. Add an icon to the row under slider and add margin-top to make it go up.
      Add an icon to the row above footer (page’s last row), and add margin-bottom to make it go down.

      Best regards!

    • 6 years, 1 month ago siqve006
      Participant
      This reply has been marked as private.
    • 6 years, 1 month ago siqve006
      Participant

      Any idea how to have the icon overlay the footer rather than going behind it?

    • 6 years, 1 month ago Mirela
      Participant

      Hello,

      Sorry for the late reply.
      You can use this css to show icon above footer.

      .footer_wrapper {
          z-index: 0 !important;
      }
      .vc_row.section-style:last-child {
          background: transparent !important;
      }
      .full-width-content .span_12 { 
          z-index: 999999 !important;
      }
      section#content {
          background-color: transparent !important;
      }

      Best regards!

    • 6 years, 1 month ago siqve006
      Participant

      That works but it applies the transparent row backgrounds to the icons elsewhere on the page, so it needs to have a class added or something to be specific to that last row icon only.

    • 6 years, 1 month ago Mirela
      Participant

      Hello,

      Then add a css class to the row in Row settings and add that class to the code above.
      Example:

      .your-extra-class .vc_row.section-style:last-child {
          background: transparent !important;
      }

      Best regards!

    • 6 years, 1 month ago siqve006
      Participant

      that did it thanks

    • 6 years, 1 month ago siqve006
      Participant
      This reply has been marked as private.
    • 6 years, 1 month ago Mirela
      Participant
      This reply has been marked as private.
    • 6 years, 1 month ago siqve006
      Participant

      You had helped with the previous icon styling so just looking for help on this last style.

    • 6 years, 1 month ago siqve006
      Participant
      This reply has been marked as private.
    • 6 years, 1 month ago siqve006
      Participant

      I think I may have solved this with a background image actually.

    • 6 years, 1 month ago Mirela
      Participant
      This reply has been marked as private.
Viewing 16 reply threads

You must be logged in to reply to this topic.

Login

Log In
Register

Renew Support

  • Renew Specular Support
  • Renew Tower Support
  • Renew Folie Support
  • Renew Handel Support
  • Renew June Support
  • Renew Picante Support
  • Renew Thype Support
  • Renew Regn Support

Search Forums

Forums

  • Bygge – Construction Theme
  • Converta – Software Theme
  • Folie – The WordPress Website Builder
  • Handel – Responsive Multi-Purpose Business Theme
  • June WooCommerce WordPress Theme
  • Livecast – Podcast Theme
  • Picante – Restaurant & Food WordPress Theme
  • Regn | Agency & Business WordPress Theme
  • Remake – Minimal Portfolio & Agency Theme
  • Specular – Multi-Purpose WordPress Theme
  • Suggest us Features
  • Tower – Business-Driven Multipurpose WP Theme
  • Vibrance – Photography Theme

Site Links

  • Support Policy
  • Specular Support Forum
  • Video Tutorials
  • Knowledge Base
  • Guides and Reviews

Useful Articles

  • Build a Website
  • Web Design & Development
  • Hosting
  • WordPress

Login

Log In
Register Lost Password