Extended slider problem
-
Hi. I’ve been looking for threads about how to widen the slider, and I ended up changing the header.php and using the following code, as recommended in this thread: https://forum.graphene-theme.com/feature-requests/full-width-slider-above-sidebars
.featured_slider #slider_root {
width: 1000px;
}
.slider_post {
width: 960px;
}Now my slider looks like this: http://alpha-risk.net/blog/ (it’s a test site :P)
As you can see, the slider is extended, but it doesn’t extend the current item; rather, it shows part of the item “next in line”. Plus, the item buttons on the bottom right corner of the slider are too far to the right. Could you please tell me the proper code to extend the slider without these issues?
PS. I also updated the theme php files as recommended in several threads on the subject.
Well I managed to fix it after reading this other thread: https://forum.graphene-theme.com/graphene-support/full-size-slider-with-sidebar-below#post-11060 But it turns out that using the instructions over there mis-aligns the sidebar on pages other than the homepage. So I had to use the header.php fix from the first thread, and the CSS code from the second thread. So there.
Admin
Scrap all the changes that you’ve done, and follow these steps instead:
1. Place this code into your child theme’s
functions.phpfile:/**
* Move slider to outside of the #content-main div
*/
function graphene_move_slider(){
global $graphene_settings;
if ( ! $graphene_settings['slider_position'] ){
remove_action( 'graphene_top_content', 'graphene_display_slider' );
add_action( 'graphene_before_content-main', 'graphene_display_slider' );
} else {
add_action( 'graphene_bottom_content', 'graphene_display_slider' );
}
}
add_action( 'template_redirect', 'graphene_move_slider' );
/**
* Adjust the width of the slider container
*/
function graphene_resize_slider(){
$width = graphene_grid_width( '', 16 );
echo '<style type="text/css">.featured_slider, .slider_post {width: ' . $width . 'px !important;}</style>';
}
add_action( 'wp_head', 'graphene_resize_slider', 1000 );
/**
* Adjust the slider's background image width
*/
function graphene_resize_slider_image_width( $width ){
return graphene_grid_width( '', 16 );
}
add_filter( 'graphene_slider_image_width', 'graphene_resize_slider_image_width' );2. Place this code into your child theme’s
style.cssfile:.featured_slider {
margin-left: 10px;
}And…. voila!
Note that you would need to rebuild your thumbnails for the slider’s background images to reflect the new size. I would recommend the AJAX Thumbnail Rebuild plugin.
Well, that works as well, thanks Syahir.
The thing is, I can’t seem to be able to modify the slider with CSS now the same way I could before. I’m no expert, but I’m assuming the PHP code is enforcing things like width, right? That means, for example, that I can’t stretch the slider to the very edges of the content box if I wanted. Or at least I don’t know how anymore…
I don’t mean to criticize your help, I’m sure your way is more elegant and convenient for the theme than what I was doing before.
Thank you for your help and all your hard work.
You still can. Remove the margin and replace all instances of
graphene_grid_width( '', 16 )with
graphene_grid_width( 20, 16 )Ah I see, that fix is SPECIFICALLY to make the slider content-width. But that was only an example of what I would want to try. Another (non-CSS) example would be trying to place the slider above the navigation menu by moving
<?php do_action('graphene_top_content'); ?>before the menu code in header.php. But with your code, that doesn’t work anymore.Now I’m not saying that I WANT the code you provided to do that, I’m just saying that your code prevents me from doing that freely with other PHP or CSS. I don’t know what else is it preventing, for that matter.
So again, I don’t want to sound ungrateful or criticize your work, but I would prefer using the method I was using before, rather than your code as it is now, if only because it allows me to try more custom things with the slider.
🙂
… but I would prefer using the method I was using before, rather than your code as it is now, if only because it allows me to try more custom things with the slider.
🙂
May be so, but it has one important caveat: you will lose those changes when you update the theme. So you’re stuck between not updating the theme, or having to make the changes again when you update.
But since you seem to be quite comfortable with that, I’m gonna stop here.
Well, as I said, you obviously know what’s best for your theme. I guess I’ll have to ask again how to make these changes to the slider when the time comes. I’ve got no problem with that, really. 🙂
Thanks once again for your help.
Viewing 8 posts - 1 through 8 (of 8 total)
- You must be logged in to reply to this topic.
