Search Form and Social Buttons

HotThemes Logo and Top Menu

To request a forum account, please login here and open support ticket. Only customers with active order(s) can open forum account!

× Discussion about Hot Image Slider free Joomla module.

Topic-icon Repositioning the nav slider array

More
6 years 3 months ago #3846 by 726creative
First, I'd like to say thank you and give much respect to the developers of Hot Image Slider - remarkably easy to use and with a little bit of CSS knowledge, most of the questions I've seen in this forum can be easily managed.

However, my CSS knowledge isnt as great as I'd like, and while I've customized the slider to look and operate in the way I'd like ( www.726creative.com/home ) I now find myself needing to modify the CSS to place the nav-slide array in a "pixels from bottom" scenario, so that in other sliders that are not as tall, the array will always appear on the bottom.

I fear I may have modified the code incorrectly in order to accomplish the current end result as seen in the link above, but I'm sure there must be a simple way to specify the navs location in pixels or percentage from the bottom, and not the top.

agan, an AWESOME module!

Please Log in to join the conversation.

More
6 years 3 months ago #3852 by ivan.milic
Base on link you provided you can try something like this:

div#header_hotslider div#slide-holder div#slide-controls {
background: url( www.726creative.com/home/modules/mod_hot...r/images/slide-bg.pg ) 0px 0px;
display: none;
height: 46px;
left: 0px;
position: relative;
top: 90%;
width: 940px;
}


div#header_hotslider div#slide-holder div#slide-controls div#slide-nav a {
background-image: url( www.726creative.com/home/modules/mod_hot...slide-nav-yellow.png );
color: white;

/*left: 50px;*/
/*position: relative;*/
/*top: 310px;*/


}

Here the problem may be top:90%, but can be good solution if you can find value that will fit all needed cases of image sizes.

Best solution however would be to use javascript like jQuery.position(...
See: jqueryui.com/demos/position/

<script type="text/javascript">

jQuery(document).ready(function(){
jQuery( "#slide-controls" ).position({
of: $( "#slide-runner" ),
my: 'left bottom',
at: 'left bottom',
offset: '10 -10'
});
});

</script>


Ivan

Please Log in to join the conversation.

More
6 years 3 months ago #3970 by paulbean
First of all, great module! I'm really enjoying it so far, but I'm having trouble with positioning my menu bar. I've read a couple posts about the positioning and editing the CSS file, but I have no idea where to edit the CSS specifically.

Here's the link to the page: 174.132.162.162/~ncu2010/

And the CSS I'm working with (it's from a patch of yours from another post):

a img {
border:0;
}

div#top div#nav ul {
float:left;
list-style-type:none;
}

div#nav ul li {
float:left;
height:52px;
}

div#nav ul li a {
border:0;
height:52px;
display:block;
line-height:52px;
text-indent:-9999px;
}

div#headerslider {
margin:-1px 0 0;
}

div#video-header {
margin:-1px 0 0;
}

div#headerslider div#slide-holder img {
margin:0;
display:none;
position:absolute;
}

div#headerslider div#slide-holder div#slide-controls p.text {
float:left;
color:#fff;
display:inline;
font-size:10px;
line-height:16px;
margin:15px 0 0 20px;
text-transform:uppercase;
overflow:hidden;
}

div#headerslider div#slide-holder div#slide-controls div#slide-nav a {
float:left;
width:24px;
height:24px;
display:inline;
font-size:11px;
margin:0 5px 0 0;
line-height:24px;
font-weight:700;
text-align:center;
text-decoration:none;
background-position:0 0;
background-repeat:no-repeat;
padding:0;
}

div#headerslider div#slide-holder div#slide-controls div#slide-nav a.on {
background-position:0 -24px;
}

div#nav ul li a {
background:url(../images/nav.png) no-repeat;
}

Any help would be greatly appreciated. Thanks!!!

Paul

Please Log in to join the conversation.

More
6 years 3 months ago #3985 by ivan.milic
Hi,

where do you want to put your menu bar?

Please Log in to join the conversation.

More
6 years 3 months ago #3989 by paulbean
Hi! Thanks for your quick reply. I want to position them over the white circled numbers in my jpegs, so about 10-15 px from the bottom right-hand corner. I would also want to decrease the size of the circles, too, and make them tranparent, if possible.

Please Log in to join the conversation.

More
6 years 3 months ago #3997 by ivan.milic
Hi,

add

div#headerslider div#slide-holder div#slide-controls {
top:180px;
height:46px;
}

change:
div#nav ul li a {
background:none;
}

You have 3 links and five image places , so you will have to adjust next (where marked red) by yourself:

div#headerslider div#slide-holder div#slide-controls div#slide-nav a {
float:left;
width:24px;
height:24px;

display:inline;
font-size:11px;
margin:0 5px 0 0;
line-height:24px;
font-weight:700;
text-align:center;
text-decoration:none;
background-position:0 0;
background-repeat:no-repeat;
padding:0;
}

Please Log in to join the conversation.

Time to create page: 0.143 seconds

Links, Partners and Social Media