HTML Logo by World Wide Web Consortium (www.w3.org). Click to learn more about our commitment to accessibility and standards.

Moving forward with Composr

ocPortal has been relaunched as Composr CMS, which is now in beta. ocPortal 9 will be superseded by Composr 10.

Head over to compo.sr for our new site, and to our migration roadmap. Existing ocPortal member accounts have been mirrored.


How do I do the width thing?

Login / Search

 [ Join | More ]
 Add topic 
Posted
Rating:
#42717 (In Topic #9519)
Avatar

Community saint

I am completely brain dead for some reason and am not sure how to change the width from fluid to the way it is here.

I run http://otakuplayground.com and am hopping to make themes and other things for ocportal even though I no longer use it for otakuplayground.com I still love it and feel it could go far with the right help. It needs themes and needs people to advertise for it.
Back to the top
 
Posted
Rating:
#42718
Avatar

Hi,

Fixed width tutorial is what you need :).


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Rating:
#42719
Avatar

Community saint

Ah ok thanks.
How do I do the shadow effect like you have.
Was trying to figure it out when some one asked in another thread but went completely blank.
 :$

Do I create a new class in the css like the replies suggested or just edit the class called re_body.

I run http://otakuplayground.com and am hopping to make themes and other things for ocportal even though I no longer use it for otakuplayground.com I still love it and feel it could go far with the right help. It needs themes and needs people to advertise for it.
Back to the top
 
Posted
Rating:
#42723
Avatar

I'd suggest using the Firebug (a Firefox addon) inspect tool to poke around our site.

But basically it is a centered background of a div which is wrapped around the fixed-width div (both sides of the shadow is a single background).
It can't be on body because that's used for the tiling background (the marble).


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Rating:
#42728
Avatar

Community saint

ah so a wrapper then.

I run http://otakuplayground.com and am hopping to make themes and other things for ocportal even though I no longer use it for otakuplayground.com I still love it and feel it could go far with the right help. It needs themes and needs people to advertise for it.
Back to the top
 
Posted
Rating:
#46806
Avatar

Fan in training

Chris Graham said

Hi,

Fixed width tutorial is what you need :).

Viewed with IE7 the wrapper on your code is too tight, I can see what the original code is, but the replacement code is hidden by a horizontal scroll bar.

