Trouble styling the Category List in Multiple Categories Display

  • Resolved ajaxthemestudios

    (@ajaxthemestudios)


    7 years, 4 months ago

    Hello.

    Thank you for the plugin. I am having some trouble styling the tab lists on top of the multiple category display.
    Initially, I added the shortcode in the Text Widget and included it inside a Beaver pagebuilder container. The result is that a bullet list of the categories with no styling at all was displayed.
    I then added it using an HTML widget and the category default tab list was displayed but after first displaying an unstyled bullet list for a few seconds.
    I then added the shortcode directly to the my homepage template using echo shortcode function. The tab was displayed rightly but I cannot style it.
    I went to Portfolio Manager > Settings > Advanced Tab > Custom CSS and I added the relevant css below. Only the CSS applied to the tab content worked. The ones for the tab lists did not even show up in the CSS inspector.

    .eds-bpm-section li span {
	font-family: 'MyriadPro-Light', san-serif  !important;
	color: #000;
	line-height: 2.438em;
	padding: 0.625em 1.250em; 
    font-size: 150%;
    letter-spacing: -1px;
    margin: 0 0.625em 0.625em 0;
	font-weight: normal;	
}
.eds-bpm-section ul {
    padding-bottom: 0.625em;
}
.eds-bpm-main {
    margin-top: 1em;
}

    I am working on a local server so I cannot share a link now but there seems to be an issue with the tab list. Any suggestion from you on what to do?

    Thank you.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author eleopard

    (@eleopard)

    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.

    Thread Starter ajaxthemestudios

    (@ajaxthemestudios)

    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.

    Plugin Author eleopard

    (@eleopard)

    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.

    Thread Starter ajaxthemestudios

    (@ajaxthemestudios)

    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.

    Plugin Author eleopard

    (@eleopard)

    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.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Trouble styling the Category List in Multiple Categories Display’ is closed to new replies.