Greetings to the forum.  I upgraded recently from FPSS2 on a demo website to FPSS 3.0.3.  My slideshow uses the Simple template.  It's working fine except for one feature - below the graphics the navigation button works properly but the little outline that shows which slide is currently displayed, which moves from slide number to slide number as the slide above changes (if I read the source correctly this div class is called navigation-background) is misaligned up and to the left of the number of the currently showing slide.  It works fine, it just does not line up properly.
The Simple slideshow template is also changed from its prior appearance - the navigation buttons used to appear on a background that looked like a folder tab.  Now the tab graphic is absent - the nav buttons simply appear on a black background.  I can live with that okay, but if it's simple to restore the old appearance I'd like to do that too.
URL is here:  p3isys.com/new
I think I simply need to modify the css, but haven't a clue what needs to be done.

This is a css coflict...
Go to modules/mod_fpss/tmpl/Simple/css/template.css.php folder at line 23
and change this:to this:According to the boxes in FPSS navigation the conflict is caused by the margin you give in your template css folder to this element
ul li {
    margin: 0.3em 0 0.3em 1.6em;
    padding: 0;
}

Thanks very much for your reply Katia!
The actual css file in the file location is a bit different than what is rendered on the website and shows up in Firebug, however I was able to find the proper line and I input the changes.  Let me make sure I understand -
I was to insert the comment !important in between the 0 and the semicolon line terminator for left and right.  Here is the css segment as rendered by my site after the changes:
The code segment appears to render as you said, but the issue still exists.  Did I miss something?

The answer above was about the introtext background which was rendered wrong.
The problem with the squares is being caused by this styling in your template css at /new/templates/jsn_epic_pro/css/template.css


ul li {
    margin: 0.3em 0 0.3em 1.6em;
    padding: 0;
}

You either erase that or put the FPSS in a container div to solve the conflict.

Thanks very much, and apologies for my inexperience with CSS.  I'm starting to understand it a bit.
I fiddled with the template css and found that I can either comment out (delete) the ul li styling or apply the styling as follows:
ul li {
margin: 0 0 0 0;
padding: 0;
      }
Either deleting or setting the margin and padding to zero fixes the problem.  I also found that I can work around the problem by simply turning off the lavalamp effect in FPSS Module control panel, but I do really like the effect.

Deleting the ul li styling in the template css file messes up bulleted lists in articles, so that is not going to work, nor is setting the margin and padding to zero in the template css going to work for the same reason.  So it looks like putting FPSS in a container div will be the preferred method.

That said, what is the best place (file) to put the container div?
Once I know where to put it, do I simply put the styling for ul li inside the container div to specify margin: 0 0 0 0; as shown?  Will this affect only the container div without bothering inheritance for other module positions in the template?

Thanks very much for your patience with a slow learner.


It seems

You just put FPSS inside a div in your template -for example:

<div id= "slideshowBigContainer">
here goes FPSS
</div>

and then you go to the css folder, you find the fpss ul li styling and add the new div like this for example:

#slideshowBigContainer .fpss-template-simple ul.navigation li a {
margin:0 !importatnt;
padding:0 !important;
}