Also I am currently using a "selectable fixed width" on a Joomla site ( see it here ) any idea how to implement this (or port the whole template to OCP)

 :( My gosh it is hard to find what I am looking for, just 1 of the css files has over 2700 lines (some nice documenting in there though).

Michael Kelly

ScholarForge.com
Back to the top
 
Posted
Rating:
#46809
Avatar

Community saint

Hi Mike! Should be doable. What is the name of the theme you are running on your Joomla site? Is it free/open source? If so, I'll see if I can grab a copy and hava look at the code.

"no violence, no hate, no pain, no enemies
just peace, unity, tolerance and love" - The Beloved

OCP V7 | Advocating monetary reform - FreeOurMoney

Need OCP friendly hosting? Look no further:
Web Hosting, Reseller Hosting, and Dedicated Servers w/cPanel - Elief! - Official hosting partner for ocPortal.
Back to the top
 
Posted
Rating:
#46819
Avatar

Fan in training

Seasonal SoccerDad said

Hi Mike! Should be doable. What is the name of the theme you are running on your Joomla site? Is it free/open source? If so, I'll see if I can grab a copy and hava look at the code.

It is Feel the world 3 (that's the d/l link) it is Free/GPL it might require registration, if so let me know and I'll add it to one of my sites and post the link. I added the 1200px switch (and a few tweaks) to the original since 1200px is a great width for a wrapper.

Michael Kelly

ScholarForge.com
Back to the top
 
Posted
Rating:
#46883
Avatar

Hi,

I've reviewed our fixed-width tutorial. It was very out-of-date; some things have changed since:
  • we now have some code in our default templates that means you don't need to do any template editing. We specifically added some ID's and a wrapper div so that fixed width would be easier.
  • the change is simpler now that we don't recommend people use their own custom themes within the Admin Zone
  • nobody really needs 800x600 fixed width anymore, so the issues relating to such a small resolution are gone

The tutorial will be updated soon, but here's it's text until we make our next update…



A topic of regular disagreement in web design is whether 'fixed-width' designs or 'fluid' designs are better. A fixed-width design is one where the horizontal width of the website is fixed, so that it doesn't change when different resolutions are selected.

Proponents of fixed-width argue:
  • that fluid designs (non fixed-width designs) can not function well, because things will always break down when the width significantly exceeds what was tested.
  • that fixed-width designs are graphically easier to achieve.
  • that fixed-width designs are easier to read from.
  • that fixed-width designs are more attractive, because it allows more artistic control.
Opponents of fixed-width argue:
  • that fixed-width designs make unreasonable assumptions about how web sites should be viewed; for example, PDAs would fail to have enough width for a typical fixed-width design yet are prevented from automatically performing adjustments.
  • that people with large resolutions can always make their browser window smaller.
  • that using fixed-width is done by those that are applying traditional design skills to the new online medium without adjusting them properly for that medium.




ocPortal

Thumbnail: A 800x600 fixed-width layout in action

A 800x600 fixed-width layout in action

ocPortal's default theme is designed to be fluid, as we avoid making assumptions and follow all web standards, but it is possible to re-theme ocPortal to make it use a fixed-width. I believe there are merits to both, and that you should carefully consider your audience and priorities when choosing which kind of design to use.

ocPortal includes a theme wizard which will make it very easy to generate new colour schemes - this is what we expect the majority of users to use to retheme their website. Advanced tools, advanced documentation, and a very robust mature framework, are provided to allow complete redesigning to be possible, but it is inherently complex and requires a good understanding of the technology being worked with. As ocPortal is an architectural system, made up of an elaborate construction of shared and carefully tailored components with very strongly defined behaviour, it unfortunately just isn't possible that we could implement a WYSIWYG style editing interface for ocPortal. Therefore to make major changes it is necessary to be able to manually re-craft templates (written in XHTML and Tempcode) and CSS as we do, and this requires some skill. This skill isn't based around our own technology (it is based around the technology of the W3C - the web standards organisation).

If you want a very customised website layout, but do not have the skills and the experience, or the time to invest obtaining, then we would recommend contracting us out (ocProducts) to perform any necessary customisation work.

The rest of this tutorial will focus on a step-by-step solution to achieving a fixed-width layout. ocPortal is designed on the assumption of a minimum 1024x768 resolution, so this is what we'll use (800x600 is possible, but requires additional changes, in particular to the forum header and footer).

ocPortal's layout is heavily based on CSS positioning, and hence this must be understood and worked with in order to make the layout work - it is definitely not a table based layout. Unfortunately CSS positioning is a very complex thing that requires experience, but it's also the only standards-compliant solution that ocPortal could use.

For this tutorial we will assume we wish to have a fixed-width layout of 980px (980+scrollbar+other Windowing 'chrome' is about equal to 1024), and have a top image banner spanning the full width of the website.

Step-by-step: fixed-width

To quickly get a fixed-width layout, we can add this to your custom theme's global.css:

Code

#main_website { /* #main_website targets only the main site screen, avoiding frames etc */
   background: red; /* this is the background seen around our fixed width */
}
#main_website #body_inner {
   width: 980px;
   position: relative;
   margin: 0 auto 0 auto;
   background: white; /* set the background colour back to white for the area within our fixed width */
}

Add it to your own custom theme, and not direct to the default theme. The default theme is used by the Admin Zone and CMS Zone (unless you have changed that), and it's better if we leave these parts of ocPortal alone. You don't want to have to worry about themeing these as well as the main part of your website – and you definitely want to avoid breaking the Admin Zone as this is what you are probably actually needing to use to make the theme changes.

Step-by-step: top banner

Now that we have our fixed-width, we just need to get our banner sorted out to get our basic draft layout done. You'll still have width assumption problems to resolve, but you can tackle each of those individually as they come.

Before we starting writing code, let's sort out some ocPortal terminology. At the top of ocPortal there are provisions for:
  • a site logo
  • the banner rotation
I often have clients referring to a larger version of the logo as a banner and not wanting the banner rotation at all. So let's ignore ocPortal terminology now, and just refer to the single image that we want as 'the banner'.

To change ocPortal's logo to the banner image that we want, hold down ctrl+alt+shift and click it. This will take you to the theme image editor and you can just upload your own replacement image (a much larger image).

This will inevitably make a mess as there's no space for the image, so now we have to do some template editing. The default logo/banner are defined in the 'HEADER.tpl' template. What we can actually do is just edit that template and totally wipe out a big chunk of it:

Code

