Jump to content


Photo

Feature area: Canvas wide ...?


  • Please log in to reply
20 replies to this topic

#1 cornell2

cornell2

    Super Member

  • Members
  • PipPipPipPip
  • 119 posts

Posted 01 December 2011 - 10:39 PM

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

#2 kastelic

kastelic

    Advocate

  • Members

  • 3081 posts
  • Country: Country Flag

Posted 01 December 2011 - 11:24 PM

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:
 
	//really big backgorund behind feature that extends to edges
	add_action('pagelines_before_feature','big_bg');
	function big_bg(){
	?>
	<div id="big-bg"></div>
	<?php
	}

3. Paste this into Custom Code -> Custom CSS:
 
	#big-bg {
	height: 300px;
	background: red;
	position: absolute;
	width: 100%;
	left: 0;
	}


#3 cornell2

cornell2

    Super Member

  • Members
  • PipPipPipPip
  • 119 posts

Posted 02 December 2011 - 04:47 AM

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.

#4 Danny

Danny

    Is Awesome!

  • Moderators
  • 17977 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 02 December 2011 - 08:42 AM

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.

#5 cornell2

cornell2

    Super Member

  • Members
  • PipPipPipPip
  • 119 posts

Posted 02 December 2011 - 05:16 PM

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.
==================


BEFORE

Posted Image



AFTER

Posted Image

#6 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 02 December 2011 - 05:21 PM

Can you post a link to your site?

#7 cornell2

cornell2

    Super Member

  • Members
  • PipPipPipPip
  • 119 posts

Posted 02 December 2011 - 05:52 PM

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.

#8 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 02 December 2011 - 05:58 PM

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


#9 cornell2

cornell2

    Super Member

  • Members
  • PipPipPipPip
  • 119 posts

Posted 02 December 2011 - 06:08 PM

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.

#10 cornell2

cornell2

    Super Member

  • Members
  • PipPipPipPip
  • 119 posts

Posted 02 December 2011 - 08:26 PM

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.

#11 cornell2

cornell2

    Super Member

  • Members
  • PipPipPipPip
  • 119 posts

Posted 02 December 2011 - 09:29 PM

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

Posted Image


2.
I add the custom code:
 #feature {background-color: red; margin: 0 0 0 0px; padding:  0 0 0 400px;}
and it works as expected

Posted Image


3. then I try to move it over
 #feature {background-color: red; margin: 0 0 0 -400px; padding:  0 0 0 400px;}
and it sort of works, the extra red on the right might be due to my not being careful about the exact dimensions

Posted Image

4. then - I try to fill out the right side
 #feature {background-color: red; margin: 0 0 0 -400px; padding:  0 400 0 400px;}

But that did not work out as expected

Posted Image



5. So I try to change the right margin now
 #feature {background-color: red; margin: 0 -400 0 -400px; padding:  0 400 0 400px;
}

and it gets even worse

Posted Image






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?

#12 Jenny

Jenny

    Advocate

  • Unicorn Store Dev

  • 2924 posts
  • LocationWV
  • Country: Country Flag

Posted 03 December 2011 - 01:45 AM

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.

#13 cornell2

cornell2

    Super Member

  • Members
  • PipPipPipPip
  • 119 posts

Posted 03 December 2011 - 02:05 AM

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: http://cj-c.me/mEblLs I will leave the site off 'maintenance mode' for a few hours.

#14 Jenny

Jenny

    Advocate

  • Unicorn Store Dev

  • 2924 posts
  • LocationWV
  • Country: Country Flag

Posted 03 December 2011 - 02:11 AM

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 :(

#15 cornell2

cornell2

    Super Member

  • Members
  • PipPipPipPip
  • 119 posts

Posted 03 December 2011 - 02:17 AM

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.

#16 Jenny

Jenny

    Advocate

  • Unicorn Store Dev

  • 2924 posts
  • LocationWV
  • Country: Country Flag

Posted 03 December 2011 - 02:50 AM

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 only since my original response above. We do take the time to read and provide support. I'm sorry you feel otherwise.

#17 cornell2

cornell2

    Super Member

  • Members
  • PipPipPipPip
  • 119 posts

Posted 03 December 2011 - 03:41 AM

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.

#18 cornell2

cornell2

    Super Member

  • Members
  • PipPipPipPip
  • 119 posts

Posted 03 December 2011 - 03:49 PM

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.

#19 Jenny

Jenny

    Advocate

  • Unicorn Store Dev

  • 2924 posts
  • LocationWV
  • Country: Country Flag

Posted 05 December 2011 - 01:54 AM

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.

#20 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 05 December 2011 - 07:17 PM

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 strongly recommending 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.