Help with "center" aligning the pictures in Thumbnails for main rotating page slider

Posted by ifixyourpc on January 4, 2013 at 6:26pm

Hi all,
Im using theme706

On the main page you will see the 3 rotating Pictures, underneath are the thumbnails but owing to the shape of the window, i have had to convert the 3rd picture so that it isnt too squashed skewed.
Only problem is, the 3rd Thumbnail picture only shows the left hand of the main picture..
Is there a way i can edit the thumbnail to "Align center" so that it sees the picture instead of half grey?

I just cant see where to edit it..

Thanks in advance

Stuart

Comments

margin-left

Posted by bitradiator on January 4, 2013 at 9:44pm

.pager-num-3 img {
margin-left: -70px;
}

Firebug ;)

You might consider setting up an image style (admin/config/media/image-styles) that automatically crops your thumbnails to a suitable size.

Have fun...

--BitRadiator

where do i find that script to edit

Posted by ifixyourpc on January 4, 2013 at 10:06pm

Thanks!
But what file do edit or add that too?
added these
Scale 100x100 (upscaling allowed)
Weight for Scale

Scale 75x75 (upscaling allowed)
Weight for Scale

theme706

Posted by bitradiator on January 4, 2013 at 10:15pm

Since you're using a custom theme I had to go to the source to find this: "sites/all/themes/theme706/css/style.css".

--BitRadiator

Thumbnail generator

Posted by shendric on January 5, 2013 at 6:35pm

I'm not familiar with this theme, so I'm not sure how the thumbnails get shown. It looks like it is just resizing the images using html, which can work, but it may cause the page to load more slowly. I usually find the easiest way to use images styles for thumbnails is to create a view and assign the image style there.

cant find .pager-num-3 img { ?

Posted by ifixyourpc on January 5, 2013 at 6:10pm

Hi thanks again,

I've opened the style.css, searched for ".pager-num-3" and edited it in a few places but it just throws the whole page out.
I am trying lol

Does it need to replace code or add as a new line in here?

/*******Slider********/
#block-views-slider-block {
	padding-top: 46px;
}

.view-slider {
	height: 456px;
}

.view-slider .views_jqfx_cycle_main {
	background: #fff;
	border-radius: 10px;
	padding: 10px;
	box-shadow: 0 7px 30px rgba(0,0,0, .75);
	height:436px;
}
.view-slider .views-jqfx-controls-bottom {
	float: right;
	margin-top: -46px;
	z-index: 500;
	position: relative;
	padding-right: 36px;
}
	.view-slider .views-jqfx-controls-bottom .pager-item {
		border: 10px solid #fff;
		border-radius: 5px;
		width: 124px;
		height: 118px;
		box-shadow: 0 7px 10px rgba(0,0,0, .75);
		overflow: hidden;
		display: block;
		float: left;
		padding: 0;
		margin-left: 8px;
	}
		.view-slider .views-jqfx-controls-bottom .pager-item a {
			background: #fff;
			display: block;
		}

		.views_jqfx_cycle_pager div a img {
			width: 270px;
			height: 118px;
			opacity: 0.7;
			-webkit-transition:opacity 0.2s linear;
			-moz-transition:opacity 0.2s linear;
		}
			.view-slider .views-jqfx-controls-bottom .active-slide img, .views_jqfx_cycle_pager div a img:hover {
				opacity: 1;
			}
/********************/

Margin Left

Posted by shendric on January 5, 2013 at 6:37pm

Hey,

I made the following adjustment in the css file:

.view-slider .views-jqfx-controls-bottom .pager-item a {
background: white;
display: block;
margin-left: -70px;
}

And things seemed to center more properly.

where sis you put that?

Posted by ifixyourpc on January 5, 2013 at 7:47pm

Thanks.
But i need to work out where i need to edit or type that..

do i just add

.view-slider .views-jqfx-controls-bottom .pager-item a {
background: white;
display: block;
margin-left: -70px;
}

Or do i delete some part and replace with that?
I tried but keep sending other blocks out of shape.. :(

Could you please show me what changes you made so i can see what section to edit?
i can then work on maybe a 4th thumbnail for 4 rotating pictures.
Thank you :)

changed CSS

Posted by shendric on January 5, 2013 at 7:55pm

Hi,

On the style.css file you provided, I changed:

.view-slider .views-jqfx-controls-bottom .pager-item a {
			background: #fff;
			display: block;
		}

.view-slider .views-jqfx-controls-bottom .pager-item a {
background: white;
display: block;
margin-left: -70px;
}

I just used Firebug to test that out. All it really does is to shift the image back 70px. It actually shifts the entire link back 70px, which includes the image.

Lay the foundation

Posted by bitradiator on January 5, 2013 at 7:38pm

After working through a tutorial you'll have a better idea of what's going on.

For now just add the code from my previous post at the end of your styles.css file.

--BitRadiator

Thanks..

Posted by ifixyourpc on January 5, 2013 at 7:56pm

Will do,

that fixed it

Posted by ifixyourpc on January 6, 2013 at 6:32pm

Thanks!
So pager number is the 3rd block of those thumbnails, so theoretically, if i added

.pager-num-2 img {
margin-left: -70px;
}

The second one will center aswell or am i confused lol

Same to You

Posted by amanda.lewis on January 5, 2013 at 12:40am

I was also facing the same problem when I was totally novice on this work. I'm also a novice. I don't know a lot of things on about website design. I was first install drupal on my website. But i can't understand drupal on that time. That's why I installed wordpress on my website & i designed it with wordpress. But now-a-days, i'm working with drupal on localhost. Hope I'll learn it as fast as I can.

Tempting Recipes - Art behind Cooking
All delicious recipes website

Not sure what has happened

Posted by ifixyourpc on January 7, 2013 at 11:40am

Not sure what has happened but im now having problem on the main page where the main tab has a drop down menu.
The main Button is "Portfolio" The 2 drop downs are Portfolio 1 & 2.
I wish to have them separate, like 2 different portfolios but for some reason they are both copies of one another..
Different layouts but the same articles within..

Is there a way to separate them?