I save my CSS in the actual ARI ImageSlider module itself... cause if I save it in the CUSTOM template CSS the image for the frame doesn't load... Don't know why... I checked to see if the url to the image was correct and it is... so my only solution was to put the CSS in the module...GusDoeMatik.com/LittleSnapper/Safari.jpg

Provide a link to a page where we can see the slider and the problem. Specify also path to CSS file which you mean.

Regards,
ARI Soft

I'm sorry for the miscommunication, I had solved the problem even before you answered... If you read that very long post it explains the solution...

The next little post was stating that I wish you (ARI) would insert that little bit of code that I used to solve the issue into the actual plugin...

AND I wish you fix the issue where I could save the custom CSS into the ARI Image Slider template that way I could make different frame TEMPLATES. That way it'll be easy to switch between frame designs with a click...

Well I just solved that issue too and it wasn't the plugins fault.. it was the permission settings on the image folder inside the template folder... I had to set it to 745... that made the frame load... So now I can make different templates...

But now I have another issue... LOL

OK Now that I can save the custom CSS into the template file... My issue is that the custom TEMPLATE is only good for one module because the custom css is based off the unique ID that your plugin creates for each slider...

Example:

#ais_104_frameHolder {
width: 971px;
height: 460px;
position: relative;
margin-right: auto;
margin-left: auto;
top: 30px;
}

The ais_104 part of the CSS is generated automatically by your code So it's going to be unique on each instance of the plugin...
The _frameHolder part of the CSS is a constant, it will be generated on each instance of the plugin...

So I'm still forced to use the module CSS field in each ARI ImageSlider module that I create...

If I can somehow get the CSS that's located in the CSS file in the ais template to dynamically insert in front of _frameHolder {
} then I could save custom templates that can be used on every ais I create...

I don't think you can interject php code into a CSS file... But can there be a wild card in CSS? Meaning I would write the code like this:

Example:

#*_frameHolder {
width: 971px;
height: 460px;
position: relative;
margin-right: auto;
margin-left: auto;
top: 30px;
}

So that the * will apply to anything that's before the _frameHolder part of the CSS

Excuse me and my none coding abilities... I don't know how to code... So I'm just trying to figure out how to do this...

Don't use elements ID in CSS rules, use CSS class names.

Regards,
ARI Soft

OMG I figured it all out!!!

But in order for it to work I had to change things around just a tiny bit...

Originally I had inserted these 2 divs in the the default.php file (modules/mod_ariimageslider/tmpl/default.php):

<div id="<?php echo $sliderId; ?>_frameHolder">
<div id="<?php echo $sliderId; ?>_myFrame"></div>
</div>

But after reading up on wildcard CSS I had to change that around... I changed it to this:

<div id="frameHolder_<?php echo $sliderId; ?>">
<div id="myFrame_<?php echo $sliderId; ?>"></div>
</div>

I did that cause wildcard in the CSS apparently is inserted behind the name.

Then I changed the CSS a tiny bit, just like this:

div[id*='frameHolder_'] {
width: 971px;
height: 460px;
position: relative;
margin-right: auto;
margin-left: auto;
top: 30px;
}
div[id*='myFrame_'] {
width: 971px;
height: 480px;
background: url(images/cityGrungeFrame.png) no-repeat;
display: block;
position: absolute;
bottom: 25px;
z-index: 10000;
float: left;
}

So now when ever I apply a template with a FRAME/MASK it'll apply to that ARI ImageSlider...

So if whom ever has been following this thread and would like to add a FRAME/MASK on TOP of the slider and want that frame to be a template that u can apply at anytime, then still do as I said before.

First you need to locate this file:
modules/mod_ariimageslider/tmpl/default.php

We are going to edit this file by adding 2 divs into this file.

so find and locate:

Code:
$theme = $params->get('theme');
if (empty($theme))
$theme = 'default';
$controlNav = (bool)$params->get('opt_controlNav');
?>

right after that line of code insert this:
Code:
<div id="frameHolder_<?php echo $sliderId; ?>">


Next you will scroll all the way to the bottom of the document and find this code:
Code:
<?php
endif;
?>
</div>

And then you will insert this code right after it:
Code:
<div id="myFrame_<?php echo $sliderId; ?>"></div>
</div>

Then save the file...

Ok now you find/create the theme CSS file:
modules/mod_ariimageslider/mod_ariimageslider/js/themes/NameOfYourTemplate/style.css

Then add these 2 lines of CSS into the the file:

div[id*='frameHolder_'] {
width: 971px;
height: 460px;
position: relative;
margin-right: auto;
margin-left: auto;
top: 30px;
}
div[id*='myFrame_'] {
width: 971px;
height: 480px;
background: url(images/cityGrungeFrame.png) no-repeat;
display: block;
position: absolute;
bottom: 25px;
z-index: 10000;
float: left;
}

Now the Admin says I should use classes instead of id's... so the following should be applicable to classes as well... Just change id to class

Example CSS:
div[id*='myFrame_'] {
into:
div[class*='myFrame_'] {

Example CODE:
<div id="frameHolder_<?php echo $sliderId; ?>">
<div id="myFrame_<?php echo $sliderId; ?>"></div>
</div>
into:
<div class="frameHolder_<?php echo $sliderId; ?>">
<div class="myFrame_<?php echo $sliderId; ?>"></div>
</div>

Everything that's green is what you'll edit to fit your needs
Everything colored blue is code that can be changed
Everything colored purple is what was changed by me when creating this code
Whatever is red is mandatory