Css Style Portfolio grid
-
Hello! I would like to congratulate you for the great plugin! I would like to change the plugin css to get as close as possible to my wordpress word, I would like it to be a similar thing, http://www.andreaverzola.com/project/, can you help me?
thank you
AndrewThe page I need help with: [log in to see the link]
-
Dear Andrea,
Thanks for using the Portfolio Manager.
What you need can definitely be done by adding some custom CSS in the Plugin’s CSS.Please wait while I prepare the CSS for you.
Thanks, you are the best.
Dear Andrea,
Please follow these steps:
1. Go to Portfolio Manager > Settings > Advanced Tab > Custom CSS Box
2. Paste the folloiwng CSS:
.eds-bpm-view{ overflow: visible; box-shadow: none; height: 330px !important; } .eds-bpm-view, .eds-bpm-view img{ width: 320px; height: 230px; transition: all 0s linear !important; } .isotope-item{ width: 320px; height: 330px; } .eds-bpm-view .eds-bpm-mask{ width: 320px; height: 330px; top: 0; padding-top: 230px; opacity: 1 !important; background-color: transparent !important; } .eds-bpm-view .eds-bpm-view-heading{ transform: translateY(0) !important; opacity: 1 !important; padding: 5px !important; text-align: left; font-family: 'Montserrat'; font-size: 28px; font-weight: 500; line-height: 1.2; letter-spacing: -1px; margin-top: 10px; margin-bottom: 40px; text-decoration: underline; background: transparent; } .eds-bpm-view:hover .eds-bpm-view-heading{ color: #d5d822; } .eds-bpm-view .eds-bpm-view-para{ transform: translateY(0) !important; opacity: 1 !important; color: #939aa5; text-align: left; font-style: normal; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif; font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: 0px; margin-top: 10px !important; margin-bottom: 15px; text-transform: uppercase; } .eds-bpm-view a.eds-bpm-info{ opacity: 0 !important; position: absolute; top: 0; left: 0; margin: 0 !important; width: 100%; height: 100%; min-height: 355px; z-index: 9999999; } .mosaic-view-one .eds-bpm-view-first:hover img{ transform: scale(1) !important; }
3. Save
This should make the look of the projects similar to
http://www.andreaverzola.com/projectPlease let me know if this works.
Oh and you can check the demo of this CSS in action here:
http://bpmdemo.cloudaccess.host/thank you so much! I ask you the last thing! By activating the plugin I lose the formatting of posts within the blog, you can see an example here http://www.andreaverzola.com/guida-definitiva-alla-macchina-fotografica-le-vacanze/.
The text goes wide, the column is narrower if you disable the plugin, I think it overwrites the theme css
thank you so much
AndreaYes that’s a CSS conflict.
Please add the following CSS to the bottom of previously posted CSS:
.body-width-unlimited div.section.sub div[class*="entry-"]{ max-width: 900px !important; }
This should resolve the issue
I’m sorry but unfortunately it does not work
I do not see the applied on the page:
http://www.andreaverzola.com/guida-definitiva-alla-macchina-fotografica-le-vacanze/Could you please double check that you pasted it at the bottom of
Portfolio Manager > Settings > Advanced Tab > Custom CSS Boxso just below:
.mosaic-view-one .eds-bpm-view-first:hover img{
transform: scale(1) !important;
}in Custom CSS box.
I checked and pasted into his box but it does not seem to go..
Narrows the column of the single portfolio but not the text of the post
http://www.andreaverzola.com/portfolio-behance/bproject/occhialeria-artigiana-quando-larte-supera-la-moda/- This reply was modified 7 years, 4 months ago by andreave89.
Dear Andrea,
Lets try this one more time1. Go to Portfolio Manager > Settings > Advanced Tab > Custom CSS Box
2. Delete all the CSS added and paste the following CSS:
.eds-bpm-view{ overflow: visible; box-shadow: none; height: 330px !important; } .eds-bpm-view, .eds-bpm-view img{ width: 320px; height: 230px; transition: all 0s linear !important; } .isotope-item{ width: 320px; height: 330px; } .eds-bpm-view .eds-bpm-mask{ width: 320px; height: 330px; top: 0; padding-top: 230px; opacity: 1 !important; background-color: transparent !important; } .eds-bpm-view .eds-bpm-view-heading{ transform: translateY(0) !important; opacity: 1 !important; padding: 5px !important; text-align: left; font-family: 'Montserrat'; font-size: 28px; font-weight: 500; line-height: 1.2; letter-spacing: -1px; margin-top: 10px; margin-bottom: 40px; text-decoration: underline; background: transparent; } .eds-bpm-view:hover .eds-bpm-view-heading{ color: #d5d822; } .eds-bpm-view .eds-bpm-view-para{ transform: translateY(0) !important; opacity: 1 !important; color: #939aa5; text-align: left; font-style: normal; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif; font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: 0px; margin-top: 10px !important; margin-bottom: 15px; text-transform: uppercase; } .eds-bpm-view a.eds-bpm-info{ opacity: 0 !important; position: absolute; top: 0; left: 0; margin: 0 !important; width: 100%; height: 100%; min-height: 355px; z-index: 9999999; } .mosaic-view-one .eds-bpm-view-first:hover img{ transform: scale(1) !important; } .entry-content{ max-width: 900px !important; }
Let me know if this works.
- This reply was modified 7 years, 4 months ago by eleopard.
Please add
.entry-content{ max-width: 900px !important; }
to your theme’s style.css
You can do this by going to
Appearance > Editor
and selecting style.css from the right.Let me know if this works.
Nothing to do, maybe on the upcoming update of the plugin try to verify this conflict that can help other users!
Dear Andrea,
We’ll definitely take care of this in the upcoming update.
But this issue can be fixed on your end right away.
Do you remember anywhere in the Crush theme that you are using, there is a section to add custom CSS? If so just add.entry-content{ max-width: 900px !important; }
to it and the post content should load fine.
Generally all the themes come with section to add custom CSS.
I have tried to add it, http://www.andreaverzola.com/portfolio-behance/ the problem is that it strikes me as a result also this page
- The topic ‘Css Style Portfolio grid’ is closed to new replies.