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.

Altering spoiler width when opened to display whole content

View previous topic View next topic Go down

Solved Altering spoiler width when opened to display whole content

Post by Waffles on December 2nd 2015, 4:25 am

Firstly, I hope this is in the correct place.. I'm pretty much a total newb when it comes to scripting and despite searching the solved topics and the tutorials I still can't find a solution to my problem. I'm an Admin on a friend's RP site and she asked if anyone knew how to make the spoiler background transparent, which I did in CSS (this isn't the forumotion site listed on my profile. That is an empty site I'm using to test out codes with so I don't potentially damage her site), along with a couple of other things.

Now, onto the main issue. The spoilers are of course being used to contain large amounts of text or large images so they don't take up space in a post. Our problem is that some images that are very large get cut off within the spoilers when they are opened, and we'd like the images to either be automatically fitted within the restrictions of the spoiler box, or preferably for the box to expand to the size of the image or have a scrollbar. It is a pain not being able to see the whole images. If this isn't solved, we'd have to make a rule of maximum image sizes and it's just another thing to have to control.

The screenshot below (from my phone, sorry) shows how the cat image is cut off within the spoiler.


Many thanks in advance. Smile



Last edited by Waffles on December 4th 2015, 4:34 am; edited 1 time in total

Waffles
New Member

Posts : 5
Reputation : 1
Language : English

http://testforumfortails.forumotion.co.uk/

Back to top Go down

Solved Re: Altering spoiler width when opened to display whole content

Post by SLGray on December 2nd 2015, 4:30 am

Have you tried to using the image re-sizer in the administration panel? You can resize large images.


Last edited by SLGray on December 3rd 2015, 4:27 am; edited 1 time in total


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


SLGray
Administrator
Administrator

Male Posts : 36636
Reputation : 2440
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Solved Re: Altering spoiler width when opened to display whole content

Post by Waffles on December 2nd 2015, 4:36 am

Not personally, no. The friend who owns the site tried that first of all and she said that it seemed to just make the images not appear at all.

Waffles
New Member

Posts : 5
Reputation : 1
Language : English

http://testforumfortails.forumotion.co.uk/

Back to top Go down

Solved Re: Altering spoiler width when opened to display whole content

Post by SLGray on December 2nd 2015, 10:57 am

Could you please post a link to a topic that has a spoiler with images that guests can see?


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


SLGray
Administrator
Administrator

Male Posts : 36636
Reputation : 2440
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Solved Re: Altering spoiler width when opened to display whole content

Post by Waffles on December 2nd 2015, 9:01 pm

We didn't have one as the site is in progress and most of the categories are hidden right now. So I made one:

http://tailsofkings.forumotion.com/t25-random-topic

As you can hopefully see, I figured out how to add a scrollbar by using "overflow: auto;" in CSS. But we ideally want the whole images to be shown without a scrollbar. Also, is there any way to get rid of the line that goes across the page at the bottom of the spoiler codebox?

Waffles
New Member

Posts : 5
Reputation : 1
Language : English

http://testforumfortails.forumotion.co.uk/

Back to top Go down

Solved Re: Altering spoiler width when opened to display whole content

Post by SLGray on December 3rd 2015, 4:26 am

Look for this in the CSS Stylesheet:
Code:
dl.codebox dt {
    border-bottom: 1px solid #CCC;
    display: block;
    font-size: 0.8em;
    font-weight: 700;
    margin-bottom: 3px;
    text-transform: uppercase;
}
Remove this part to remove the line:
Code:
border-bottom: 1px solid #CCC;


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


SLGray
Administrator
Administrator

Male Posts : 36636
Reputation : 2440
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Solved Re: Altering spoiler width when opened to display whole content

Post by Ange Tuteur on December 3rd 2015, 1:57 pm

Hi @Waffles,

Try the following CSS rule :
Code:
.spoiler_content img {
  max-width:99%;
}

It should set a maximum width for the images inside the spoiler. ( i.e. the images will only be the size of the spoiler width )

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Altering spoiler width when opened to display whole content

Post by Waffles on December 3rd 2015, 3:55 pm

That works wonderfully, thank you!

Is there anything I can do about that line? I already have the CSS rule set to having no border so it's troubling me.


Last edited by Waffles on December 4th 2015, 4:31 am; edited 1 time in total

Waffles
New Member

Posts : 5
Reputation : 1
Language : English

http://testforumfortails.forumotion.co.uk/

Back to top Go down

Solved Re: Altering spoiler width when opened to display whole content

Post by SLGray on December 3rd 2015, 9:25 pm

@SLGray wrote:Look for this in the CSS Stylesheet:
Code:
dl.codebox dt {
  border-bottom: 1px solid #CCC;
  display: block;
  font-size: 0.8em;
  font-weight: 700;
  margin-bottom: 3px;
  text-transform: uppercase;
}
Remove this part to remove the line:
Code:
border-bottom: 1px solid #CCC;


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


SLGray
Administrator
Administrator

Male Posts : 36636
Reputation : 2440
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Solved Re: Altering spoiler width when opened to display whole content

Post by Waffles on December 3rd 2015, 9:47 pm

Ah, right. That "dl.codebox dt " rule wasn't in the CSS Stylesheet so I added it and set the border-bottom to none. I must've overlooked that. Thanks a bunch!

Waffles
New Member

Posts : 5
Reputation : 1
Language : English

http://testforumfortails.forumotion.co.uk/

Back to top Go down

Solved Re: Altering spoiler width when opened to display whole content

Post by SLGray on December 4th 2015, 9:55 am

Topic solved and archived


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


SLGray
Administrator
Administrator

Male Posts : 36636
Reputation : 2440
Language : English
Location : United States

http://ztwds.forumotion.com/

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