Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

template resizing hero images

Posted on 2014-11-19
12
Medium Priority
?
266 Views
Last Modified: 2014-11-20
Client had a budget and we had to use a template for their website.  The template keeps resizing the hero image (main pic below business name). It cuts off about 2" on the right of each image.  I called tech support and was on with them for over 1 hour and they could not figure out why. They even pulled in level 2 tier tech support.  They did not have a solution for me.  Hoping one of you can help me out.

For instance, this page is of a fireplace.  I will include the original image that I uploaded so you can compare what it is supposed to look like.  Tech support was unable to give me dimentions for the image.

http://cudworthlane.co/green.html

Here is css from template.  I am not sure what to edit.
/**
 * @file
 * @project 796
 * @package sftheme
 * @site app1
 */
 
/* typography */
 
h1, h2, h3, h4, h5, h6 {font-weight:normal;}
h1 {font-size:1.8em;margin:10px 0;}
h2 {font-size:1.5em;margin:10px 0;}
h3 {font-size:1.3em;margin:10px 0;}
h4 {font-size:1.1em;margin:10px 0;}
h5 {font-size:1em;font-weight:normal;margin:10px 0;}
h6 {font-size:1em;font-weight:normal;}
p {margin: 10px 0;}

/* main */

body {
	margin: auto;
	font-family: Arial, Helvetica, FreeSans, sans-serif;
	font-size: 15px;
	background-image: url(images/796_bkg-tile.gif);
	background-repeat: repeat;
	color: #4a310c;
	background-color: #bbaa89;	
}

.sf_outer_wrapper {
	width: 980px;
    margin: 20px auto;	
}

.sf_wrapper {	
	width: 980px;	
	height: auto;
}

.sf_wrapper:after {	
	content:".";
	display:block;
	clear:both;
	visibility:hidden;
	height:0;  
}

/* header */

.sf_header_wrapper {
	width: 980px;		
}

.sf_header_wrapper:after {
	content:".";
	display:block;
	visibility:hidden;
	clear:both;
	height:0;
}

.sf_main_header {
	text-align: left;	
	width: 950px;
	font-family: Georgia, "Nimbus Roman No9 L", serif;
	font-size: 40px;
	font-weight: normal;
	font-variant: normal;
	padding: 25px 15px;	
	background-image: url(images/796_header.jpg);
	background-repeat: repeat-y;
	background-position: right;
	background-color: #ffffff;
	min-height:50px;
	height: auto !important;
	height: 50px;
}

.sf_main_header:after {
	content:".";
	display:block;
	visibility:hidden;
	clear:both;
	height:0;
}

.sf_extra4 {
	float:right;
	display:inline;
	width:780px;
	height: 300px;
	background-image: url(images/796_main.jpg);
	background-repeat: no-repeat;
	background-position: left top;
}

/* page title */

.sf_region5 {	
	padding: 7px 30px;
	text-align: left;
	font-size: 18px;
	font-weight: normal;
	font-family: Georgia, "Nimbus Roman No9 L", serif;	
	width: 720px;
	display: block;
	min-height:21px;
	height:auto !important;
	height:21px;
	float:right;
}

.sf_pagetitle h1 {	
	font-size: 18px;
	font-weight: normal;
	margin:0px;
}

/* content */

.sf_content {
	float: right;	
	width: 740px;	
	padding: 20px;
	line-height: 1.4;
}

.sf_content:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

/* footer */
 
.sf_footer {	   
    font-family: Arial, Verdana, Helvetica, sans-serif;	
	clear:both;
	text-align:right;
	min-height:15px;
	height:auto !important;
	height:15px;
	padding:10px 30px;
	font-size:12px;			
}

.sf_footer p {
	margin:0px;
	padding:0px;
}

.sf_footer a:hover {
	text-decoration: none;	
}

.sf_banner {
	margin: 40px auto 0 auto;
	text-align: center;
}

#bannerLink {
	padding: 10px;
	margin: 10px;
}

.btn {
	cursor:pointer;
	font-size:12px;
	font-weight:normal;
	margin:3px 3px 3px 0;
	padding:4px;
	text-transform:uppercase;
	border:1px solid #6e543e;
	font-family:Arial, Helvetica, FreeSans, sans-serif;
	background-color:#8d735d;
	color: #FAF8EC;
}

