Create left and right column for Marinelli theme

Posted by Piccolo on November 30, 2012 at 12:34pm

Hey,

I´m using Marinelli as a theme for the website. I managed to change the background color to white, but I would like to have a gray left and right column. I have screenshot for you pointing the inner border for the columns (screenshot). I´m not too familiar with css and I couldn´t find anyone doing this with Marinelli.

I know this is really simple task actually, but I don´t want to mess up the Marinelli layout. I´m hoping there´s someone friendly helping a beginner. :)

Here´s the layout.css of the Marinelli:

/*
*
*
*	site-specific layout statements
*
*/


/*	Structure
-------------------------------------------------------------- */

body,html{
	margin:0px;
	padding:0px;
}

#totalContainer{
	margin-top:10px;
	margin-bottom:10px;
}

.width_1#totalContainer{
	width:1038px;
}

.width_2#totalContainer{
	width:978px;
}

#topBar{
	margin:0px;
	padding:0px;
	float:left;
	width:100%;
}

#topBarContainer{
	margin:15px auto 15px auto;
}

.width_1#topBarContainer{
	width:1038px;
}

.width_2#topBarContainer{
	width:978px;
}

#topBarLink{ /* top toggle bar */
	text-align:center;
	margin:0px;
	padding:0px;
	height:10px;
	width:100%;
}

#topBarLink a{ /* top toggle bar */
	float:left;
	margin-left:48.5%; /* make it block level and try to center it without javascript..*/
	padding:15px 10px 5px 10px;
}

#topBarLink.withoutTopRegion a{ /* makes space in case we don't have any element in the top Region */
	margin-bottom:50x;
}

#top{ /* upper part of the template */
	float:left;
	width:100%;
	height: 80px;
	position:relative;
	margin-bottom:40px;
	margin-top:5x;
}

#topUtility{
	position:absolute;
	top:20px;
	right:0px;
}

#logo-container{ /* image logo container */
	float:left;
	height:80px;
	margin-right:10px;
	margin-top: 0px;
}

#title-slogan{ /* site title and slogan container */
	float:left;
	margin-top:20px;
}

#site-title,
#site-slogan{ 
	margin:0px;
	padding:0px;
}

#search{ /* theme search box */
	position: absolute;
	right:0px;
	top: 30px;
}

#search div{ /* search button inline */
	display: inline;
}

#pageBorder{ /* makes the border */
	float: left;
}

.ie7 #pageBorder{ /* for IE7 */
  float: none;
  overflow: hidden;
}

#contentWrapper{ /* wraps content */
	float: left;
	padding:15px 5px 15px 5px;
	position: relative;
	z-index: 1;	/* follows the z-index order of primary menu and advertise (to solve ie7 z-index BUG )*/
}

.breadcrumb{ /* breadcrumb */
	padding-bottom: 5px;
	border-bottom: 1px dashed #ccc;
	margin:0px 10px 15px 10px;
}

#footer{ /* site footer*/'
	margin-top: 25px;
	padding-bottom:60px;
	float: left;
	width: 100%;
	position:relative;
	color: black;
}

#navigation-footer{ /* site footer*/
	position:absolute;
	right:0px;
	top:0px;
}

#bottomUtility{
	position:absolute;
	top:0px;
	right:0px;
}

/* utility menu */

.utility ul.menu{
	margin:0px;
	padding:0px;
	list-style:none;
}

.utility ul.menu li{
	display:inline;
	margin:0px 0px 0px 4px;
	padding:0px;
}

.utility ul.menu li a{
	padding-right:8px;
}

.utility ul.menu li:after{
	content:"|";
}


/*	Look & Feel
-------------------------------------------------------------- */

body.marinelli{
	/*background: #17293d url(../img/backgrounds/body.gif);*/
	background-color: white;
}

#topBar,#topBarLink,#topBarLink a{ /* top toggle bar */
	background:#054b81;
}

#topBarLink a{
	font-size: 1.1em;
}

.outsidecontent{
	color: white;
}

#site-title,
#site-slogan{
	font-weight: bold;		
}

#site-title{
	font-size: 3em;
	line-height:0.8em;
}

#site-slogan {
	font-size: 2em;
	text-indent: 0.5em;
}

#pageBorder{ /* border of the whole site */ 
	border:5px solid #054b81;
}

#pageBorder.noborder{ /* when we don't have the advertise region */ 
	border-top:0px;
}

#contentWrapper{
	background: white;
}

.breadcrumb { /* breadcrumb */
	font-weight: bold;
}

.utility{ /* utility menu */
	font-size:0.9em;
	text-transform:uppercase;
}

Comments

Hey Piccolo,I dont know if

Posted by BlackyWhoElse on November 30, 2012 at 2:08pm

Hey Piccolo,
I dont know if you mean the body background.
(left and right of this red lines?)
then try

body,html{
margin:0px;
padding:0px;
background-color:gray;
}

if your whole content gets gray add this too:

#totalContainer{
margin-top:10px;
margin-bottom:10px;
background-color:#fff;
}

Until the server crashes you're doing it quite right

I think you missunderstood

Posted by Piccolo on November 30, 2012 at 2:15pm

I think you missunderstood me. I took a new screenshot of what I want to archieve:

http://dl.dropbox.com/u/75717543/thisiswhatimean.jpg

If you can help me with this, I would really appreciate it ! :)

Kind regards,
Niko Huhtaniemi

please post me the page.tpl.

Posted by BlackyWhoElse on November 30, 2012 at 2:23pm

please post me the page.tpl.

Until the server crashes you're doing it quite right

Here is the page.tpl.php

Posted by Piccolo on November 30, 2012 at 2:28pm

<?php // page template ?>

<?php if($page['topbar']): ?>
  <!--start top bar-->
  <div id="topBar" class="outsidecontent">
    <div id="topBarContainer" class="<?php print $layout_width; ?>">
    <?php print render($page['topbar']); ?>
    </div>
  </div>

  <div id="topBarLink" class="outsidecontent<?php !$topRegion ? print " withoutTopRegion": print ""; ?>">
    <?php print $topbarlink; ?>
  </div>
  <!--end top bar-->
<?php endif; ?>

<!--start framework container-->
<div class="container_12 <?php print $layout_width; ?>" id="totalContainer">
  <?php if($topRegion): ?>
    <!--start top section-->
    <div id="top" class="outsidecontent">

      <?php if($page['utility_top']): ?>
        <!--start top utility box-->
        <div class="utility" id="topUtility">
          <?php print render($page['utility_top']); ?>
        </div>
        <!--end top utility box-->
      <?php endif; ?>
        
      <!--start branding-->
      <div id="branding">

        <?php if($logo): ?>
          <div id="logo-container">
            <?php print $imagelogo; ?>
          </div>
        <?php endif; ?>

        <?php if($site_name || $siteslogan ): ?>
          <!--start title and slogan-->
          <div id="title-slogan">
            <?php if($site_name): ?>
              <?php print $sitename; ?>
            <?php endif; ?>

            <?php if($site_slogan): ?>
              <?php print $siteslogan; ?>
            <?php endif; ?>
          </div>
          <!--end title and slogan-->
        <?php endif; ?>

      </div>
      <!--end branding-->

      <?php if($page['search']): ?>
        <!--start search-->
        <div id="search">
          <?php print render($page['search']); ?>
        </div>
        <!--end search-->
      <?php endif; ?>

    </div>
    <!--end top section-->
  <?php endif; ?>

  <?php if($mainmenu): ?>
    <!--start main menu-->
    <div id="navigation-primary" class="sitemenu">
      <?php print $mainmenu; ?>
    </div>
    <!--end main menu-->
  <?php endif; ?>

  <!--border start-->
  <div id="pageBorder" <?php print $noborder; ?>>
    <?php if ((!$usebanner && $page['advertise']) || ($usebanner && $banner_image)): ?>
      <!--start advertise section-->
      <div id="header-images" <?php print ($usebanner == 0) ? 'class="unlimited"' : ""; ?>>
        <?php if (!$usebanner): // Use drupal region ?>
          <?php print render($page['advertise']); ?>
        <?php elseif ($banner_image): // Use marinelli banners ?>
          <?php print $banner_text; ?>
          <?php print $banner_nav; ?>
          <?php print $banner_image; ?>
        <?php endif; ?>
      </div>
      <!--end advertise-->
    <?php endif; ?>

