Slider Image wont extend to full slider size

Graphene Theme Forum » Graphene Wordpress theme » Support

Slider Image wont extend to full slider size

(10 posts) (3 voices)

Started 5 months ago by My_Pet_Duck
Latest reply from My_Pet_Duck
This topic is closed
This topic is not resolved

Skip to the latest post | RSS feed for this topic

My_Pet_Duck
Member

Hi.

I've been looking all around the support forum for help but I cant seem to find anyone with the same problem. I love the theme and have used it on many sites. I hope you can help.

I am using a three-column mode setup up for the homepage (front page) of my site. I have a static front page and each column is set to 315px (i.e - content 315px, left sidebar 315px and right side bar 315px). I also have the page set up so the content column is set to the left followed by the two sidebars to the right.

I have a slider set up which is above the content column and sidebar 2 column. I have managed to lower the sidebar 2 so it appears under the slider next to the content column. I did this by using coding from the support forum.

My problem is that I cant get the slider image to appear the full length of the slider which is set to width 650 x height 600. The image just wants to stay the same size as the content column which appears below it.

1. Is there anyway to change the slider image to fit the same size as the actual slider body?

2. With regards to the content column itself, is there anyway for the frontpage posts (currently set to appear 5) to fit the full width of that content column (of 315px). At the moment they seem to alternate between left and right alignment as you scroll down. If I cant extend them to the full column width can I justify each post so they at least appear on top of each other aligned as you scroll down?

Here is a link to the front page of my site which is currently still in development: http://www.pigtailmagazine.com

Thanks for your time as I know you are busy people. If you need any clarification on anything please just ask.

Thankyou

Posted 5 months ago #
Kenneth John Odle
Moderator
The slider does not resize images.

1. Is there anyway to change the slider image to fit the same size as the actual slider body?

You could create an image the size you want it, upload it to your media gallery, select that as the featured image for the post, and then set the slider to display the featured image.

At the moment they seem to alternate between left and right alignment as you scroll down

That's because homepage panes are meant to exist in a 2x grid, with one floating to the left and the next floating to the right. You've made your content area so narrow that they are piling up on each other instead of sitting side by side. This is not really how homepage panes were meant to work, but you can fix it by adding this to your custom css:
```
.homepage_pane {
    width: 320px !important;
}
```
More helps are available on my blog.
Follow this advice for setting up your blog.
Problems? Questions? Read the forum rules and help us to help you.
Posted 5 months ago #
My_Pet_Duck
Member

Thanks so much for the homepage pane code. Works a treat.

Will have a go at your slider image recommendations and get back to you soon...

Posted 5 months ago #
Syahir Hakim
Developer

I have a slider set up which is above the content column and sidebar 2 column. I have managed to lower the sidebar 2 so it appears under the slider next to the content column. I did this by using coding from the support forum.

This feature is built into Graphene 1.8. Try removing the your custom codes and use the theme's feature. You may also need to rebuild the thumbnail of your existing images if you plan to use any of the images in the slider.

Find out how you can support the Graphene theme, and become an affiliate.
New to the forum? Make sure you read the forum rules.
Like Graphene? Check out Graphene Mobile and Graphene Mobile Neo!

Posted 5 months ago #
My_Pet_Duck
Member
Hi All

I tried Kenneth's recommendations but the slider still only shows and image up to 315px wide. I have no problem with the slider image height and this always fits the slider even when i re-size it. I think it may be because the image is attached to the same column as the homepage pane which sits below it (I could be wrong). When I look at the code it says div.clearfix.grid_8 315px x 2400px This is including the whole height of the left hand pane, which includes the slider image and homepage pane below it.

Hi Syahir, how would I go about doing this? I removed the custom code but sidebar 2 is then placed back at the top and the slider frame reduces back to 315px. This is the code i've been using:
```
#sidebar2 {
    margin-top: 638px;
}
.featured_slider {
    width: 650px;
}
.three-columns .featured_slider #slider_root {
    width: 650px;
}
.three-columns .slider_post {
	width: 650px;
}
```
I am using a three column set up for the static front page and would like to make my slider appear over the homepage pain (also called the content column) and the sidebar 2. I would like the sidebar 1 to run alongside the slider, from the top, on the right hand side. I have tried using 'extend slider to full width of the theme' but this makes the slider appear over all three panes.

The custom code is the only way I have found to lower the sidebar 2 under the slider while having sidebar 1 run along side it on the right. Here is a link to the test page of how I would like it to display: http://www.pigtailmagazine.com

The modifications you can do to this theme are amazing and I'm sure i'm missing something basic. Your continued help is appreciated.

Thanks again
Posted 5 months ago #
Syahir Hakim
Developer

Go to Graphene Options > Slider Options > Extend slider to full width.

Find out how you can support the Graphene theme, and become an affiliate.
New to the forum? Make sure you read the forum rules.
Like Graphene? Check out Graphene Mobile and Graphene Mobile Neo!

Posted 5 months ago #
My_Pet_Duck
Member

Thanks,

Have done this but now it shows the slider above all three panes and not just the first two I wanted?

Posted 5 months ago #
My_Pet_Duck
Member
I think I managed to do it. I set the slider options to 'extend slider to full width' and changed the code in the custom css to this:
```
#sidebar1 {
    margin-top: -638px;
}
.featured_slider {
    width: 650px;
    margin: 0px;
}
.three-columns .featured_slider #slider_root {
    width: 650px;
    margin: 0px;
}
.three-columns .slider_post {
    width: 650px;
    margin: 0px;
}
```
The slider now appears above the the first 2 columns with the third column running down the side of the slider on the right hand side, just as I wanted. Do you know if I will need to do anything else as I think I may have resolved it..?

Thanks
Posted 5 months ago #
My_Pet_Duck
Member

I think I managed to do it. I set the slider options to 'extend slider to full width' and changed the code in the custom css to this:

#sidebar1 {
margin-top: -638px;
}
.featured_slider {
width: 650px;
margin: 0px;
}
.three-columns .featured_slider #slider_root {
width: 650px;
margin: 0px;
}
.three-columns .slider_post {
width: 650px;
margin: 0px;
}
The slider now appears above the the first 2 columns with the third column running down the side of the slider on the right hand side, just as I wanted. Do you know if I will need to do anything else as I think I may have resolved it..?
Thanks

The only problem is this works for the static front page. For all of the over pages without a slider the sidebar appears before the page content as the sidebar 1 margin is set at -638px for every page. I only want it set to this fro the static front page...

Posted 5 months ago #
My_Pet_Duck
Member
I figured it out again. Think i'm getting pretty good at this custom css coding. lol.

Changed the first part of the code to this:
```
.three-columns #sidebar1 {
    margin-top: -638px;
}
```
Now the coding only effects the static front page.

Thanks for everyone's help. Will make sure it works on all browsers and get back to you about whether everything is resolved :)
Posted 5 months ago #

Topic Closed

This topic has been closed to new replies.