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)
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)
  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.