#bannerLink a, 
#bannerLink a:visited, 
#bannerLink a:hover{
	color: #725624;
}

a:link {
	color: #725624;
}

a:visited {
	color: #725624;	
}

a:hover {
	color: #725624;
	text-decoration: none;	
}

/* sidebar */
 
 .sf_navigation {	
	text-transform: uppercase;	
	font-weight: normal;	
	margin-bottom:30px;
	min-height:1%;
	height:auto !important;
	height:1%;
}

.sf_navigation .widget_content div {	
	margin:0px;
}

.sf_navigation .Block {
	border:none !important; 
	position:static !important; /*Relative causes it to disappear in IE*/
}

.sf_navigation:after {	
	content: ".";
	display:block;
	visibility:hidden;
	height:0;
	clear:both;
}

.sf_navigation ul {
	padding: 0;
	margin: 0;
	list-style: none;
	float: left;
	width: 200px;
	min-height:1%;
	height:auto !important;
	height:1%;
}

.sf_navigation ul li { 
	padding: 0 0 1px;
	margin: 0;
	float: left;
	width: 200px;
	height:auto;
}

.sf_navigation ul li a {
	display: block;
	text-decoration: none;
	padding:14px 5px;
	margin: 0;	
	text-align:center;
	font-size: 14px;
	font-weight: normal;
}

.sf_navigation ul li a:hover {
}

.sf_navigation .subnav { 
	padding: 0;
	margin: 0;
	list-style: none;
	float: left;
	width: 200px;
	position: absolute;
	left: -999em;
	margin-left: 200px;
	margin-top: -44px;
	z-index:1000;
}

.sf_navigation .subnav li {
	padding: 0;
	margin: 0;
	float: left;
	width: 200px;
}

.sf_navigation .subnav li a {
	width: 190px;
	display: block;
	font-weight: normal;
	text-decoration: none;	
	margin: 0;	
	text-align:center;	
}

.sf_navigation .subnav li a:hover {
}

#Nav1 li:hover ul, 
#Nav1 li.sfhover ul {
	left: auto;
}

#Nav1 iframe {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
	filter: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);
}

#Nav1 li:hover, #Nav1 li.hover {  
    position: static;  
} 

.sf_pod {
	margin: 30px 0;
	padding:0 20px;
	clear:both;
	line-height: 1.2;
}

.sf_pod a:link,
.sf_pod a:visited,
.sf_pod a:hover {
	color: #C8B897;
}

/* widgets */
 
.widgetset_app2_0, .widgetset_app3_0 {
	width:180px;
	margin: 0 10px;
	overflow:hidden;
}

.sf_region4 {	
	float: left;	
	width: 200px;
	color: #C8B897;
}

.main_nav .widget_header {
	display:none;
}

.sf_region4 ul,
.sf_region4 ol {	
	margin:0px;
	padding:0px;
	list-style-type:none;
}

.widget_header {
	font-size:15px;
	font-weight:normal;
	margin:0;
	padding:4px 10px 4px;
	min-height:15px;
	height:auto !important;
	height:15px;
	text-transform: uppercase;
	border-bottom: 1px solid;
}

.widget_header a:link,
.widget_header a:visited {
	text-decoration:none;
	color: #C8B897;
}

.widgetset a:link,
.widgetset a:visited,
.widgetset a:hover {
	color: #C8B897;
}

.widget_header a:hover {
	text-decoration:underline;
}

.widget_content {
	margin:0;
	padding:5px 10px 20px;
}

.widget_content div {
	margin:4px 0px;
	padding:0;
}

.widget_content label {
	margin:0;
	padding:0;
	display:block;
}

.widget_content form {
	margin:0;
	padding:0;
}

.widget_content select {
	width:180px;
}

.main_nav .widget_content {
	margin:0;
	padding:0;
}

Open in new window

header4.jpg
0
Comment
Question by:nsitedesigns
  • 6
  • 6
12 Comments
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 40452945
So the relevant CSS is in two different files:

