Responsive Bg to Sidebar

I have been trying to work out the best approach to trying to reproduce a feature of a site I am redesigning

The old site is sharingstories.org a non-profit organisation,
The site is not responsive and so a background image achieves the effect of breaking the content area into a white main body and coloured sidebar bg.
Examples
http://sharingstories.org/members/waylon
http://sharingstories.org/members/amit/
The choice of BG is user defind by an additional profile field

The issue for me is that by using the same technique then the sidebar image will move into the main content area (as the white and patterned areas are the same image over the whole content wrapper) with smaller screens. I need to be able to apply an image to the aside only and to the whole height of the page. How would this best be constructed. This is to buddypress pages!!

My new design devsite is http://siteshackdevsites.info/ssrebuild


Many thanks
Danny

First most important thing to ask is - do you need responsive site at all? If not, you could turn rwd off and the problem would be fixed.
The second thing is a problem with 2 columns background. If one of the column alway will be longer then second, then creating described background combination might be possible (longer column is placed in a container that holds also shorter one and has background of the shoorter one, so the longer one covers it). If not, this scenario might be impossible to do with pure css.

Hi

Thanks.
Yes it ideally needs to be responsive. I understand what you are saying and will think if I can make sure that one column is always longer - might be impossible though because of the type of content combinations. Needs some thought.
Will get back to you

Danny

What other alternatives do we have? Create a specific template? But will the sidebar collapse under the main content with its background?

Thanks

With background driven columns there is no way to make it responsive.
The only idea that comes to my mind right now is to use jQuery onload state and just get longer column height and set css height of the second column to same height. Then you can setup background under only one of those columns and it will be responsive.

Hi Cyberek

This has reared its head again now but just got a bit more complicated. The client requires that the sidebar image is a user choice. This I have achieved and made work inside of a php widget with

<?php
// Find members Theme
$img = xprofile_get_field_data( "Theme", bp_displayed_user_id() );
if ($img == "") {
$img = "Stars";
}
?>
<div id="sidepanel" class="wrapper<?php echo " bg-".strtolower($img);?>">

and the following css

/*--------------------------------------------------------------
** - USER THEMES Panel
--------------------------------------------------------------*/

div#sidepanel {
background: #fff;
padding: 19px; margin-top: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
background: #fff;
height: 100%;
}

body.bp-user div#sidepanel,
body.page div#sidepanel,
body.groups div#sidepanel {background: #fff url(../images/profile_bg.png) repeat-y !important;}

body.parent-pageid-9 div#sidepanel,
body.page-id-9 div#sidepanel,
body.directory div#sidepanel,
body.single-post div#sidepanel {background: #fff url(../images/backgrounds/bg_profiletheme_bluestars.gif) right top repeat-y !important;}

body.directory.members div#sidepanel {background: #fff !important}

/*--------------------------------------------------------------
** - USER THEMES Panel Images
--------------------------------------------------------------*/


body.bp-user div#sidepanel.bg-hear {background: #fff url(../images/backgrounds/bg_hear.gif) right top repeat-y !important; }

body.bp-user div#sidepanel.bg-hands {background: #fff url(../images/backgrounds/bg_bluehands.gif) right top repeat-y !important;}

body.bp-user div#sidepanel.bg-photo {background: #fff url(../images/backgrounds/bg_greenphoto.gif) right top repeat-y !important;}

body.bp-user div#sidepanel.bg-ocean {background: #fff url(../images/backgrounds/bg_ocean.gif) right top repeat-y !important; }

body.bp-user div#sidepanel.bg-leaves {background: #fff url(../images/backgrounds/bg_leaves.gif) right top repeat-y !important;}

body.bp-user div#sidepanel.bg-animals {background: #fff url(../images/backgrounds/bg_animals.gif) right top repeat-y !important;}

body.bp-user div#sidepanel.bg-eyes {background: #fff url(../images/backgrounds/bg_eyes.gif)} right top repeat-y !important;}

body.bp-user div#sidepanel.bg-flys {background: #fff url(../images/backgrounds/bg_flys.gif) right top repeat-y !important;}

body.bp-user div#sidepanel.bg-movies {background: #fff url(../images/backgrounds/bg_movies.gif) right top repeat-y !important;}

body.bp-user div#sidepanel.bg-stars {background: #fff url(../images/backgrounds/bg_profiletheme_bluestars.gif) right top repeat-y !important;}


body.bp-user div#sidepanel.bg-mouth {background: #fff url(../images/backgrounds/bg_mouth.gif) right top repeat-y !important;}

/*body.bp-user div#sidepanel.bg-heart {background: #fff url(../images/backgrounds/bg_purplestars.gif) right top repeat-y !important;}*/


This creates the background inside the widget but obviously only to the widget height. I tried to get the code inside theme sidebar.php but I couldn't get it to work with my limited skills .

My aim was to make it work inside the widget and hopefully make that match the height of gk-mainbody. I would then withwidget rules display in desktop only thus no responsive issues. But no joy.

So back to JQuery !! Can you example the required code for the aside bg and where to put it? If it is the sidebar background rather than the widget if I hide the widget in Tablet and Mobile with widget rules will the bg image still display responsively. Obviously if no widgets we would want no aside bg.

My efforts so far as described above
http://siteshackdevsites.info/ssrebuild ... s/aasmeer/

Any help would be great as this is a not for profit organisation and so budgets are very tight

Many thanks

Danny

1. The jQuery method was just a suggestion - this kind of customisation is beyond our support.
2. With the css background there is no method of getting image height or width, so this method will not work.
3. You should use custom module to put normal image into the sidebar, that is the only way it might work, yet I'm not quite sure it will give you the result you seek for.

Please create some screenshots and mockups how it should look and work throughout different screen sizes, perhaps I'll be able to point you into a better direction.

Hi

attached 2 images that show how the bg image in sidebar with css

div#sidepanel {
background: #fff;
padding: 19px; margin-top: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
background: #fff;
margin-bottom: -6000px; /* any large number will do */
padding-bottom: 6000px;
overflow: hidden;
}

As you can see I have experimented with overflow and have also tried z-index but I can get the image overflow hidden. Interestingly though the sidebar background is hidden behind gk-bottom or widget area.

Danny

http://siteshackdevsites.info/ssrebuild ... s/aasmeer/

screenshot 1.jpg

http://siteshackdevsites.info/ssrebuild/members/waylon/

screenshot2.jpg

You can try adding to /wp-content/themes/Msocial/js/gk.menu.js just after line (@11):

Code: Select all

    jQuery(document).ready(function () {


this code:

Code: Select all

jQuery('#gk-sidebar #sidepanel').outerHeight(jQuery('#gk-mainbody-columns').outerHeight());


Hi

Thank you so much. I think that does the job. Will test with all scenarios but I think that will do it

Thanks again

Danny

No problem Danny.
If You will have any other questions, feel free to post new forum threads.

Hi
That fix works great but sometimes it just doesn't happen and you need a refresh to sort it out. Any refinement of that code do you think would help

Thanks
Danny

You would need to check if there are any javascript errors in console - perhaps caused by any 3rd party plugin. If they happen, then above code might just not run.
There is nothing else that comes to my mind.