<?php if ($secondary_menu): ?>
      <!--start secondary navigation-->
      <div id="navigation-secondary" class="sitemenu">
        <?php print theme('links', array('links' => $secondary_menu, 'attributes' => array('id' => 'secondary-menu', 'class' => array('links', 'clearfix', 'secondary-menu')))); ?>
      </div>
      <!--end secondary-navigation-->
    <?php endif; ?>

    <!-- start contentWrapper-->
    <div id="contentWrapper">
      <!--start breadcrumb -->
      <?php if($breadcrumb): ?>
        <div id="breadcrumb"><?php print $breadcrumb; ?></div>
      <?php endif; ?>
      <!-- end breadcrumb -->

<?php if($page['overcontent']): ?>
        <!--start overcontent-->
        <div class="grid_12 outofContent" id="overContent">
          <?php print render($page['overcontent']); ?>
        </div>
        <!--end overContent-->
      <?php endif; ?>

      <!--start innercontent-->
			<div id="innerContent">

        <!--start main content-->
				<div class="<?php print marinelli_c_c($page['sidebar_first'], $page['sidebar_second'], $layoutType,$exception); ?>" id="siteContent">
<?php if($page['overnode']): ?>
            <!--start overnode-->
            <div class="outofnode" id="overNode">
              <?php print render($page['overnode']); ?>
            </div>
            <!--end over node-->
<?php endif; ?>
	   				
	   			<?php if ($page['highlight']): ?>
	   				<div id="highlight">
	   					<?php print render($page['highlight']); ?>
	   				</div>
          <?php endif; ?>
		           	
		      <?php print render($title_prefix); ?>

          <?php if ($title): ?>
            <h1 id="page-title"><?php print $title; ?></h1>
          <?php endif; ?>

          <?php print render($title_suffix); ?>
          <?php print $messages; ?>

          <?php if ($tabs): ?>
            <div class="tab-container">
              <?php print render($tabs); ?>
            </div>
          <?php endif; ?>

          <?php print render($page['help']); ?>

          <?php if ($action_links): ?>
            <ul class="action-links"><?php print render($action_links); ?></ul>
          <?php endif; ?>

          <!--start drupal content-->
          <div id="content">
            <?php print render($page['content']); ?>
          </div>
          <!--end drupal content-->
                 <?php if($page['undernode']): ?>
            <!--start undernode-->
            <div class="outofnode" id="underNode">
              <?php print render($page['undernode']); ?>
            </div>
            <!--end under node-->
          <?php endif; ?>

        </div>
        <!--end main content-->

          <?php if($page['sidebar_first'] && $page['sidebar_second'] && theme_get_setting('layout_type') != 2): ?>
          <div class="<?php print marinelli_w_c($layoutType); ?>" id="sidebarWrapper">
            <!--start oversidebars-->
	        	<?php if($page['oversidebars']): ?>
		    			<div class="outofsidebars grid_6 alpha omega" id="overSidebars">
                <?php print render($page['oversidebars']); ?>
              </div>
            <?php endif; ?>
            <!--end over sidebars-->
        <?php endif; ?>
		    		
		    <?php if($page['sidebar_first']): ?>
          <!--start first sidebar-->
          <div class="<?php print marinelli_s_c($page['sidebar_first'],$page['sidebar_second'],$layoutType,1); ?> sidebar" id="sidebar-first">
<?php print render($page['sidebar_first']); ?>	
          </div>
          <!--end first sidebar-->
        <?php endif; ?>
		    
        <?php if($page['sidebar_second']): ?>
          <!--start second sidebar-->
          <div class="<?php print marinelli_s_c($page['sidebar_first'],$page['sidebar_second'],$layoutType,2); ?> sidebar" id="sidebar-second"><!--start second sidebar-->
            <?php print render($page['sidebar_second']); ?>
          </div>
          <!--end second sidebar-->
        <?php endif; ?>


