Promo Area of the website

Hello all,

I've been having a problem with the area close to the top. I guess its called the promo area (the area circled in red in the attachment below) lol i,m not sure what that area is called. Does anybody know?  I would like to know what the name of that area is.

What the problem is I am trying to get my images to fit in this area and it seems not to be working. The size changes on different computers, it all depends on there resolution settings. How would i get my images to stay that size in that area?  What is the Size of that area? How do I get my images to fit correctly there? I need a little help please it will be appreciated!

i make all my art images with photoshop.

Thanks again

find this
in inc/js/jquery.dolPromo.js

$img.css({
position: 'absolute',
left: Math.round( ($img.parent().width()  / 2) - ($img.width()  / 2)),
top:  Math.round( ($img.parent().height() / 2) - ($img.height() / 2))
});



change to this

$img.css({
position: 'absolute',
left: 0,
top:  0,
width: '100%;
height: '100%;
});

and make sure your page settings are 98%

you can not do this in page builder

you need to have deanos tools mod installed you can do all pages at once

this well help with the sizing issue

make images 998px x 260px or what ever the height you require

and you can change any css for promo

templates/base/css/ index css around line 110

#indexPhotoBorder

#indexPhotoLabel around line 208 edit here to chose the depth of the promo block 262px is default

happy thoughts 

ok thanks mingle! I am going to give it a try and see what happens. I will be back with my results or questions lol!

Ok well I have a problem in deanos tools at the Set Width Of Pages you dont have the option to put the percentage only the width. maybe i am in the wrong area      

You are in right area just type 98% into box . I only said to keep page width to 98% instead of 100% so there will always be a growing boarder due to screen sizes getting bigger helps keep things in perspective when on a small or large screen .

happy thoughts

It doesn't do percents so i just put in a pixel width of 1002 and seems to look pretty good when i added a image to it. I going to check on my other computer to see what it looks like. 

Well it looks fine on that computer too. 

glad it works what did you put at 1002 px ? the page width or the promo width ?

and if you only want promo to be viewed by guests this might help

.here

happy thoughts

The Page width is what i set at 1002px. The promo image width is at 998px. It seemed to work fine for me. Go to http://www.blockboyradio.com and check it out. The image I have there is something i did really quick to see how it would work out. 

thanks for the link but i won't be doing to much promo there

if you do not use % for page it puts your template all out of whack if viewed in smaller browser window

looks horrible :O) you can set all page widths to 100% in page builder .

happy thoughts

Did you look at my website? Does it look all whack on your computer? What do you exactly mean by a smaller browser window? 

and i don't understand what you mean by putting a percent in that area of the Set Width Of Pages. It says to put pixel width. I am confused here lol!

I have a attachment of what I am talking about below. Have a look

Where is the page builder you are talking about i cant find it. 

thanks 

just type 98% in the page width in deanos tools and save  it does work .

page builder is in the admin section .

laptop will show picture at the static size and pushes your template out of screen.

and if you re size browser window it will put menu block and template out of screen ..

The instruction I gave you will ensure your whole page will show on the smallest screen to a 50" tv screen

and keep your promo pictures on all computers which is what you asked for.

happy thoughts

ok i will do that it sounds good! thanks for the help mingle. enjoy

I am really having a hard time figuring this out. It just not working for me. i dont know what i am doing wrong, maybe nothing. it just don't work lol

thanks anyways

The banner rotator on home page causes lots of problems...

On new IE it shows banner images all off centred and makes a website look rubbish and amatuer.

Im about to remove mine and replace with custom one see if thats better.

 Would you know how to fix that problem?

From what I can see, your big mistake is that you have your sit setup for 100% page width which means it re-sizes according to how wide somebody stretches the window. This almost never works well. There is a reason that most templates have a recommended width and that is because there are certain elements that are not designed to work well under those circumstances. The image rotater is designed to work at the fixed width intended by the template design so you need to go back to that and then make sure that you have actually sized each of you photos to the space allowed. If you are not sure of that space, just look at the properties of one of the original place holder photos and size your photos to the same weight and width. Of course if you want to widen your pages then you will have to adjust you photos to that new fixed width.

If you have forgotten how you ended up changing your page width and need to set it back, log back into your admin section and then goto builders then page blocks then select homepage from the drop down. I believe the standard width at install is 998px. Take the slider and move it off of 100 and back down to 998px and then resize your pics from there. You may want to double check your template instructions to make sure it did not call for a wider scale but otherwise it should work fine from there.

