• 0
Sign in to follow this  
Followers 0

Feature area: Canvas wide ...?

Question

Posted · Report post

I can't seem to come up with the correct set of parameters to 'simply' display a color background 'underneath' my features-slider that is just as high as the slider but extends to the edges of the screen. the effect would look like a long wide stripe underneath the slider. I was trying something like: #feature {background-color: red; margin: 0 -400 0 -400px;padding: 0 0 0 400px;} but this turned out to be almost-but-very quirky. (essentially I wanted to widen the feature-slider margins by 400 each side, then pad 400 each side with color ...) it just doesn't work. I am certain it has to do with overlooking some class ... or some other trick. Suggestions? Thanks

Share this post


Link to post
Share on other sites

20 answers to this question

  • 0

Posted · Report post

Here's a solution. You can use a hook to insert a new element directly before the Feature, and then CSS to make it into a full-screen width background. 1. Enable Platform Base theme. 2. Paste this in platformbase/functions.php: [code] //really big backgorund behind feature that extends to edges add_action('pagelines_before_feature','big_bg'); function big_bg(){ ?>
Custom CSS: [code] #big-bg { height: 300px; background: red; position: absolute; width: 100%; left: 0; } [/code]

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Oh - thanks - but isn't there a way to do it with CSS only ... surely something like this can be done without adding php. I'd rather not - in case one day there's another update and functions.php gets overrwritten.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Cornell, Can you provide a screenshot or concept image so we can see how you would like it to look please. Although Kastelic's suggestion would be best I think.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Before and After screen mockups .... I merely want to put a long black background color under the features slider (that I have in lieu of the branding header). Re-read above about my quest to find the right line of CSS to do this. ================== [b][u]BEFORE[/u][/b] [img]http://metapreneurship.net/wp-content/uploads/2011/12/Sample-Screen-Features-BEFORE.jpg[/img] [b][u]AFTER[/u][/b] [img]http://metapreneurship.net/wp-content/uploads/2011/12/Sample-Screen-Features-AFTER.jpg[/img]

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Can you post a link to your site?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

It's not public yet, and I cannot post the URL on a (searchable) public forum yet. And ummmm... I feel a little like I am talking to the Wizard of Oz behind the curtain who just asked me to go get the witches broomstick, and now that I went through the trouble to do so, now being asked to go get the witches hat, too. I was just asked to provide screenshot mockups of what I am trying to do ... I took the time to do so. Perhaps you can give the problem a few more seconds of thought before asking me to do more work (if you knew the hours I've put in just for this one - seemingly straight forward - issue, you might sympathize with my reluctance to put in more time. ) I'll just re-do the header within what pagelines can do and live with it. Thanks for the try, though.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

You can start by removing the border using this code added to Custom Code > Custom CSS: [code]body {border-top: none;}[/code]

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks (I was just trying to set it to 0 px) ... but this is of course only 1% of the problem - which is getting the long black bar under the features. Ironically, my earlier version of the site I had the long black bar working with the branding image - by tricking out the body padding and background color. Sadly this does not work if I disable the branding and move the features to the top.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

