View Replies (1)

Resolved Simple Portfolio Layout

  1. Issue
  1. SP Simple Portfolio
  2. Tuesday, 22 October 2019
Hi Team,
I would like to get my Simple Portfolio the same as on this site: http://fitconmiguel.com/index.php

I have installed the component and Module but it looks totally different :-(

Thanks in advance

Dean simple-portfolio.jpg simple-portfolio-mouse-hover.jpg
Attachments (2)
simple-portfolio.jpg simple-portfolio.jpg
simple-portfolio-mouse-hover.jpg simple-portfolio-mouse-hover.jpg
Responses (1)
Hi there,

Thanks for your query. Please follow the instruction.

Download the attachment and unzip the zip file below file location
/templates/your_template/html/

And copy the CSS file & place it on your custom.css file.

this video will help you.
https://www.youtube.com/watch?v=WXFd4RJVofA&t=7s



 .sp-simpleportfolio.sp-simpleportfolio-view-item {

    padding: 0;

  }

  .sp-simpleportfolio.sp-simpleportfolio-view-item .sp-simpleportfolio-description .sp-simpleportfolio-title-wrap h2 {

    font-size: 30px;

  }

  .sp-simpleportfolio.sp-simpleportfolio-view-item .sp-simpleportfolio-description .sp-simpleportfolio-info h3 {

    font-size: 20px;

    margin: 35px 0 0;

  }

  .home-portfolio-project-section .sp-simpleportfolio.sp-simpleportfolio-view-items {

  position: relative;

}

.home-portfolio-project-section .sp-simpleportfolio.sp-simpleportfolio-view-items .sp-simpleportfolio-filter ul li a {

  color: #fff;

  border-bottom: 1px solid transparent;

  line-height: 1.8;

}

.home-portfolio-project-section .sp-simpleportfolio.sp-simpleportfolio-view-items .sp-simpleportfolio-filter ul li a:hover,

.home-portfolio-project-section .sp-simpleportfolio.sp-simpleportfolio-view-items .sp-simpleportfolio-filter ul li.active a {

  border-color: #fff;

  color: #fff;

}

.sp-simpleportfolio.sp-simpleportfolio-view-items .sp-simpleportfolio-filter ul li {

    margin: 0 20px 20px 0;

  }

   .sp-simpleportfolio.sp-simpleportfolio-view-item {

    padding: 0 30px;

  }

  .sp-simpleportfolio.sp-simpleportfolio-view-items .sp-simpleportfolio-items .sp-simpleportfolio-item .sp-simpleportfolio-info .sp-simpleportfolio-title {

    font-size: 20px;

  }

  .sp-simpleportfolio.sp-simpleportfolio-view-items .sp-simpleportfolio-items .sp-simpleportfolio-item .sp-simpleportfolio-info-wrap .sp-simpleportfolio-title {

    font-size: 20px;

  }

.sp-simpleportfolio.sp-simpleportfolio-view-item {

    padding: 0 70px;

  }

.sp-simpleportfolio .sp-simpleportfolio-filter > ul > li > a {

  background: #2D2D2D;

  border-radius: 2px;

  color: #fff;

  -webkit-transition: 300ms;

  transition: 300ms;

}

.com-spsimpleportfolio .sp-simpleportfolio.sp-simpleportfolio-view-items .sp-simpleportfolio-items .sp-simpleportfolio-item {

  padding-bottom: 35px;

}

.sp-simpleportfolio.sp-simpleportfolio-view-item {

  padding: 0 170px;

}

.sp-simpleportfolio.sp-simpleportfolio-view-item .sp-simpleportfolio-image {

  margin-bottom: 40px;

}

.sp-simpleportfolio.sp-simpleportfolio-view-item .sp-simpleportfolio-image img {

  border-radius: 2px;

}

.sp-simpleportfolio.sp-simpleportfolio-view-item .sp-simpleportfolio-description {

  width: 100%;

}

.sp-simpleportfolio.sp-simpleportfolio-view-item .sp-simpleportfolio-description .sp-simpleportfolio-title-wrap {

  position: relative;

  color: #001E00;

}

.sp-simpleportfolio.sp-simpleportfolio-view-item .sp-simpleportfolio-description .sp-simpleportfolio-title-wrap:before {

  content: '\e910';

  font-family: 'floox-icon';

  display: inline-block;

  font-size: 10px;

  line-height: 1;

}

.sp-simpleportfolio.sp-simpleportfolio-view-item .sp-simpleportfolio-description .sp-simpleportfolio-title-wrap h2 {

  color: #43484D;

  margin: 8px 0;

}

.sp-simpleportfolio.sp-simpleportfolio-view-item .sp-simpleportfolio-description .sp-simpleportfolio-info h3 {

  font-weight: 400 !important;

  font-size: 24px;

  color: #666D70;

  letter-spacing: -0.44px;

  line-height: 1.45;

  margin: 56px 0 0;

}

.sp-simpleportfolio.sp-simpleportfolio-view-item .sp-simpleportfolio-description .sp-simpleportfolio-info h4 {

  font-weight: 400 !important;

  font-size: 22px;

  color: #3B3D40;

}

.sp-simpleportfolio.sp-simpleportfolio-view-item .sp-simpleportfolio-description .sp-simpleportfolio-info p {

  font-size: 18px;

  color: #666D70;

  line-height: 1.5;

} 

.sp-simpleportfolio.sp-simpleportfolio-view-items .sp-simpleportfolio-filter {

  text-align: left;

  margin-bottom: 22px;

}

.sp-simpleportfolio.sp-simpleportfolio-view-items .sp-simpleportfolio-filter ul li {

  margin: 0 20px 0 0;

}

.sp-simpleportfolio.sp-simpleportfolio-view-items .sp-simpleportfolio-filter ul li a {

  padding: 0;

  border: 0;

  background: transparent;

  border-radius: 0;

  font-size: 14px;

  color: #43484D;

  font-weight: 400 !important;

}

.sp-simpleportfolio.sp-simpleportfolio-view-items .sp-simpleportfolio-filter ul li a:hover {

  background: transparent;

}

.sp-simpleportfolio.sp-simpleportfolio-view-items .sp-simpleportfolio-filter ul li.active a {

  background: transparent;

}

.sp-simpleportfolio.sp-simpleportfolio-view-items .sp-simpleportfolio-items .sp-simpleportfolio-item {

  padding: 15px 15px 45px;

  text-align: center;

}

.sp-simpleportfolio.sp-simpleportfolio-view-items .sp-simpleportfolio-items .sp-simpleportfolio-item .sp-simpleportfolio-overlay-wrapper {

  border-radius: 4px;

}

.sp-simpleportfolio.sp-simpleportfolio-view-items .sp-simpleportfolio-items .sp-simpleportfolio-item .sp-simpleportfolio-overlay {

  opacity: 0;

}

.sp-simpleportfolio.sp-simpleportfolio-view-items .sp-simpleportfolio-items .sp-simpleportfolio-item .sp-simpleportfolio-overlay .sp-simpleportfolio-btns a {

  padding: 0;

  margin: 0;

  font-size: 78px;

  border: 0;

  border-radius: 0;

}

.sp-simpleportfolio.sp-simpleportfolio-view-items .sp-simpleportfolio-items .sp-simpleportfolio-item .sp-simpleportfolio-overlay .sp-simpleportfolio-btns a:hover {

  background: transparent;

}

.sp-simpleportfolio.sp-simpleportfolio-view-items .sp-simpleportfolio-items .sp-simpleportfolio-item .sp-simpleportfolio-info,

.sp-simpleportfolio.sp-simpleportfolio-view-items .sp-simpleportfolio-items .sp-simpleportfolio-item .sp-simpleportfolio-info-wrap {

  padding-top: 5px;

  margin-top: 35px;

  background: transparent;

  position: relative;

}

.sp-simpleportfolio.sp-simpleportfolio-view-items .sp-simpleportfolio-items .sp-simpleportfolio-item .sp-simpleportfolio-info:before,

.sp-simpleportfolio.sp-simpleportfolio-view-items .sp-simpleportfolio-items .sp-simpleportfolio-item .sp-simpleportfolio-info-wrap:before {

  content: '\e910';

  font-family: 'floox-icon';

  display: inline-block;

  font-size: 10px;

  line-height: 1;

  color: #d7dbdd;

  position: absolute;

  left: 0;

  top: 0;

  right: 0;

  margin: auto;

  -webkit-transition: .4s;

  -o-transition: .4s;

  transition: .4s;

}

.sp-simpleportfolio.sp-simpleportfolio-view-items .sp-simpleportfolio-items .sp-simpleportfolio-item .sp-simpleportfolio-info:after,

.sp-simpleportfolio.sp-simpleportfolio-view-items .sp-simpleportfolio-items .sp-simpleportfolio-item .sp-simpleportfolio-info-wrap:after {

  content: '\e910';

  font-family: 'floox-icon';

  display: inline-block;

  font-size: 10px;

  line-height: 1;

  position: absolute;

  left: 0;

  top: 0;

  right: 0;

  margin: auto;

  -webkit-transition: .4s;

  -o-transition: .4s;

  transition: .4s;

  opacity: 0;

}

.sp-simpleportfolio.sp-simpleportfolio-view-items .sp-simpleportfolio-items .sp-simpleportfolio-item .sp-simpleportfolio-info .sp-simpleportfolio-title,

.sp-simpleportfolio.sp-simpleportfolio-view-items .sp-simpleportfolio-items .sp-simpleportfolio-item .sp-simpleportfolio-info-wrap .sp-simpleportfolio-title {

  font-size: 24px;

  font-weight: 400 !important;

  margin-top: 20px;

  margin-bottom: 10px;

  line-height: 1.1;

}

.sp-simpleportfolio.sp-simpleportfolio-view-items .sp-simpleportfolio-items .sp-simpleportfolio-item .sp-simpleportfolio-info .sp-simpleportfolio-title a,

.sp-simpleportfolio.sp-simpleportfolio-view-items .sp-simpleportfolio-items .sp-simpleportfolio-item .sp-simpleportfolio-info-wrap .sp-simpleportfolio-title a {

  color: #43484D;

}

.sp-simpleportfolio.sp-simpleportfolio-view-items .sp-simpleportfolio-items .sp-simpleportfolio-item .sp-simpleportfolio-info .sp-simpleportfolio-tags,

.sp-simpleportfolio.sp-simpleportfolio-view-items .sp-simpleportfolio-items .sp-simpleportfolio-item .sp-simpleportfolio-info-wrap .sp-simpleportfolio-tags {

  font-size: 14px;

  color: #43484D;

  font-weight: 400 !important;

}

.sp-simpleportfolio.sp-simpleportfolio-view-items .sp-simpleportfolio-items .sp-simpleportfolio-item:hover .sp-simpleportfolio-overlay {

  opacity: .97;

}

.sp-simpleportfolio.sp-simpleportfolio-view-items .sp-simpleportfolio-items .sp-simpleportfolio-item:hover .sp-simpleportfolio-info:before,

.sp-simpleportfolio.sp-simpleportfolio-view-items .sp-simpleportfolio-items .sp-simpleportfolio-item:hover .sp-simpleportfolio-info-wrap:before {

  opacity: 0;

}

.sp-simpleportfolio.sp-simpleportfolio-view-items .sp-simpleportfolio-items .sp-simpleportfolio-item:hover .sp-simpleportfolio-info:after,

.sp-simpleportfolio.sp-simpleportfolio-view-items .sp-simpleportfolio-items .sp-simpleportfolio-item:hover .sp-simpleportfolio-info-wrap:after {

  opacity: 1;

}

.sp-simpleportfolio.sp-simpleportfolio-view-items.layout-gallery-nospace .sp-simpleportfolio-items .sp-simpleportfolio-item {

  padding-left: 0;

  padding-right: 0;

}

.sp-simpleportfolio.sp-simpleportfolio-view-items.layout-gallery-nospace .sp-simpleportfolio-items .sp-simpleportfolio-item .sp-simpleportfolio-overlay-wrapper {

  border-radius: 0;

}


Note: Mainly we don't provide the customization support.

-Thanks
Attachments (1)
Archive.zip
  1. more than a month ago
  2. SP Simple Portfolio
  3. # 1


There are no replies made for this post yet.
Be one of the first to reply to this post!


This forum is archived

This forum has been archived. Please use JoomShaper official support system.

Please publish modules in sidebar position.