Image Cut-Off Solved In Prosilver

Do not post support requests, bug reports or feature requests. Discuss phpBB here. Non-phpBB related discussion goes in General Discussion!
Anti-Spam Guide
Gaming Bob
Registered User
Posts: 109
Joined: Wed May 09, 2007 11:09 pm

Image Cut-Off Solved In Prosilver

Post by Gaming Bob » Thu Jun 28, 2007 3:53 am

I don't think this qualifies as a mod, more of a tweak. The tweak resizes off-site images where it is a particular problem in the Prosilver theme. It is the most simple fix possible as well. It also maintains image sizes that do not require resizing. You can still right click and view the actual picture size as well. Tested and works in Firefox, IE, and Opera. Here it goes...

Open common.css in the them folder and add this code to the "img" class

Code: Select all

max-width: 100%;
so, the whole thing should be...

Code: Select all

img {
	border-width: 0;
	max-width: 100%;
}

Heimidal
Former Team Member
Posts: 958
Joined: Fri Jul 06, 2001 11:56 am
Location: Greeley, CO, US
Contact:

Re: Image Cut-Off Solved In Prosilver

Post by Heimidal » Thu Jun 28, 2007 7:01 am

Just a quick note: this will have no effect in IE6 as IE6 does not support max-width.

Gaming Bob
Registered User
Posts: 109
Joined: Wed May 09, 2007 11:09 pm

Re: Image Cut-Off Solved In Prosilver

Post by Gaming Bob » Thu Jun 28, 2007 1:30 pm

Scratch that, tested and works in FF 2, IE7, Opera 9. Is there a way to use the width: expression(); statement to fix it in IE6 without stretching all of the pictures? I tried a few things but couldn't get it to work.

User avatar
Eelke
QA Team
Posts: 2903
Joined: Thu Dec 20, 2001 8:00 am
Location: NL, Bussum
Name: Eelke Blok
Contact:

Re: Image Cut-Off Solved In Prosilver

Post by Eelke » Fri Jun 29, 2007 8:08 am

On my phpBB 2 board, I took a completely different approach using JavaScript.