btw - body {border-top: none;} has no effect. The black top border still appears as is shown in the first screenshot. But again, this is the smallest part of my problem right now. Getting a colored area under the feature-section is my biggest headache right now.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Here it is, step by step: (note that the screenshots appear to be a little off-scale, so don't let that throw you) 1. Platform Pro Web page - Branding disabled (not in template). Feature-section, in template, placed top [img]http://metapreneurship.net/wp-content/uploads/2011/12/Sample-Screen-Features-104.jpg[/img] 2. I add the custom code: [code]#feature {background-color: red; margin: 0 0 0 0px; padding: 0 0 0 400px;}[/code] and it works as expected [img]http://metapreneurship.net/wp-content/uploads/2011/12/Sample-Screen-Features-101.jpg[/img] 3. then I try to move it over [code]#feature {background-color: red; margin: 0 0 0 -400px; padding: 0 0 0 400px;}[/code] and it sort of works, the extra red on the right might be due to my not being careful about the exact dimensions [img]http://metapreneurship.net/wp-content/uploads/2011/12/Sample-Screen-Features-102.jpg[/img] 4. then - I try to fill out the right side [code]#feature {background-color: red; margin: 0 0 0 -400px; padding: 0 400 0 400px;}[/code] But that did not work out as expected [img]http://metapreneurship.net/wp-content/uploads/2011/12/Sample-Screen-Features-103.jpg[/img] 5. So I try to change the right margin now [code]#feature {background-color: red; margin: 0 -400 0 -400px; padding: 0 400 0 400px;[/code]} and it gets even worse [img]http://metapreneurship.net/wp-content/uploads/2011/12/Sample-Screen-Features-104.jpg[/img] again, I am trying to get that red background to span the entire width of the page. Either there is something wrong, or I am doing something wrong. Insights?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I understand the site isn't live but we are limited on support if we can't access your site. I would try going up a parent or two of the feature. It's not the feature background you want to change, it's a parent of the feature since it includes the padding. You won't need all the margins and padding, just the color, so I'd remove that.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I can post a shortcode I guess. But the issue is that I am trying to debug this feature (15 hours now) - so at any given time you might call up the site and I might be tweaking (throwing darts at this point). but here: [url="http://cj-c.me/mEblLs"]http://cj-c.me/mEblLs[/url] I will leave the site off 'maintenance mode' for a few hours.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Are you going to leave the feature there or not? In other words, would making the whole header section red work? Also, you can accomplish this much easier by changing your theme layout. I advise switching through the three choices (fixed, canvas, etc) and seeing which one gives you a top color (will also give bottom color). I can't remember which layout it is tho.. sorry :(

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Oh please - you (Pagelines support) reaalllllllly have got to be more helpful than this! I am sitting here, exhausted, trying to get this theme to do something that is not that unreasonable to ask or expect. I was asked to post screenshots. I mindfully mocked up 4-5 ... I posted code and I linked to my site - only to have suggested that I spin the roulette wheel or keep throwing darts at the dartboard. I can understand if this were a user-user support board, but I would expect Pagelines support staff to be a little more definitive. I don't mean to be rude or snarky here - but I do believe that my expectations (and reaction) are not at all out of line.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I apologize that you didn't find my response helpful. The layout you want to use is Full-Width Design Framework. The other layouts simply don't have enough div elements to do what you're wanting. I tried using the other layouts by changing the whole page background and trying to overlay colors, but it just won't work. And I didn't just write a standard response to you. I spent a good amount of time on your site playing around with custom CSS both before AND after I posted, in fact I have worked on your post, and your post [b]only[/b] since my original response above. We do take the time to read and provide support. I'm sorry you feel otherwise.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Sorry - I am trying to muster up the sympathy of the 20 mins you spent versus the 20 hours I've spent. At this point I am a little devoid of the energy to be overly cordial. It's not your fault - it's the platform's ... I mean, if it takes this much incredible effort - not only by user but by experience support staff - to get this platform to do something thus simple, then it is a disaster waiting to happen. Is it any wonder people are thinking twice about paying for 2.0 ? Sorry - you're on the front lines so there's no one else to bear the brunt of this. And to the founders: Don't think for a minute my frustration is an outlier to be ignored. Most others just give up and move on to another platform without persisting on these boards.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I finally got the magic combination (throw enough darts; enough infinite monkeys typing infinite and it was inevitable): #feature {background-color: black; margin: 1 -400 10 -400px; padding: 0 -400 10 400px; height: 200px;} Plus - the full width design framework ... Thank you for suggesting this. Though I am still absolutely livid at the platform design for making this so incredibly obscure, cryptic - and undocumented - and forcing us to rely on a handful of forum-support crew for what should be quick fixes. Thanks again for your help.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

The solution you have will work but I did not suggest something like that because, without looking at your site (since it's not live), if someone makes the window larger than the area you have provided in the margin/padding, then you'll see more than the red area. That is exactly the reason I did not suggest that solution. Glad the full width works for you.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Cornell, Let me be blunt. Without the ability to see a site live, it is impossible for my colleagues and I to provide you with full support. So complaining about the level of support you get is not helpful. Referring to us as "monkeys" will ultimately get you totally ignored. Let me also state, for your clear understanding, that forum support is NOT, by definition, a means for you to obtain extreme customization support. For that, we provide Pros, and it's your task to hire one when you want something done OUTSIDE the scope of normal solutions to actual problems. We are not custom web designers in the support forum and have obligations to many people who require real help with their sites that is not the level of customization you're seeking. I'm [b][u]strongly recommending[/u][/b] to you that from this point forward you think carefully about the questions you're posting and if it's customization related, please start with a request for a Pro at http://www.pagelines.com/pros. I'm sorry if this is not the solution but you're quite mistaken by suggesting we can do better because you're presuming this is a customization forum which it is not. It is here to help people to solve problems. Customization is not a problem. Rather, it is a design matter and that is the function and responsibility of the website owner or designer. If help is needed with that, we happily provide professionals you can hire. We even help with small issues like changing a color or an alignment. We do not help customize sites here. If you cannot afford a professional, then perhaps you may simply need to scale back your customization demands to more reasonable levels.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

By the way, platformbase/functions.php does not get overwritten, its there precisely for customizing your site. That's what a child theme is for. My solution offered is so simple, works perfectly, and would take you less than 5 minutes, I can't believe you spent 20 hours on this without trying it. It also eliminates the problem you may have of the horizontal scroll-bar in your browser thinking the page is wider than it is.

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  
Followers 0