custom.css

.sf_extra4 {
    background-image: url('images/bg_iypg.jpg');
}

theme.css

.sf_extra4 {
    float: right;
    display: inline;
    width: 780px;
    height: 300px;
    background-image: url('images/796_main.jpg'); // this is overwritten by custom.css
    background-repeat: no-repeat;
    background-position: left top;
}

The template keeps resizing the hero image (main pic below business name).

Not quite.  The original images should be 980 x 300 but because they are being displayed as background images in the theme, the "window" is only 780 x 300.  So 200 pixels appear to be cut-off because the rest of the HTML sits on top of it. Your header4 image is the wrong initial size.  Create a new image at 980x300 that centers the fireplace and use that, not 700 x 350
0
 

Author Comment

by:nsitedesigns
ID: 40452974
Nope.  Didn't work.  I have attached my 930x300 image on the go green page.  Here is link;
http://cudworthlane.co/green.html

It still cuts off pic on right.  

Any other advise?
test2.jpg
test2.jpg
0
 
LVL 70

Accepted Solution

by:
Jason C. Levine earned 2000 total points
ID: 40452985
You're not fully understanding me.  The original pics are 980x300 because that's what this template calls for.  But the CSS only exposes 780x300:

.sf_extra4 {
    float: right;
    display: inline;
    width: 780px;   <------------------------ LOOK HERE!
    height: 300px;
    background-image: url('images/796_main.jpg'); // this is overwritten by custom.css
    background-repeat: no-repeat;
    background-position: left top;
}

So you should be crafting 980x300 images to maintain developer expectations but expect to lose 200 pixels on the right and compose the image accordingly.  If you put a smaller image in there, it may get stretched, then chopped.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:nsitedesigns
ID: 40453100
OK.  I see now.  Wouldn't it be easier to just change this from 780 to 980 rather than saving images with a 200 px white band on the right?
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 40453114
In a perfect world, yes.  But I'm not 100% clear on how this template is constructed and I think the 980 width is set elsewhere in the CSS and if you start changing things, the whole house of cards may collapse.  So while it's always better to actually fix the issue, it's also easier just to mimic what the template author is doing to get the desired result.
0
 

Author Comment

by:nsitedesigns
ID: 40453136
I created a hacked image (200 px white on right) and uploaded image.  It appears fine in template (earlier it was not looking good in template), BUT it still isn't displaying properly on the web.  I cleared my cache and history.  Are you able to view outlet plug on right of fireplace pic?

Screen shot of template:
http://cudworthlane.co/green.html

Live site:
http://cudworthlane.co/green.html
0
 

Author Comment

by:nsitedesigns
ID: 40453140
here is image
header-fireplace.jpg
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 40453161
Nope.  Inspecting the page shows a different image being displayed via CSS:

body#page_fbdba092-164e-4061-8bb7-57c819d6321f .sf_extra4 {
    background-image: url('images/bg_s5p5.jpg');
}

Is there some form of slider or rotator in the mix?
0
 

Author Comment

by:nsitedesigns
ID: 40453208
Grrrr

No, there is no slider or rotator.
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 40453215
You sure about that?

<script type="text/javascript" src="scripts/imageSwap.js?1825828092"></script><script type="text/javascript">		MM_preloadImages('images/f804973a70478105e721a81c40bac930_33nl_268m.png');

</script>

<script type="text/javascript" src="//img3.wsimg.com/starfield/jquery/v1.7.2/jquery.js"></script>
<script type="text/javascript" src="plugins/jquery.wst.background/jquery.wst.background.js?1825828092"></script>
<lin

Open in new window

0
 

Author Comment

by:nsitedesigns
ID: 40453229
i didn't put it in there and there was no slider in original template
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 40453245
Well, something is assigning background images to page IDs via the CSS and that's overwriting your attempts to set an image.  Find that and you solve this issue.  You may need to go through more of the CSS files and check those javascripts to make sure they aren't dynamically writing things.
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
When it comes to security, close monitoring is a must. According to WhiteHat Security annual report, a substantial number of all web applications are vulnerable always. Monitis offers a new product - fully-featured Website security monitoring and pr…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

773 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question