Advantages (not that I used these to make my choice, I hadn't realized this CSS tweak would also be a possibility):
- I get to include a dashed red line to indicate the image was resized, a title stating the same plus the original size (especially nice for moderators because we do have a size limit to pictures in order not to waste bandwidth), and a link to open the original by left clicking (I have many users that probably wouldn't know about being able to right click on a picture to open it for viewing full size).
- I think it works on most browsers (although I haven't actually tested it very thoroughly).

Disadvantage:
- More complex.

Survival Bill
Registered User
Posts: 248
Joined: Tue Jun 12, 2007 3:03 am
Contact:

1

Post by Survival Bill » Fri Jun 29, 2007 8:19 pm

1
Last edited by Survival Bill on Sat Oct 10, 2015 6:35 pm, edited 1 time in total.

Gaming Bob
Registered User
Posts: 109
Joined: Wed May 09, 2007 11:09 pm

Re: Image Cut-Off Solved In Prosilver

Post by Gaming Bob » Sat Jun 30, 2007 3:46 am

It is close to the top of the file by "p" and "hr".

Survival Bill
Registered User
Posts: 248
Joined: Tue Jun 12, 2007 3:03 am
Contact:

1

Post by Survival Bill » Sat Jun 30, 2007 5:18 am

1
Last edited by Survival Bill on Sat Oct 10, 2015 6:35 pm, edited 1 time in total.

Gaming Bob
Registered User
Posts: 109
Joined: Wed May 09, 2007 11:09 pm

Re: Image Cut-Off Solved In Prosilver

Post by Gaming Bob » Sat Jun 30, 2007 3:45 pm

Did you refresh your theme in the admin control panel? Also what browser are you using, it doesn't work in Internet Explorer 6. You can "right" click the image and view it in a new window, or save as.

Survival Bill
Registered User
Posts: 248
Joined: Tue Jun 12, 2007 3:03 am
Contact:

1

Post by Survival Bill » Sun Jul 01, 2007 3:31 am

1
Last edited by Survival Bill on Sat Oct 10, 2015 6:35 pm, edited 1 time in total.

Sublimed
Registered User
Posts: 25
Joined: Tue Jul 05, 2005 12:58 am

Re: Image Cut-Off Solved In Prosilver

Post by Sublimed » Wed Jul 04, 2007 7:47 pm

I downloaded the template ProCyan and the code you speak of is not in the common.css file...

Here is the top section and I know you mentioned to look by hr and p, but there is nothing there...

Code: Select all

/* General proSilver Markup Styles
---------------------------------------- */

* {
	/* Reset browsers default margin, padding and font sizes */
	margin: 0;
	padding: 0;
}

html {
	font-size: 100%;
	/* Always show a scrollbar for short pages - stops the jump when the scrollbar appears. non-IE browsers */
	height: 100%;
	margin-bottom: 1px;
}

body {
	/* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
	font-family: Verdana, Helvetica, Arial, sans-serif;
	color: #828282;
	background-color: #FFFFFF;
	/*font-size: 62.5%;			 This sets the default font size to be equivalent to 10px */
	font-size: 10px;
	margin: 0;
	padding: 12px 0;
}

h1 {
	/* Forum name */
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	margin-right: 200px;
	color: #FFFFFF;
	margin-top: 15px;
	font-weight: bold;
	font-size: 2em;
}

h2 {
	/* Forum header titles */
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight: normal;
	color: #3f3f3f;
	font-size: 2em;
	margin: 0.8em 0 0.2em 0;
}

h2.solo {
	margin-bottom: 1em;
}

h3 {
	/* Sub-headers (also used as post headers, but defined later) */
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	text-transform: uppercase;
	border-bottom: 1px solid #CCCCCC;
	margin-bottom: 3px;
	padding-bottom: 2px;
	font-size: 1.05em;
	color: #989898;
	margin-top: 20px;
}

h4 {
	/* Forum and topic list titles */
	font-family: "Trebuchet MS", Verdana, Helvetica, Arial, Sans-serif;
	font-size: 1.3em;
}

p {
	line-height: 1.3em;
	font-size: 1.1em;
	margin-bottom: 1.5em;
}

img {
	border-width: 0;
}

hr {
	/* Also see tweaks.css */
	border: 0 none #FFFFFF;
	border-top: 1px solid #CCCCCC;
	height: 1px;
	margin: 5px 0;
	display: block;
	clear: both;
}

hr.dashed {
	border-top: 1px dashed #CCCCCC;
	margin: 10px 0;
}

hr.divider {
	display: none;
}

p.right {
	text-align: right;
}


Gaming Bob
Registered User
Posts: 109
Joined: Wed May 09, 2007 11:09 pm

Re: Image Cut-Off Solved In Prosilver

Post by Gaming Bob » Wed Jul 04, 2007 9:28 pm

I marked where it should be added with a bunch of stars.
Sublimed wrote:I downloaded the template ProCyan and the code you speak of is not in the common.css file...

Here is the top section and I know you mentioned to look by hr and p, but there is nothing there...

Code: Select all

/* General proSilver Markup Styles
---------------------------------------- */

* {
	/* Reset browsers default margin, padding and font sizes */
	margin: 0;
	padding: 0;
}

html {
	font-size: 100%;
	/* Always show a scrollbar for short pages - stops the jump when the scrollbar appears. non-IE browsers */
	height: 100%;
	margin-bottom: 1px;
}

body {
	/* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
	font-family: Verdana, Helvetica, Arial, sans-serif;
	color: #828282;
	background-color: #FFFFFF;
	/*font-size: 62.5%;			 This sets the default font size to be equivalent to 10px */
	font-size: 10px;
	margin: 0;
	padding: 12px 0;
}

h1 {
	/* Forum name */
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	margin-right: 200px;
	color: #FFFFFF;
	margin-top: 15px;
	font-weight: bold;
	font-size: 2em;
}

h2 {
	/* Forum header titles */
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight: normal;
	color: #3f3f3f;
	font-size: 2em;
	margin: 0.8em 0 0.2em 0;
}

h2.solo {
	margin-bottom: 1em;
}

h3 {
	/* Sub-headers (also used as post headers, but defined later) */
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	text-transform: uppercase;
	border-bottom: 1px solid #CCCCCC;
	margin-bottom: 3px;
	padding-bottom: 2px;
	font-size: 1.05em;
	color: #989898;
	margin-top: 20px;
}

h4 {
	/* Forum and topic list titles */
	font-family: "Trebuchet MS", Verdana, Helvetica, Arial, Sans-serif;
	font-size: 1.3em;
}

p {
	line-height: 1.3em;
	font-size: 1.1em;
	margin-bottom: 1.5em;
}

img {
	border-width: 0;   
**************Add "max-width=100%;" here***********************************
}

hr {
	/* Also see tweaks.css */
	border: 0 none #FFFFFF;
	border-top: 1px solid #CCCCCC;
	height: 1px;
	margin: 5px 0;
	display: block;
	clear: both;
}

hr.dashed {
	border-top: 1px dashed #CCCCCC;
	margin: 10px 0;
}

hr.divider {
	display: none;
}

p.right {
	text-align: right;
}


eldruin
Registered User
Posts: 2
Joined: Tue Jul 10, 2007 10:34 pm

Re: Image Cut-Off Solved In Prosilver

Post by eldruin » Tue Jul 10, 2007 10:41 pm

I've done this in prosilver's common.css,

Code: Select all

img {
	border-width: 0;
	max-width: 100%;
}
also:

Code: Select all

img {
	border-width: 0;
	max-width: 6000;
}
even 200% or adding "width: 100%;" but nothing works, it continue cutting the image when exceeds. See it (click on "Mostrar" button in "mostrar imagen")

Gaming Bob
Registered User
Posts: 109
Joined: Wed May 09, 2007 11:09 pm

Re: Image Cut-Off Solved In Prosilver

Post by Gaming Bob » Wed Jul 11, 2007 12:28 am

Did you refresh your theme in the Admin Control Panel? Looking at your stylesheet shows that the change did not take effect yet.

http://jigsaw.w3.org/css-validator/vali ... medium=all

eldruin
Registered User
Posts: 2
Joined: Tue Jul 10, 2007 10:34 pm

Re: Image Cut-Off Solved In Prosilver

Post by eldruin » Wed Jul 11, 2007 12:46 am

Yes! It worked.
Thank you very much!

sweetbajan
Registered User
Posts: 11
Joined: Fri May 25, 2007 1:59 am

Re: Image Cut-Off Solved In Prosilver

Post by sweetbajan » Tue Jul 17, 2007 10:09 pm

This doesnt work in Safari and in Firefox it cuts off my banner like http://i8.tinypic.com/6b9kahz when it is supposed to look like http://i11.tinypic.com/4kusadi.png can someone help me please.

Post Reply

Return to “phpBB Discussion”