<?php if($page['sidebar_first'] && $page['sidebar_second'] && theme_get_setting('layout_type') != 2): ?>
          <?php if($page['undersidebars']): ?>
            <!--start undersidebars-->
            <div class="outofsidebars grid_6 alpha omega" id="underSidebars">
              <?php print render($page['undersidebars']); ?>
            </div>
            <!--end under sidebars-->
          <?php endif; ?>
          </div>
          <!--end sidebarWrapper-->
        <?php endif; ?>

      
      </div>
      <!--end innerContent-->


      <?php if($page['undercontent']): ?>
        <!--start underContent-->
				<div class="grid_12 outofContent" id="underContent">
          <?php print render($page['undercontent']); ?>
        </div>
        <!--end underContent-->
      <?php endif; ?>
    </div>
    <!--end contentWrapper-->

	</div>
  <!--close page border Wrapper-->

  <?php if($page['footer'] || $page['utility_bottom']): ?>
    <!--start footer-->
    <div id="footer" class="outsidecontent" style="text-align: center;">
      <?php print render($page['footer']); ?>

      <?php if($page['utility_bottom']): ?>
        <!--start bottom utility box-->
        <div class="utility" id="bottomUtility">
          <?php print render($page['utility_bottom']); ?>
        </div>
        <!--end bottom utility box-->
      <?php endif; ?>
    </div>
    <!--end footer-->
  <?php endif; ?>
 </div>
<!--end framework container-->

Kind regards,
Niko Huhtaniemi

Have you tryed my code? it

Posted by BlackyWhoElse on November 30, 2012 at 2:35pm

Have you tryed my code?
it should do what you want.
totalContainer = Wrapper (contains everything)
body = (area you have colored)

Until the server crashes you're doing it quite right

Yes I tried it and all the

Posted by Piccolo on November 30, 2012 at 2:45pm

Yes I tried it and all the background changed to gray. Is it possible that there are something in the css3 files of the Marinelli theme that affects this?

Here is css3_graphics.css

/*
*
*
* Marinelli Css3 graphics
* 
*
*/


/*	Layout
-------------------------------------------------------------- */

.cssgradients #contentWrapper{
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, ##999999),color-stop(0.05, #fff));
	background: -moz-linear-gradient(top center,##999999,#fff 50%);
}

.boxshadow #site-title,
.boxshadow #site-slogan{
	text-shadow: rgba(10, 10, 10, 0.4) 2px 3px 3px;
}

.boxshadow #pageBorder{
	box-shadow:5px 5px 20px #051b32;
	-webkit-box-shadow:5px 5px 20px #051b32;
	-moz-box-shadow: -5px 5px 30px #062544;
}

/*	Primary Links
-------------------------------------------------------------- */

.boxshadow #navigation-primary > ul > li > h2 > a,
.boxshadow #navigation-primary > ul > li > a{
	text-shadow: rgba(10, 10, 10, 0.4) 2px 3px 3px;
}

.cssgradients #navigation-primary h2 > a,
.cssgradients #navigation-primary > ul > li > a{
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #7ab0d4),color-stop(0.4, #156aa3));
	background: -moz-linear-gradient(top center,#7ab0d4,#156aa3 40%);
}

.cssgradients #navigation-primary > ul > li > a.active,
.cssgradients #navigation-primary > ul > li > h2 > a.active{
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #5f9ac7),color-stop(0.4, #054b81));
	background: -moz-linear-gradient(top center,#5f9ac7,#054b81 40%);
}

.cssgradients #navigation-primary > ul > li > a:hover,
.cssgradients #navigation-primary > ul > li > h2 > a:hover,	
.cssgradients #navigation-primary > ul > li:hover > a,
.cssgradients #navigation-primary > ul > li:hover > h2 > a{
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #5f9ac7),color-stop(0.4, #054b81));
	background: -moz-linear-gradient(top center,#5f9ac7,#054b81 40%);
}

