Jump to content
Sign in to follow this  
ratputin

Feature Slider Sammich

Recommended Posts

ratputin

All, I have searched the forum and applied the CSS as described with mixed results. I am attempting to resize the Featured Slider and position it between the sidebars of a 3 column format. I can't seem to accomplish the goal without adding "position:absolute" to #feature_slider, but of course, the content then is hidden behind the slider. I have attached images for reference. Specs: WordPress 3.2.2 Pagelines Platform Pro v1.5.3 Pagelines Platform Base v1.4.1 (as the child) CSS Used for the Feature Slider: /* Custom Feature Slider*/ #feature {margin: 0px; } #feature_slider div.default-features {width: 640px;} #feature-area {width: 620px} #feature-footer {width: 620px;} #feature_slider {width:620px; margin-left:160px !important; position:absolute;} #sidebar-wrap{margin-top:0;} #feature-area, .feature-wrap {width: 620px;} Screenies: WITHOUT ABSOLUTE POSITION busted.pngWITH ABSOLUTE POSITION absolute.png Any help is appreciated. KO

Share this post


Link to post
Share on other sites
Rob
I suspect that may be a z-index issue. Unable to see it live, I can't test the CSS to identify a solution for you. Just an FYI.... we resolved all these issues in PageLines Framework and you'd now be able to include the slider in between two sidebars without problems. Have you considered upgrading? When will the site go live? Could you replicate this in a demo site we could test?

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
ratputin
You beat me to it :) I have disabled the forced login. The site is now accessible.

Share this post


Link to post
Share on other sites
ratputin
BTW - I have the framework, the Pro version and the base. I used the Pro version because it looked to have more features. From your comment, I believe I was mistaken :). Is there a way to do this with what is installed? I'd hate to start from scratch. Wouldn't the z-index only effect the visual layering? I've never used it to specifically interact with a position setting. I can successfully move the content area down by adding a top margin to .two-sidebar-center #column-main .mcolumn-pad, however I would need to add another template to the mix.

Share this post


Link to post
Share on other sites
Rob
Probably you can. Worth a try. Do you have Firebug? You might want to test it with that. Meanwhile, I'll give a look!

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Rob
That did it! [code].two-sidebar-center #column-main .mcolumn-pad { margin-top: 390px; padding-left: 20px; padding-right: 20px; }[/code]

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
ratputin
It does! However, how do I specify it ONLY occurring with the "Features" Template OR only when the Feature Slider is in use? I can set it statically with the CSS, but can't figure out how to make it interact more dynamically. BTW - I an using Chrome Dev Tools for on the fly trouble shooting, essentially the same as FB (which I used to use), I just seem to like the Chrome browser better :)

Share this post


Link to post
Share on other sites
catrina
If your feature slider is only in use on the home page, you can add a CSS selector at the beginning of the code to specify that you only want the CSS to work on that template. This is an example of the entire code: [code]body.home .two-sidebar-center #column-main .mcolumn-pad { margin-top: 390px; padding-left: 20px; padding-right: 20px; }[/code] body.home = Selects the home page as the page where the CSS will work

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
ratputin
Hi Catrina! Thanks for responding. I am aware of the .home solution, the problem is, there will be several different Feature Sliders used throughout the site and I will not be the Content Editor. The solution I seek will actually allow for the templates to still be used as needed without having to style each page. That make sense? KO

Share this post


Link to post
Share on other sites
catrina
Are you going to be using a feature page template where the feature slider will be present?

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
ratputin
Definitely an option. I've already set it to hide by default.

Share this post


Link to post
Share on other sites
catrina
I think that'd be a good option if you want to avoid adding more CSS code.

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
ratputin
Hmmm, so: body.features .two-sidebar-center #column-main .mcolumn-pad { margin-top: 390px; padding-left: 20px; padding-right: 20px; } Should work for only the feature template...correct?

Share this post


Link to post
Share on other sites
Rob
No. The body.home is the page, so that you're applying that CSS only to the homepage, allowing the home page only to push content down 390px, allowing it to appear under the slider. If you do body.feature I doubt it would have any impact. You are best providing CSS for each page where the slider's going to appear. Mind, you can create one big string of pages, separated by commas.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
ratputin
I see. Adding CSS for each page is not an ideal option as I will not be involved with the site once it goes live. Is there a way to set the top margin for the Feature Template content only? Or better yet, does anyone know the PHP code that could call the "section.features" into template.content.php?

Share this post


Link to post
Share on other sites
catrina
There is a way to set the top margin for the Feature Template content only with CSS. Are you using a feature template for a page on your site now?

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
ratputin
I am. The Home Page is set to the Feature Template. But more will be added as needed...

Share this post


Link to post
Share on other sites
Danny
Hi Ratputin, I am unable to access your website, I am being redirected to the login screen.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
ratputin
I have added PageLines as a user. Here's the Creds; UN: PageLines PW: PageLines01!

Share this post


Link to post
Share on other sites
catrina
Hm, I thought the tag had a feature template selector but it does not. In the CSS you may need to use the page IDs to select which pages do not have the feature slider. For example, for the homepage you'd use this: [code]body.page-id-24 #feature {display: none;}[/code] ^ The page ID for the homepage is 24. You can find the page ID for a specific page by looking at the tag at the top of the page's source or in the page URL since you're using page IDs in the page links (i.e. the "Why Sheetz?" URL is http://sheetzjobz.com/?page_id=33 so the page ID is 33).

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
ratputin
Right idea, but it would be the other way around. I'd have to set the top margin of the content area for pages with the Slider, ex: body.page-id-24 .two-sidebar-center #column-main .mcolumn-pad { margin-top: 390px; padding-left: 20px; padding-right: 20px; } The issue remains that I will not be involved after the the launch and the editors will need to add pages with and without the Slider (the Slider is a big reason we chose this theme). I will not be able to add the CSS for every new page. If we can "merge the PHP" OR have template specific CSS, the issue would be relegated to just using a single template for the slider throughout.

Share this post


Link to post
Share on other sites
catrina
I don't know why this didn't come to me before, but you can use a regular page template for pages that do not have the slider. You just need to make sure that the regular page template being used doesn't have the feature slider as an active section in the template settings. Only the feature page template should have the feature slider activated.

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
ratputin
@catrina That's how I currently have it set up. The issue is that in order for the content area to be below the Slider, and the Slider to be between the Sidebars, the Slider has to have an absolute postion and the content area a top-margin. Regardless of the template, the top margin will apply to all the content areas in all the templates, so if there is no Slider used, then it will be a 390px tall blank area. Unless I am completely misunderstanding the structure of this theme...

Share this post


Link to post
Share on other sites
catrina
I understand what you're saying. If you were to hide feature slider on specific pages using the {display: none;} CSS attribute, the tall blank area wouldn't be there. The content below it will automatically take up that space.

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
ratputin
Interesting idea! But if I understand you correctly, the same issue arises as it still needs it to apply to specific templates, not on a per page basis.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×