CSS: Working outside of .container

  • 1
  • Question
  • Updated 7 years ago
  • Answered
Hi all Yola CSS gurus.

I am trying to build a Complete Custom Site, using CSS and HTML, with the ability to now edit site level CSS. I am wondering how do we work out side of the Yola default containers, but using CSS to do this.

Because I need my header banner to be across the entire screen along with my footer banner, currently they end where the Yola default container ends.

Using the new CSS override feature is it possible to override the default container to be 100% the width of the screen: Would you need to override the following code and how? and is this the right code to override?

Change?

.container {
width: 90%;
margin: 10px auto;
max-width:1024px;
}

Really Appreciate any help!
Photo of Jeremy Paton

Jeremy Paton

  • 159 Posts
  • 16 Reply Likes
  • confused

Posted 7 years ago

  • 1
Photo of Jeremy Paton

Jeremy Paton

  • 159 Posts
  • 16 Reply Likes
Hey guys.
This is what I have achieved so far:
My Template Test

I just wish I could figure out how to expand my header & footer across the entire screen
Photo of Brianna

Brianna

  • 2045 Posts
  • 92 Reply Likes
Hi Jeremy,

I am sorry to hear how frustrated you are. I am referring your request to our HTML team who will reply as soon as they arrive back online. Thanks for your patience.
Photo of Shaun O'Connell

Shaun O'Connell

  • 5 Posts
  • 1 Reply Like
Hi Jeremy,

I've had some success creating the effect you wanted by using background-images to imitate the full width effect in the browser, though I haven't had an opportunity to test it across all the major browsers.

It still needs some work, especially around the footer area, I'd suggest resizing or uploading a new footer background that's tall enough to fit all the footer content you have.

Anyway, here's the necessary CSS...

html {background:url("resources/css/img/footer-bg.jpg") 0 100% repeat-x; min-height:100%} /* Creates the false bottom background */
body {background:url("resources/css/img/top-bg.gif") 0 0 repeat-x;} /* Creates the false top background */
body #sys_region_1 {position:relative; top:-5px;} /* Overrides the padding applied to this element */
body #content {padding:0} /* Gets rid of the thick padding */
body .sys_footer {border-top:none;} /* Removes the rogue grey border at the bottom of the doc */
body #footer {height:auto; min-height:270px} /* Use a min-height here so that it fits nicely within the footer background - this is really useful if the content is less than the height */
body #bottom {color:#eee;} /* Giving the text in the bottom nav a contrasty color */
body #bottom ul a {color:#eee} /* Giving the links in the bottom nav a contrasty color */
body #bottom ul, body #bottom p {line-height:1;} /* I removed the artificial height here to tweak the footer display */


If your header and footer content exceeds the height of the backgrounds, then upload new taller background images and use those instead.

Hope that helps you in the right direction :)

o/
Shaun
Photo of Jeremy Paton

Jeremy Paton

  • 159 Posts
  • 16 Reply Likes
@Shaun
Thanks so much, I am giving your code a try and will see how it goes.

What's really bugging me is what is dictating the Yola defualt container area?Is it HTML or is it CSS which forces content into that default container. I have tried overwriting all the CSS so only my custom css is accessed, but still the header & footer stop at the edges of the container.

@Yola
Is there absolutly no way to place the HTML where it won't get trapped in the defualt container. I was considering placing the header code in the heading box, this MAY solve the header placment issue but then not sure what to do with footer as we STILL don't have access to a "footer" content area like the heading. I am still waiting for your HTML team, hopefully they can help.
Photo of Jeremy Paton

Jeremy Paton

  • 159 Posts
  • 16 Reply Likes
ps: I don't really think the question has been answered, Shauns answer is a brilliant work arround but the really question is how to get out of the defualt container.
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
It's actually quite simple with JQuery. You can use this script to dynamically remove the id off the content container, thus rendering it useless

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#content").removeAttr("id");
});
</script>
Photo of Jeremy Paton

Jeremy Paton

  • 159 Posts
  • 16 Reply Likes
@kevin
Were should you place this code?
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Thanks Kevin for sharing this tip!
Photo of Jeremy Paton

Jeremy Paton

  • 159 Posts
  • 16 Reply Likes
Thanks all for the great help.
I think I have pretty much achieved what I was hoping for.
My Template Test
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Looks great!
Photo of Daniel Kivett-v

Daniel Kivett-v

  • 17 Posts
  • 1 Reply Like
Yes Jeremy that is the right code as far as inside your widgets ect... I've been trying to figure this out for some time now, and it seems i've only been able to accomplish this this with 1 template yola has made for us and thats the emerald templates. I run a chat site and I have found this to be the ONLY template that allows the widget to extend the whole width of the page.