Home News Contact Us Forum About Us Demos Products F.A.Q.
Shopping Cart
You currently have 0 items in your cart.


Recent Events
  • 31/12/2023 New Year SALE

    We are glad to announce New Year SALE. 25% discount for all our extensions. Use NY24 coupon code. Hurry up the discount is valid till 7 January.

  • 21/11/2023 BLACK FRIDAY 23 is coming

    BIG SALE, 35% discount for all our extensions. Use BF23 coupon code. Hurry up the discount is valid till 27 November.


2Checkout.com, Inc. is an authorized retailer of goods and services provided by ARI Soft. 2CheckOut




Follow us on twitter



Welcome, Guest
Please Login or Register.    Lost Password?

Adding frame ( mask ) to slider
(1 viewing) (1) Guest
Go to bottomPage: 123
TOPIC: Adding frame ( mask ) to slider
#39472
Re:Adding frame ( mask ) to slider 10 Years, 11 Months ago Karma: 0
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
Last Edit: 2013/04/09 16:46 By GusDoeMatik.
The administrator has disabled public write access.
 
#39474
Re:Adding frame ( mask ) to slider 10 Years, 11 Months ago Karma: 746
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
The administrator has disabled public write access.
 
#39476
Re:Adding frame ( mask ) to slider 10 Years, 11 Months ago Karma: 0
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
Code:

<div id="<?php echo $sliderId; ?>
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
Code:

<div id="<?php echo $sliderId; ?>
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...
The administrator has disabled public write access.
 
#39477
Re:Adding frame ( mask ) to slider 10 Years, 11 Months ago Karma: 746
Don't use elements ID in CSS rules, use CSS class names.

Regards,
ARI Soft
The administrator has disabled public write access.
 
#39486
Re:Adding frame ( mask ) to slider 10 Years, 11 Months ago Karma: 0
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
The administrator has disabled public write access.
 
Go to topPage: 123