The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Fitting an element in the announcements

View previous topic View next topic Go down

In progress Fitting an element in the announcements

Post by DeadlyX on November 24th 2015, 8:20 pm

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!

DeadlyX
Forumember

Posts : 75
Reputation : 4
Language : English

http://teenwolf-rp.nightforum.net

Back to top Go down

In progress Re: Fitting an element in the announcements

Post by SLGray on November 24th 2015, 8:41 pm

I really do not see any issue with it.

Please post screenshots showing the issues that you have.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36659
Reputation : 2444
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

In progress Re: Fitting an element in the announcements

Post by DeadlyX on November 25th 2015, 3:48 pm

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


DeadlyX
Forumember

Posts : 75
Reputation : 4
Language : English

http://teenwolf-rp.nightforum.net

Back to top Go down

In progress Re: Fitting an element in the announcements

Post by SLGray on November 25th 2015, 7:45 pm

Try re-sizing the announcement area.

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


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36659
Reputation : 2444
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

In progress Re: Fitting an element in the announcements

Post by DeadlyX on November 25th 2015, 8:14 pm

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 Very Happy

or maybe some other way?

DeadlyX
Forumember

Posts : 75
Reputation : 4
Language : English

http://teenwolf-rp.nightforum.net

Back to top Go down

In progress Re: Fitting an element in the announcements

Post by Ace on November 25th 2015, 9:40 pm

@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 Very Happy

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? Smile

Best regards.

Ace
Forumember

Posts : 250
Reputation : 49
Language : Portuguese & English

http://ajuda.forumeiros.com/u39577

Back to top Go down

In progress Re: Fitting an element in the announcements

Post by DeadlyX on November 26th 2015, 9:24 am

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:
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;
}

DeadlyX
Forumember

Posts : 75
Reputation : 4
Language : English

http://teenwolf-rp.nightforum.net

Back to top Go down

In progress Re: Fitting an element in the announcements

Post by Ace on November 29th 2015, 5:05 am

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.

Ace
Forumember

Posts : 250
Reputation : 49
Language : Portuguese & English

http://ajuda.forumeiros.com/u39577

Back to top Go down

In progress Re: Fitting an element in the announcements

Post by DeadlyX on November 29th 2015, 12:13 pm

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
Forumember

Posts : 75
Reputation : 4
Language : English

http://teenwolf-rp.nightforum.net

Back to top Go down

In progress Re: Fitting an element in the announcements

Post by Ace on November 29th 2015, 12:46 pm

@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. Wink

Ace
Forumember

Posts : 250
Reputation : 49
Language : Portuguese & English

http://ajuda.forumeiros.com/u39577

Back to top Go down

In progress Re: Fitting an element in the announcements

Post by DeadlyX on November 29th 2015, 9:35 pm

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
Forumember

Posts : 75
Reputation : 4
Language : English

http://teenwolf-rp.nightforum.net

Back to top Go down

In progress Re: Fitting an element in the announcements

Post by Ace on November 29th 2015, 10:18 pm

@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.

Ace
Forumember

Posts : 250
Reputation : 49
Language : Portuguese & English

http://ajuda.forumeiros.com/u39577

Back to top Go down

In progress Re: Fitting an element in the announcements

Post by DeadlyX on November 29th 2015, 10:55 pm

which template.


DeadlyX
Forumember

Posts : 75
Reputation : 4
Language : English

http://teenwolf-rp.nightforum.net

Back to top Go down

In progress Re: Fitting an element in the announcements

Post by Ace on November 29th 2015, 11:07 pm

@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. Smile

Regards.

Ace
Forumember

Posts : 250
Reputation : 49
Language : Portuguese & English

http://ajuda.forumeiros.com/u39577

Back to top Go down

In progress Re: Fitting an element in the announcements

Post by DeadlyX on November 29th 2015, 11:16 pm

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

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

DeadlyX
Forumember

Posts : 75
Reputation : 4
Language : English

http://teenwolf-rp.nightforum.net

Back to top Go down

In progress Re: Fitting an element in the announcements

Post by Ace on November 30th 2015, 12:10 am

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

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

I need the HTML code that makes the slider. Wink

Ace
Forumember

Posts : 250
Reputation : 49
Language : Portuguese & English

http://ajuda.forumeiros.com/u39577

Back to top Go down

In progress Re: Fitting an element in the announcements

Post by DeadlyX on December 1st 2015, 3:54 pm

Well,

http://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.

DeadlyX
Forumember

Posts : 75
Reputation : 4
Language : English

http://teenwolf-rp.nightforum.net

Back to top Go down

In progress Re: Fitting an element in the announcements

Post by Ace on December 7th 2015, 1:50 am

Sure, your idea is also valid Smile

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

Regards.

Ace
Forumember

Posts : 250
Reputation : 49
Language : Portuguese & English

http://ajuda.forumeiros.com/u39577

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum