Jump to content
Latest News: (loading..)
PupStar

Adding a left border to body content in responsive version

Recommended Posts

Hi Guys,

 

I am not sure if I am going about this the correct way or the easiest way possible.

 

I have added a left border to the body content but can not get the padding and or margin to work with out the entire content (inc border) moving together

 

Also the border only is as tall as the content page and I want it to fill the entire page length.

 

This is what I have done so far

 

template_top

      <div id="bodyContent" class="col-md-<?php echo $oscTemplate->getGridContentWidth(); ?> <?php echo ($oscTemplate->hasBlocks('boxes_column_left') ? 'col-md-push-' . $oscTemplate->getGridColumnWidth() : ''); ?>">

      <div class="left-border">

template_bottom

      </div> <!-- bodyContent //-->
</div>

user.css

.left-border {
border-left: 1px solid #dedede;
}

Mark


Bootstrap 3 ROCKS!

(or it will if I ever get my head around it lol)

(and I think I have now (w00t) )

Share this post


Link to post
Share on other sites

@@PupStar

 


template_bottom

      </div> <!-- bodyContent //-->
</div>

Mark

 

 

While comments don't really matter, shouldn't it be ....

  </div> <!-- left-border //-->
</div> <!-- bodyContent //-->

B)

 

Malcolm

Edited by ArtcoInc

If you are running the "official" osC 2.3.4 or 2.3.4.1 download, your installation is obsolete! Get the latest community-supported responsive "Frozen" release here

Share this post


Link to post
Share on other sites

@@PupStar

 

 

 

While comments don't really matter, shouldn't it be ....

  </div> <!-- left-border //-->
</div> <!-- bodyContent //-->

B)

 

Malcolm

 

@Artcolnc

 

ha ha yeah


Bootstrap 3 ROCKS!

(or it will if I ever get my head around it lol)

(and I think I have now (w00t) )

Share this post


Link to post
Share on other sites

To simplify things can you just not add css to the user.css file to add a border where you need it. No need to alter core code files then. Thats what that file is for.


REMEMBER BACKUP, BACKUP AND BACKUP

Before installing the official version of oscommerce first look at a responsive version here

It's very easy to over complicate what are simple things in life

Share this post


Link to post
Share on other sites

To simplify things can you just not add css to the user.css file to add a border where you need it. No need to alter core code files then. Thats what that file is for.

 

@@14steve14

 

I tried that steve but could not get it to work, maybe I was doing something wrong

 

ok forget that, tried it again and it worked lol

 

so how would I get it to overflow to the full length of the page

Edited by PupStar

Bootstrap 3 ROCKS!

(or it will if I ever get my head around it lol)

(and I think I have now (w00t) )

Share this post


Link to post
Share on other sites

can anyone shed any light on how to always make the left column fill the entire length of the page dynamically depending on the body content???

 

I have found partial solution

#columnLeft {border: 1px solid #dedede; margin-bottom: -9999px; padding-bottom: 9999px;}

but its not ideal as then the page just scrolls forever

 

Thanks

 

Mark

Edited by PupStar

Bootstrap 3 ROCKS!

(or it will if I ever get my head around it lol)

(and I think I have now (w00t) )

Share this post


Link to post
Share on other sites

thanks to Malcolm @Artcolnc for this

@[member=media] (min-width: 992px) {
  #bodyWrapper {
    overflow-y: hidden;
  }
}

#columnLeft {border: 1px solid #dedede; padding-bottom: 9999px; margin-bottom: -9999px;}


Bootstrap 3 ROCKS!

(or it will if I ever get my head around it lol)

(and I think I have now (w00t) )

Share this post


Link to post
Share on other sites

I should point out that I, too, am working on a site that has a left column that I wanted to extend all the way to the bottom of the screen. But, the left column is only used in the Medium and Large bootstrap modes. Hence, the above CSS has the @@media clause.

 

Malcolm


If you are running the "official" osC 2.3.4 or 2.3.4.1 download, your installation is obsolete! Get the latest community-supported responsive "Frozen" release here

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

×