Oh dear what a pickle the instructions that I gave you at the top works in almost all browsers and screen sizes and custom templates that it has been tested on 1

  I repeat it stops the picture inside the promo container from going out of the the container via the hidden css command and contains and centers the pictures what ever the high or width if given 100% the container css still maintains the depth 262px in place in the css I did notice that you have a custom template but the promo block css is unlikely to be affected with a setting of 998px that is the size the picture remains what ever the browser or screen resolution which was the problem you asked to solve .

and in reply to tba217 • comments Might I point out that dolphin page builder is and can by default set all page settings to 100% via the slider I did complicate the matter by surgesting setting page width of 98% in deanos tools so at all times the pages would have a small boarder which then allows you to see any thing that is out of  bounds .

and then the only confusion is that some elements are still set in px not % which is why #indexPhotoLabel css is set to the depth of the promo block you require but the picture IE image size is set to 100% so picture fills the width by 100% and fills 100% of the set depth which is 262px

Happy thoughts

$img.css({

position: 'absolute',
left: 0,
top:  0,
width: '100%;
height: '100%;
});

and make sure your page settings are 98%

you can not do this in page builder

you need to have deanos tools mod installed you can do all pages at once

this well help with the sizing issue

make images 998px x 260px or what ever the height you require

ok mingle what do i do after i do these instructions, because I did this and now this is what my page looks like when it is minimized (see the attachment)

What to do now?

Right here goes firstly you appear to have only 1 image in the promo box which means the image should fade in and out every few seconds this is not happening and the java script is missing in fire bug its not being called .

perhaps you messed up or it didn't translate well with the copy and pasting in to the inc/js/jquery.dolPromo.js .

 delete do not over write your original  inc/js/jquery.dolPromo.js  .with the original  attached below

Clear Cache: in admin panel

see if your image returns to how it was before this change .

then rename the jquery.dolPromoorig.js

then Clear Cache: in admin panel

and upload the changed js file removing the 1from the end

see if this has the desired effect ?

if not remove the js file you just uploaded rename js file removing the orig from the end

and we are back were we started with your picture not as you want it .

if you are going to only use one picture for the moment just select the html in admin basic settings .

then set your page width back to 998px

happy thoughts

 ok i am confused with this part of the last reply

nevermind the last reply i see what you are talking about

lol i didnt see the attachments at the bootom.

i will give it a try and let you now what the outcome is

thanks

Well this is how it looks now

Have a look here http://www.blockboyradio.com

Then minimize the page and tell me what u think ?

I have to resize the images to fit in the promo block when it is maximize 

and yes i added 1 more image to the promo block to see if it would rotate.

thanks and let me know what you all think, how it looks! 

Well I am pleased we got that one sorted out now all you need to do is give the right hand page block column at least 35% to 40% to stop the text areas going out in smaller screens and you are all set.

happy thoughts

Damn here we go again lol. 

Now i can't get my images to fit in the promo block. No matter what width i upload them at it stays at 998px.  If i go under 998px  it loads correctly but now i need a longer width than 998px and it doesn't go paste that.

What can you do 

Well it would appear that you have changed some more css again

<div class="sys_bc_wrapper" style="width:1110px;">

<div class="main" style="border:0px; width:1110px;"><<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

No i changed the width to 1110px  when i was trying to get the images i uploaded to fit the promo block. The images didn't fit correctly at 998px or at 98%. 

I can upload a image with a 2000px width and a 260px height and the width of the image will not go past 998px, the image will look fine at 998px too but it wont fit the promo block. So i have just been trying different things out.

YES IT WOULD PERHAPS APPEAR TO YOU THAT IT WORKS TO ME and most people  IT PUTS THE PAGE OUT as you have made the size 1010px  which also means that other areas on your page are 1010px BUT IMAGE SIZE IS MEANT TO BE 100% wide 262px deep Page size is meant to be 98% so the promo image fill the promo area by 100% which fills the page width by 98%. you have made it quite complicated when it was a simple fix that I gave you. You Can not mix px and % it does not work . If your picture will not fill the promo area you are using the original jquery.dolPromo.js not the one that ends with 1 ..

your original question How would i get my images to stay that size in that area?

happy thoughts .

Lol OK this is crazy.

Well, i got everything working fine in google chrome but now when i checked in IE and firefox the problem wasn't fixed in those browsers. I don't understand why that is that way.

My images fit in the promo block with google chrome but doesn't fit in the other browsers. Maybe my image width is to much.

Is there a way to make the images fit in the promo block correctly no matter what the width and height of the image is?

thanx

and please work with me because I am fairly new to all this and I want to learn lol please be patience with me

I found that an easier fix for me was adding a snippet of code to the css so that ie handles the images correctly. 

http://www.boonex.com/forums/topic/Please-help-Urgent-issue-for-me-.htm