By newuser55 on

if my "overview" page looks like this:
http://78.46.134.107/tmp-public/drupal-overview.png

i would like to be able to click on "link1" and see this page:
http://78.46.134.107/tmp-public/drupal-link1.png

so its the same picture or pictures in the upper left corner but with different content.
i know that you can create pictured liks, so that shouldnt be a problem.

but how to create the content so you can use all the links from all the pages?

Comments

nevets’s picture

nevets commented

General in Drupal the upper part would be in the header (or other upper) region and common to all pages. The lower part would be in the content region which is the default for pages in general.

newuser55’s picture

newuser55 commented

ok, so i need to modify the header.
i found this: http://drupal.stackexchange.com/questions/95031/add-google-plus-link-to-...
which explains how to get a link / picture inside the header.

now i need to extend the header so that it fills the screen from left to right - the final page does not need the default navigation.

according to this: https://www.drupal.org/node/703430
the width is specified in
/var/www/drupal7/themes/mytheme/css/layout.css (my filesystem, yours will be different)

mytheme is a copy from bartik.
in the link above they modified zen, but the css from bartik looks different...any ideas how to specify the header width there?

bartik layout.css:

/* ---------- Basic Layout Styles ----------- */
 
html,
body,
#page  {
  height: 100%;
}
#page-wrapper {
  min-height: 100%;
  min-width: 960px;
}
#header div.section,
#featured div.section,
#messages div.section,
#main,
#triptych,
#footer-columns,
#footer {
  width: 960px;
  margin-left: auto;
  margin-right: auto;
}
#header div.section {
  position: relative;
}
.region-header {
  float: right; /* LTR */
  margin: 0 5px 10px;
}
.with-secondary-menu .region-header {
  margin-top: 3em;
}
.without-secondary-menu .region-header {
  margin-top: 15px;
}
#secondary-menu {
  position: absolute;
  right: 0; /* LTR */
  top: 0;
  width: 480px;
}
#content,
#sidebar-first,
#sidebar-second,
.region-triptych-first,
.region-triptych-middle,
.region-triptych-last,
.region-footer-firstcolumn,
.region-footer-secondcolumn,
.region-footer-thirdcolumn,
.region-footer-fourthcolumn {
  display: inline;
  float: left; /* LTR */
  position: relative;
}
.one-sidebar #content {
  width: 720px;
}
.two-sidebars #content {
  width: 480px;
}
.no-sidebars #content {
  width: 960px;
  float: none;
}
#sidebar-first,
#sidebar-second {
  width: 240px;
}
#main-wrapper {
  min-height: 300px;
}
#content .section,
.sidebar .section {
  padding: 0 15px;
}
#breadcrumb {
  margin: 0 15px;
}
.region-triptych-first,
.region-triptych-middle,
.region-triptych-last {
  margin: 20px 20px 30px;
  width: 280px;
}
#footer-wrapper {
  padding: 35px 5px 30px;
}
.region-footer-firstcolumn,
.region-footer-secondcolumn,
.region-footer-thirdcolumn,
.region-footer-fourthcolumn {
  padding: 0 10px;
  width: 220px;
}
#footer {
  width: 940px;
  min-width: 920px;
}