.cssgradients div.mega{
	background: -webkit-gradient(linear, left bottom, left top, color-stop(0.0, #eee),color-stop(0.3, #fff));
	background: -moz-linear-gradient(bottom center,#eee,#fff 30%);
}

/*	Nodes
-------------------------------------------------------------- */

.cssgradients .teaser-created-day{
	background: -webkit-gradient(linear, left bottom, left top, color-stop(0.0, #eee),color-stop(0.3, #fff));
	background: -moz-linear-gradient(bottom center,#eee,#fff 30%);
}

/*	blocks
-------------------------------------------------------------- */

.cssgradients #block-user-login .block-title{
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #5f9ac7),color-stop(0.4, #054b81));
	background: -moz-linear-gradient(top center,#5f9ac7,#054b81 40%);
}

/*	Advertise
-------------------------------------------------------------- */

.rgba #header-image-text{
	background: rgba(0, 0, 0, 0.8);
}

.boxshadow #header-image-title{
	text-shadow: rgba(10, 10, 10, 0.8) 2px 3px 3px;
}


/*	Typography and other drupal items
-------------------------------------------------------------- */

.cssgradients ul.primary li a{
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #d7d7d7),color-stop(0.5, #eee));
	background: -moz-linear-gradient(top center,#d7d7d7,#eee 50%);
}

.cssgradients ul.primary li a:hover{
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #f4d7ba),color-stop(0.4, #f97e05));
	background: -moz-linear-gradient(top center,#f4d7ba,#f97e05 40%);
}

.cssgradients ul.primary li.active a:hover{
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #eee),color-stop(0.4, #fff));
	background: -moz-linear-gradient(top center,#eee,#fff 40%);
}

.cssgradients .form-submit{
	background: -webkit-gradient(linear, left bottom, left top, color-stop(0.0, #f2f2f2),color-stop(0.6, #e6e6e6));
	background: -moz-linear-gradient(bottom center,#f2f2f2,#e6e6e6 60%);
}

.cssgradients #block-user-login .form-submit{
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #5f9ac7),color-stop(0.4, #054b81));
	background: -moz-linear-gradient(top center,#5f9ac7,#054b81 40%);
}

.cssgradients .form-submit:focus,
.cssgradients #block-user-login .form-submit:focus{
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #f4d7ba),color-stop(0.4, #f97e05));
	background: -moz-linear-gradient(top center,#f4d7ba,#f97e05 40%);
}

.cssgradients .taxonomy-term-description{
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #eee),color-stop(0.8, #fff));
	background: -moz-linear-gradient(top center,#eee,#fff 80%);
}

.cssgradients #content .item-list ul.pager li.pager-current,
.cssgradients #content .item-list ul.pager li.pager-item a:hover{
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #7ab0d4),color-stop(0.4, #156aa3));
	background: -moz-linear-gradient(top center,#7ab0d4,#156aa3 40%);
}

Kind regards,
Niko Huhtaniemi

alright I think i understand

Posted by BlackyWhoElse on November 30, 2012 at 2:56pm

alright I think i understand you know
try this and remove my code from body

#totalContainer{
margin-top:10px;
margin-bottom:10px;
border-left: 5px solid gray;
border-right: 5px solid gray;
}

Until the server crashes you're doing it quite right

I tried this one, but didn´t

Posted by Piccolo on November 30, 2012 at 3:10pm

I tried this one, but didn´t get any borders, the background is completely white. The code is now like this:

body,html{
	margin:0px;
	padding:0px;
	background:white;
}

#totalContainer{
	margin-top:10px;
	margin-bottom:10px;
	border-left:10px solid gray;
	border-right:10px solid gray;
}

Hmm, what´s the problem? :/

Kind regards,
Niko Huhtaniemi

bump!

Posted by Piccolo on December 2, 2012 at 7:57pm

bump!

Kind regards,
Niko Huhtaniemi

Got it working after adding

Posted by Piccolo on December 3, 2012 at 12:37pm

Got it working after adding this code:

body,html{
	margin:0px;
	padding:0px;
	background: white;
	min-height:100%;
	border-left: 100px solid #E6E6E6;
	border-right: 100px solid #E6E6E6;
}

Kind regards,
Niko Huhtaniemi