Hello,

I have themed before for Drupal 6, but always from scratch. I generally started by coding out my HTML and CSS, and then I would run through and add the PHP calls, and then test it and modify it until I liked it.

Okay, so now I decided (mainly due to the scale of this project and the importance of accessibility standards and the praise your system has received for prioritizing that area) to subtheme in genesis. I briefly attempted AdaptiveTheme back a year or two ago but I recall running into the same problem, which I am sure is a mental block and it is probably very simple.

I just don't get where I'm to make the changes. Do I even screw with your HTML/PHP at all? Or am I expected to move around the elements purely via CSS positioning?

I just want to do it how it's intended and I don't get it. I'm 100% positive I can get it how I like it by just moving stuff around and screwing with the code, but I don't want to do anything stupid that will mess up the accessibility.

Is there a tip or link or resource you can give me to get me started here?

Thanks. I thought I had it and then I looked and saw there were about 3 ways of doing what I need to so I figured I'd ask which way to go.

Paul

CommentFileSizeAuthor
#5 proofofconcept.zip2.03 KBpalminas
#5 proofofconcept.zip2.03 KBpalminas

Comments

Jeff Burnz’s picture

Jeff Burnz commented
Issue tags: +Accessibility

I'm not entirely clear if you are only asking about accessibility or the best practice of sub-theming as well? If the latter then you never need to hack the core theme, but you can screw around with the sub-theme templates as much as you like, however its up to you to understand or ask about the implications of moving certain elements (I encourage you to ask if you're not sure).

In short tell me what you want to do, basically run your changes by me and I'll do my best to give you concrete advice.

palminas’s picture

palminas commented

Thanks!

Here is what I need to figure out. I know how to use your GPanels stuff, and how to change the layout of sidebars, etc. What I don't know is where I am supposed to make changes for the upper bit, the part with the logo positioning, etc. I want part of it position:fixed, different positioning for the logo, site name, etc.

I tried zipping it but the Drupal site keeps throwing a js error when I try to upload it so I put it below to be copy/pasted into a .html file. Sorry for the inconvenience.

Thanks.

Paul

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title>Layout Draft 1</title>
<style type="text/css">
body {
padding: 0px;
margin: 0px;
background: #fff;
}
#pagewrap {
  margin-top: 8px;
  font-family: Tahoma, tahoma, arial, sans-serif;    
}
#contentwraptop {
  z-index: 1;
  position: fixed;
  margin:0px;
  left: 0px;
  right: 0px;
  top:0px;
  height:84px;
  overflow: hidden;
  padding: 8px 0px 0px 0px;
  background-color: #fff;
}
#contentwrapmiddle {
  position: fixed;
  background-color: #fff;
}
#logo {
  position: fixed;
  top: 8px;
  z-index: 2;
  left: 32px;
  padding: 0px;
  margin:  0px;
  overflow: hidden;
  background-color: #FFF;
}
#linkswrap {
  z-index: 1;
  padding: 0px;
  margin:  0px;
  overflow: hidden;
  background-color: #FFF;
}
#secondarylinks {
  z-index: 2;
  position: fixed;
  right: 32px;
  top: 8px;
}
#primarylinks {
  z-index: 2;
  position: fixed;
  top: 46px;
  right: 32px;
}
#bluebararea {
  z-index:1;
  position: fixed;
  top: 88px;
  right: 0px;
  left: 0px;
  background-color: #025D9D;
  color: #ffffff;
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 40px;
  height: 30px;
}
#pagetitle {
  position: relative;
  bottom: 18px;
  padding: 0px;
  margin: 0px;
  font-size: 20px; 
}
#contentwrapbottom {
  position:relative;
}
#primarycontent {
  z-index: 0;
  position: relative;
  width: auto;
  padding-top:80px;
  margin-top: 32px;
  margin-left: 32px;
  margin-right: 32px;
  padding-right: 240px;
  text-align: left;
}
#sidebarright {
  z-index:0;
  position: absolute;
  top: 86px;
  right: 0px;
  width: 240px;
  bottom:0px;
  background-color: #025D9D;
  color: #fff;
  text-align: center;
}
</style>
  </head>
  <body>
<div id="pagewrap">
  <div id="contentwraptop">
  <div id="secondarylinks">
      <p> Secondary Links </p>
  </div>
  <div id="primarylinks">
      <p> Primary Links </p>
  </div>
  <div id="logo">
      <p> Logo </p>
  </div>
  </div>
  <div id="contentwrapmiddle">
    <div id="bluebararea">
      <div id="pagetitle">
      <p>Site Name</p>
    </div>
    </div>
    <div id="bluebarshadow">
    </div>
  </div>
  <div id="contentwrapbottom">
    <div id="primarycontent">
      <p>primary content A

But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?

On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains.
primary content B

But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?

On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains.
primary content C

But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?

On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains.
primary content D

But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?

On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains.
primary content E

But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?

On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains. </p>
    </div>
    <div id="sidebarright">
      <p> User Panel </p>
    </div>
  </div>
</div>
  </body>
</html>
palminas’s picture

palminas commented

That, by the way, is my basic proof of concept which shows what I want to do with the upper bars, the logo/site name positions, relative coloring, etc.

Thanks for your help!

Paul

Jeff Burnz’s picture

Jeff Burnz commented

You have removed all the page semantics and sectioning (the headers) and the skip link, both bad moves. All the position fixed stuff would have me worried - this may unreasonably obscure content if the user needs to enlarge a great deal (and some people simply need to have the text very very large).

palminas’s picture

palminas commented
StatusFileSize
new proofofconcept.zip2.03 KB
new proofofconcept.zip2.03 KB

Okay, just to be clear, I didn't remove anything. That is simply an HTML/CSS file so that I could show you the effect I am going for. It is not your file that I modified, it is simply to show the fixed stuff. The fixed stuff is simply a 110px bar across the top of the screen, which in a final version will degrade such that any viewport capable of less than 1024 x 768 (such as most netbooks) will display it differently (of which several options are being considered).

I have much computer and server experience (A+, MCP), and I used to code HTML in the days of HTML3, and I've dabbled in Drupal 6 theme dev a bit lately. I've been getting back into HTML/CSS and learning a bit of PHP for this project, which is both an amazing idea for a web presence, and short on funds to hire a real Drupal themer at this point.

The site is going to be huge and have multiple frontends. Among these:

standard
handicap/accessible
mobile/evdo/3ds/psp/etc.

Here I am trying to construct the Standard version. Later I will (once I have more knowledge of it) create a second sub-theme for accessibility purposes.

That being said, I would just like to know, if possible, how/where it is I need to go in the subtheme to modify the appearance of the top content area such that it functions similarly to the html proof-of-concept file. I had presumed that I would be modifying the page.tpl.php file and the page.css, blocks.css, and layout.css files, but I'm not totally sure where the CSS controlling the positioning of the upper elements is.

I do hope I am making sense. I really need to figure out why I can't figure this out! Thanks for your help and I do apologize for the confusion I've caused here.

Paul

Jeff Burnz’s picture

Jeff Burnz commented

OK couple of things here - building a "standard" version and an "accessible version" in not realy best practice - the main standard version should be accessible and not-with-standing some insurmountable issue (such as the client demanding the entire site be coded in Flash) this may cause problems. E.g. if the "standard" version is not accessible how do you expect assisitive technology users are going to interact with it to the extent that they can switch theme or domain in order to get the "accessible" version? We just went through something like this with Overlay in D7 development cycle and the solutions were not trivial.

I suggest you install Firefug and start digging into the code, you will quickly find the CSS you need to change and where to add it to the theme (Firebug is literally the most indispensable tool for themers these days). You're on the right track with regards to template files.

palminas’s picture

palminas commented

Thank you.

I wonder if you could help me find what is causing a white space on my subtheme? I am coming along, but I can't seem to find anything using Firebug... I think I've tried everything I can think of.

If you look at the site:

EDITED (not yet a public site)

Look at the logo. Now, look at the blue bar beneath the logo containing the site name. Okay, now scan across to the right. Beneath the blue bar on the right is the right sidebar, also blue. To the right of the sidebar is a vertical white space along the edge of the screen that I cannot figure out how to eradicate.

I have tried setting all appropriate paddings and margins to 0, hiding overflow, and even absolute positioning with a right: 0px; z-index: 99; does nothing to the white area. The page settings are on max width: 100%; and I am accessing from FF 3.6 and IE 8 and Chrome something new :)

Can you help me?

Thanks for everything!

Paul

palminas’s picture

palminas commented

It just clicked. I wasn't looking at it from the right perspective. I think I got it now. Will try and post back if I still have problems. Thanks again.

mgifford’s picture

mgifford
he/him
Primary language English
commented

Want to echo Jeff's point here about accessible versions. If a site is designated as the "accessible one" history has shown us that this also becomes the "neglected one".

There's lots that can be done to make a beautiful site accessible.

Now, you rolled up a zip file, but not a patch. I'm not clear off hand what the enhancements are you've made. Can you clarify this? It's always faster to review a patch than a whole zip file.