{+START,IF,{$GET,show_top}}
<div class="global_top"><div class="float_surrounder">
   <a href="{$PAGE_LINK*,:}"><img class="logo" src="{LOGOURL*}" title="{!FRONT_PAGE}" alt="{!FRONT_PAGE}" /></a>

   {$SET,PREVIOUS_ZONE,_false}
   <div class="global_zones">
      {+START,IF,{$CONFIG_OPTION,use_custom_zone_menu}}
         {$BLOCK,block=side_stored_menu,param=zone_menu,type=zone}
      {+END}
      {+START,IF,{$NOT,{$CONFIG_OPTION,use_custom_zone_menu}}}
         {$BLOCK,block=side_stored_menu,param=_zone_menu,type=zone}
      {+END}
   </div>
   {+START,IF,{$OR,{$EQ,{$ZONE},adminzone},{$AND,{$HAS_ZONE_ACCESS,adminzone},{$EQ,{$ZONE},cms}}}}
      <div class="adminzone_search">
         <form action="{$URL_FOR_GET_FORM*,{$PAGE_LINK,adminzone:admin:search}}" method="get" style="display: inline">
            {$HIDDENS_FOR_GET_FORM,{$PAGE_LINK,adminzone:admin:search}}

            <div>
               <label for="search_content">{!search:SEARCH_FOR}</label>:
               <input type="text" id="search_content" name="id" value="{+START,IF,{$MATCH_KEY_MATCH,adminzone:admin:search}}{$_GET*,id}{+END}" /><input type="submit" value="{!search:SEARCH}" />
            </div>
         </form>
      </div>
   {+END}
   {+START,IF,{$NOT,{$OR,{$EQ,{$ZONE},adminzone},{$AND,{$HAS_ZONE_ACCESS,adminzone},{$EQ,{$ZONE},cms}}}}}
      {$SET,BANNER,{$BANNER}} {$,This is to avoid evaluating the banner parameter twice}
      {+START,IF_NON_EMPTY,{$GET,BANNER}}
         <div class="global_banner" style="text-align: {!en_right}">{$GET,BANNER}</div>
      {+END}
   {+END}
</div></div>
{+END}
If you are editing the template more carefully then beware of corrupting the Tempcode directives. If you cause those to not match up properly then you may need to fiddle around in order to get your site functioning again (you can put &keep_theme=default onto the end of a URL to temporarily use ocPortal with the default theme whilst you conduct repairs to yours).

Because we removed the zone navigation menu, it's a good idea to put that somewhere else, lest your members have trouble finding their way to their Personal Zones. ocPortal actually comes with a 'side_zone_jump' block that you can place on one of your panels - this will provide an excellent substitute. Otherwise you could keep the same kind of zone navigation menu as is there by default, but just redesign it to be placed underneath your banner (for example). I don't want to tell you what to do exactly, because it's your choice - ocPortal is your toolkit, to do with as you please. The best site designs usually don't use any kind of zone menu, but instead have their own carefully crafted multi-level navigations (and ocPortal does support all that very well).


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Rating:
#46885
Avatar

Community saint

Thanks Chris.

I run http://otakuplayground.com and am hopping to make themes and other things for ocportal even though I no longer use it for otakuplayground.com I still love it and feel it could go far with the right help. It needs themes and needs people to advertise for it.
Back to the top
 
Posted
Rating:
#46899
Avatar

Community saint

I've changed my version 3.2.10 to a fixed width, including the Admin Zone and the CMS (my choice). A couple of questions that can be answered with a YES/NO response …

  • Is this version of the tute aimed specifically at version 4.x.x ?
  • Can this be adapted to work with version 3.x.x ?
I assume any adaptation for version 3.x.x will need the incorporation of the CSS ID "#main_website" into global.css as "#body_inner" already exists?

Take my advice. I'm not using it!

View my working ocPortal site (version 9.x.x) at Anglo-Indian Portal
Back to the top
 
Posted
Rating:
#46900
Avatar

Is this version of the tute aimed specifically at version 4.x.x ?

Yes.

Can this be adapted to work with version 3.x.x ?

It could. It's not worth the bother though IMO- what we have here isn't intrinsically better than what you'll have, it's just simpler to do for people creating a new theme.

I assume any adaptation for version 3.x.x will need the incorporation of the CSS ID "#main_website" into global.css as "#body_inner" already exists?

As far as I recall, we put id="main_website" onto the body tag in the HEADER, template, and added a new div tag with id="body_inner" directly beneath that body tag.
If you have a "body_inner" it's probably a part of your custom theme, although it may well be identical to the body_inner we've added to the default templates.


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Rating:
#46901
Avatar

Community saint

Thanks.

Gives me a jumping off point to work from …

 :thumbs:

Take my advice. I'm not using it!

View my working ocPortal site (version 9.x.x) at Anglo-Indian Portal
Back to the top
 
There are too many online users to list.
Control functions:

Quick reply   Contract

Your name:
Your message: