Fitting an element in the announcements

Forum URL - http://daredevil.nightforum.net/
Version - PunBB

Hello, I recently tried out the Nivo Slider v2.7 and placed it in my announcements, but it seems that i cant get it to fit in perfectly to the corners themselves. Height, width, margins, etc i just cant fit it right ;x and on top of that if someone with a lower resolution screen enters the forum, half of the picture is hidden... should i make it auto-width somehow?

Thanks beforehand!

I really do not see any issue with it.

Please post screenshots showing the issues that you have.

Alright. Yes no issue with the navi slider at all. Im just trying to fit it inside the whole GRAY box, but i cant.

Try re-sizing the announcement area.

AP > General > Messages & Emails > Announcements
Announcements block height (in pixels):

Didn't work.

I tried to poke around and i found out that if i change the margins in the "module_main" element it fits perfectly, but that on the other hand bugs all my other widgets. Can i for example make a custom div somewhere in the template, so it can appear in place of the announcements? And if yes ... where

or maybe some other way?

DeadlyX wrote:Didn't work.

I tried to poke around and i found out that if i change the margins in the "module_main" element it fits perfectly, but that on the other hand bugs all my other widgets. Can i for example make a custom div somewhere in the template, so it can appear in place of the announcements? And if yes ... where

or maybe some other way?

The problem is that the container has a selector beneath it. The 3 circles are a part of your slider and therefore considered when calculating the width. Can you please post here your slider's code so we can try to adjust it?

Best regards.

Preview to what i said in my second post. If i tweak stuff in the "module main" element it fits in perfectly, but it buggs all my other stuff that are in connection to that element. Where exactly in the template can i div a custom element to appear just beneath the announcements element?


Yes ace that's a good idea, still won't fit in perfectly but it needs to be done. Can we move the circles inside the picture? There is even a place in the css that says "tweak this to center bullents" but i cant even move them when i tweak it.

Code:

Hi,

Replace this:

Code:

.theme-default .nivo-controlNav {
  position:absolute;
  left:50%;
  bottom:-42px;
    margin-left:-40px; /* Tweak this to center bullets */
}

By this:

.theme-default .nivo-controlNav {
left:50%;
bottom:-42px;
margin-left:-40px; /* Tweak this to center bullets */
}

I'm not sure this left:50% if we can remove it or not so just test it that way. If it bugs, then remove it and try again. Adjust the margin left and the bottom as you need.

Regards.

Hi,

Thanks that was helpful. I just changed the position to relative and did some changes to center the bullets in the top side of the picture, but still...

I need to make a custom div in the template in order to fit it nicely. Where must I make a custom element in the template , so it can appear in place of the announcements?

DeadlyX wrote:Hi,

Thanks that was helpful. I just changed the position to relative and did some changes to center the bullets in the top side of the picture, but still...

I need to make a custom div in the template in order to fit it nicely. Where must I make a custom element in the template , so it can appear in place of the announcements?

Do you want this div for the slider (images) or the buttons? You just have to create a <div class="1"></div> on the element that you want.

Well I wanna make the div and place the entire nivoslider inside. Easy stuff i hope. I only need to know where exactly i should make this div (in which template, where exactly) so that it will appear just beneath the announcements element.

DeadlyX wrote:Well I wanna make the div and place the entire nivoslider inside. Easy stuff i hope. I only need to know where exactly i should make this div (in which template, where exactly) so that it will appear just beneath the announcements element.

Could you provide me the entire HTML code so I can insert this div?

Regards.

which template.

DeadlyX wrote:which template.

I mean the code of the slider itself.

This code:

Code:

/*
 * jQuery Nivo Slider v2.7.1
 * http://nivo.dev7studios.com
 *
 * Copyright 2011, Gilbert Pellegrom
 * Free to use and abuse under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 *
 * March 2010
 */
 
 
/* The Nivo Slider styles */
.nivoSlider {
  position:relative;
}
.nivoSlider img {
  position:absolute;
  top:0px;
  left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  border:0;
  padding:0;
  margin:0;
  z-index:6;
  display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
  display:block;
  position:absolute;
  z-index:5;
  height:100%;
}
.nivo-box {
  display:block;
  position:absolute;
  z-index:5;
}
/* Caption styles */
.nivo-caption {
  position:absolute;
  left:0px;
  bottom:0px;
  background:#000;
  color:#fff;
  opacity:0.8; /* Overridden by captionOpacity setting */
  width:100%;
  z-index:8;
}
.nivo-caption p {
  padding:5px;
  margin:0;
}
.nivo-caption a {
  display:inline !important;
}
.nivo-html-caption {
    display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
  position:absolute;
  top:45%;
  z-index:9;
  cursor:pointer;
}
.nivo-prevNav {
  left:0px;
}
.nivo-nextNav {
  right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
  position:relative;
  z-index:9;
  cursor:pointer;
}
.nivo-controlNav a.active {
  font-weight:bold;
}
/*
Skin Name: Nivo Slider Default Theme
Skin URI: http://nivo.dev7studios.com
Skin Type: flexible
Description: The default skin for the Nivo Slider.
Version: 1.0
Author: Gilbert Pellegrom
Author URI: http://dev7studios.com
*/
 
.theme-default .nivoSlider {
  position:relative;
  background:#fff url(http://i46.servimg.com/u/f46/15/66/68/20/loadin10.gif) no-repeat 50% 50%;
    margin-bottom:50px;
    -webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
    -moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
    box-shadow: 0px 1px 5px 0px #4a4a4a;
}
.theme-default .nivoSlider img {
  position:absolute;
  top:0px;
  left:0px;
  display:none;
}
.theme-default .nivoSlider a {
  border:0;
  display:block;
}
 
.theme-default .nivo-controlNav {
  position:absolute;
  left:50%;
  bottom:-42px;
    margin-left:-40px; /* Tweak this to center bullets */
}
.theme-default .nivo-controlNav a {
  display:block;
  width:22px;
  height:22px;
  background:url(http://i46.servimg.com/u/f46/15/66/68/20/bullet10.png) no-repeat;
  text-indent:-9999px;
  border:0;
  margin-right:3px;
  float:left;
}
.theme-default .nivo-controlNav a.active {
  background-position:0 -22px;
}
 
.theme-default .nivo-directionNav a {
  display:block;
  width:30px;
  height:30px;
  background:url(http://i46.servimg.com/u/f46/15/66/68/20/arrows10.png) no-repeat;
  text-indent:-9999px;
  border:0;
}
.theme-default a.nivo-nextNav {
  background-position:-30px 0;
  right:15px;
}
.theme-default a.nivo-prevNav {
  left:15px;
}
 
.theme-default .nivo-caption {
    font-family: Helvetica, Arial, sans-serif;
}
.theme-default .nivo-caption a {
    color:#fff;
    border-bottom:1px dotted #fff;
}
.theme-default .nivo-caption a:hover {
    color:#fff;
}

It's just the CSS part.

Regards.

Im lost man are we talking about 2 different things? or i cant get it...

Yea that's the code in the css... now what

DeadlyX wrote:Im lost man are we talking about 2 different things? or i cant get it...

Yea that's the code in the css... now what

I need the HTML code that makes the slider.

Well,

https://help.forumotion.com/t105173-how-can-i-get-nivo-slider-with-orman-theme-box-animations#686395

I don't exactly know which part is for the slider and its in either the Jscript code or in the code that u must place in the homepage message. (I didn't change anything from the code in the guide i simply copy/pasted the stuff.

Idk man my idea seems easier in my mind. I already managed to fit the whole stuff nicely, as i showed in post #6 on the picture...thou by doing that i had to change a few margins, paddings and stuff in the "module main" element, which buggs everything else, dependent of that element... Anyway I simply need somebody to tell me which template is responsible for the announcements so i can just create a custom DIV beneath the announcements thingy and place the code over there.

Sure, your idea is also valid

index_body if not mistaken. If this isn't it, just look for the viewforum_body.

Regards.