Dear Ajaxthemestudios,
Thanks for using the Portfolio Manager.
I believe this might be a CSS conflict.
Could you please send me link to the page where you are facing this issue?
That will help me take a closer look.
Hi
Thanks for your fast response. Sadly, I am working on a local server so I cannot share a link.
I just discovered that no matter where I add the code below – whether in the Custom CSS section or in my theme stylesheet, it will not be picked by the browser like they do not exist. Only the default styling is displayed.
.eds-bpm-section li span {
font-family: 'MyriadPro-Light', san-serif !important;
}
.eds-bpm-section ul {
padding-bottom: 0.625em;
}
When I wrapped the shortcode in a DIV tag name “portfolio-block” and used the code below, the browser picked the codes. That way I could override the default style now BUT it will still briefly load an unstyled bullet list which is also not good.
.portfolio-block li span {
font-family: 'MyriadPro-Light', san-serif !important;
}
.portfolio-block ul {
padding-bottom: 0.625em;
}
Something strange is happening and it seems like it may have to do with the way the tab list is programmed to be loaded.
Dear Ajaxthemestudios,
Apologies for not noticing this before, but the class added is wrong in the CSS.
Please try replacing .eds-bpm-section
with .eds-bpm-option-set
and it should work.
Regarding:
“it will still briefly load an unstyled bullet list”
Loading the inline style with the theme’s CSS is theme’s function. I am afraid nothing I can do about that.
Please let me know if this works.
Thank you for the suggestion.
You are right with this. It worked!
Please try replacing .eds-bpm-section with .eds-bpm-option-set and it should work.
But I was still getting the initial unstyled bullet list. I also noticed that while still loading the thumbnails, the thumbnail containers have zero margins causing them to collapse and have no space in between until when the page is fully loaded.
I discovered that by loading some of plugin CSS (e.g. the categories tab list css) within the page <Head>
and not at the end before the </body>
, I was able to get rid of the initial unstyled bullet list.
By also adding .isotope-item {margin: 20px;}
, I was able to stop the thumbnails initial zero margin and collapse.
It seems some of the CSS that need to be loaded at the start of page loading are being loaded at the bottom causing the initial glitches when waiting for the page to fully load. I checked the source code and I saw that the default and custom CSS styles are added just before the closing body tag. Not sure if its my theme or the way the plugin is written.
Thanks for your help in resolving this.
NB: I forgot to add that it also resolved the issues with the page builder.
Dear Ajaxthemestudios,
You are right, the CSS for the project boxes is loaded at the end of the page.
This is because the isotope first recognizes the width available for the projects area, and then adds the CSS accordingly.
Glad to know the rest of the issues are resolved.