Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • November 14, 2014 at 7:52 am #351155
    erhabi

    Hi!

    I have followed Yigit’s suggestion in post #201309 – and with that I am able to change my sidebar color as well as the sidebar widgets area, so that’s awesome.

    However, i still want to change the background color of the area where the sidebar sits completely.

    You can have a look at the page here: the blog

    It would be ideal if the sidebar color fills the entire area, horizontally and vertically – as defined by the border that separates the content.

    November 14, 2014 at 11:16 pm #351557
    Elliott

    Hey erhabi!

    I’m not sure if this is the best way but what I would do is set a background image to the main container. You can create a 900 x 1 sized image and set the right part of it to be your pale green color and the left side to be white and then use this CSS.

    .sidebar_right .main_color { background: url("URL to your image") repeat !important; }

    That way you wouldn’t have to murder the grid CSS to get what your wanting.

    Best regards,
    Elliott

    November 15, 2014 at 10:18 am #351765
    erhabi

    Hi Elliot,

    Thanks for the help. That did cross my mind as a last resort, however, I got a reply from Josue as well. Not sure why the reply isn’t displaying here. What worked for me is the code here:

    @media only screen and (min-width: 767px) {
.sidebar_right .container {
background: #ffffff;
background: -moz-linear-gradient(left, #ffffff 0%, #ffffff 67.5%, #e7f6f6 67.5%, #e7f6f6 67.5%, #ffffff 67.5%, #e7f6f6 67.5%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ffffff), color-stop(67.5%,#ffffff), color-stop(67.5%,#e7f6f6), color-stop(67.5%,#e7f6f6), color-stop(67.5%,#ffffff), color-stop(67.5%,#e7f6f6));
background: -webkit-linear-gradient(left, #ffffff 0%,#ffffff 67.5%,#e7f6f6 67.5%,#e7f6f6 67.5%,#ffffff 67.5%,#e7f6f6 67.5%);
background: -o-linear-gradient(left, #ffffff 0%,#ffffff 67.5%,#e7f6f6 67.5%,#e7f6f6 67.5%,#ffffff 67.5%,#e7f6f6 67.5%);
background: -ms-linear-gradient(left, #ffffff 0%,#ffffff 67.5%,#e7f6f6 67.5%,#e7f6f6 67.5%,#ffffff 67.5%,#e7f6f6 67.5%);
background: linear-gradient(to right, #ffffff 0%,#ffffff 67.5%,#e7f6f6 67.5%,#e7f6f6 67.5%,#ffffff 67.5%,#e7f6f6 67.5%);
}
}

    I still need to understand how the css to this works, though this is a cool solution without having to introduce a background to the container.

    November 15, 2014 at 10:19 am #351766
    erhabi

    Thanks for the help guys, appreciate it!!

    November 15, 2014 at 10:22 am #351767
    erhabi

    For anyone else interested, changing the percentage value 67.5% in the above code changes the width of the area the code fills with the color.

    November 15, 2014 at 10:36 am #351768
    Josue

    Hi!

    I removed my reply as Elliot replied at the same time, glad it worked for you though :)

    Regards,
    Josue

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.