phoca gallery slideshow nivo not centered

[QLink]

hi guys,

i'm building a new joomla homepage: test.multimediaberatung.at

i'm facing two problems, after i installed and published phoca gallery slideshow nivo module.

first problem:

the template i chose, has got a yellow banner as background for slider position.
you can see how it looks like at the templates demo page here: www .astemplates.com/content/asj37/

when i publish nivo module in backend, this yellow background disappears and is gone.
when i unpublish nivo module, the yellow background appears as it should.

so it seems like nivo module overwrites the template background @slider position ?!?
how can i make the yellow background not to disappear, when i publish nivo module ?


second problem:

as you can see @ test.multimediaberatung.at the nivo module is not centered. it shows up on the left side of the page.
when i use chrome inspect tool it shows me :

Code: Select all

<div id="pgsnivo-slider" class="nivoSlider" style="width: 970px; height: 300px; position: relative; background-image: url(http://test.multimediaberatung.at/images/phocagallery/thumbs/phoca_thumb_l_yamaha%20back.jpg); background-position: initial initial; background-repeat: no-repeat no-repeat;">
            <img src="/images/phocagallery/thumbs/phoca_thumb_l_yamaha.jpg" alt="Versuch" style="display: none;">
<img src="/images/phocagallery/thumbs/phoca_thumb_l_yamaha back.jpg" alt="Versuch" style="display: none;">
        <div class="nivo-caption" style="opacity: 0;"><p></p></div><div class="nivo-directionNav" style="display: block;"><a class="nivo-prevNav">vorheriges</a><a class="nivo-nextNav">nächstes</a></div><div class="nivo-controlNav"><a class="nivo-control active" rel="0">1</a><a class="nivo-control" rel="1">2</a></div><div class="nivo-slice" style="left: 0px; width: 65px; height: 100%; opacity: 1; background-image: url(http://test.multimediaberatung.at/images/phocagallery/thumbs/phoca_thumb_l_yamaha.jpg); top: 0px; background-position: 0px 0%; background-

so i guess i need to replace "position: relative;" into position: center; right ?

but i'm not able to find the code in any of the .css files of the template.
i searched in tmpl.admin.css, tmpl.component.css, tmpl.content.css, tmpl.footer.css, tmpl.header.css, tmpl.sidebars.css, styles.php and index.php but without success.

can somebody tell me how i can make the nivo module centered in my homepage and where in which file i can edit this ?


thanks in advance !

[Jan]

Hi, on one page, you have small images which are not fit to the whole site but on other page there are images which fit whole site (so the problem is not in the slideshow but in the width of the images), see here:

https://www.phoca.cz/joomlademo/ - the nivo is centered there (be aware the slideshow is randomly selected, so nivo is changing by noob or floom)

It depends on the module place if it will be centered and on the image width, see e.g. here:
https://www.phoca.cz/documents/19-phoca- ... how-plugin (if the module place is centered e.g. like in the guide, then it will be centered)

Unfortunatelly, there is no Position: center attribute in CSS/HTML so such cannot be set (position relative does not directly set the algin of html parts on the site)

The module content (in this case nivo slideshow) has no option to be self centered, it must be centered by some higher part, in this case by template which will define that the module part will be centered (or you need to resize the image width to full fit the template width )

Jan

[QLink]

Hi Jan,

thx for you reply.

i removed the images, which didn't fit the whole site and left only 3 images which are all resized to 970x300 px.
nivo is still not centered.

where can i edit the module positions in the template and what changes do i have to make ?
the module position is called "slider".

all i was able to find is in "index.php" file of the template:

Code: Select all

<div class="row3">
			<?php 
            if($this->countModules('slider')): 
            ?>
			<jdoc:include type="modules" name="slider" />
            <?php elseif($pagetitle_show): ?>
            <div id="pagetitle">
            	<div class="content">
            		<h1><?php echo $page_title; ?></h1>
                </div>
            </div>
	        <?php endif; ?>
		</div>

    </div>
    <!-- END OF HEADER ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->

confusing thing is, when looking at the templates demo page, the used mooslider is centered. (www. astemplates.com/content/asj37/index.php)
so i guess the slider position is centered from template side, isn't it ?

QLink

[Jan]

where can i edit the module positions in the template and what changes do i have to make ?

Hi, I am not the developer of the template so really cannot say what should be changed there, I think you need to set some two divs with text-align: center and margin: 0 auto but where exactly, I don't know