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.


Theeming Issue for the "Middle"

Login / Search

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

Well-settled

Greetings,

I'm doing a whole new project, but this time could be a great "refferal" of what ocPortal can do. My project now was volunteered to have one of my websites, I work as web staff, to have their main and "sub-sites" be transformed to a CMS such as ocPortal. Right now, I'm transforming one of their sub-sites from normal PHP page to ocPortal, btu I obtain some thming troubles to make it almost the same as their sub-sites (It was a request). The "Middle" that consists of global_middle and the navigation sides are not at war with me. First, I made the navigation backgorund image intact, but the navigation "middle" doesn't have a property in the CSS pages. I can't seem to change the propert to "transparent". Now for the global_middle, I would like to re-size it have the navigation sides have more width than the global_middle has. I used "width: 85%" in global_middle, that isn't taking an effect. How can I do this?

Here's the original sub-site link… http://www.vgamingonline.net/fansites/knightonline/temp/

Here'se a graphical explaination:






HEllo



Back to the top
 
Posted
Rating:
#35211
Avatar

Well-settled

 Okay, found out how to change the sides background by deeply exploring the CSS and found out that the following property is changed.

Code

.standardbox_t_panel {
   background-color: transparent; /*  */
}

Yeah, but now I found out how to resize the middle in global.tpl, but I don't know how to "center" it. I guess that wasn't the solution so I'm thinking to resize the sides more somehow. :)

HEllo



Back to the top
 
Posted
Rating:
#35237
Avatar

Well-settled

Hmm,

Is this such as dumb question or is no one here? O_o Anyways, I made many changes to the template, and now the only problems is find out how to make the navigations sides as long as the global_middle. The sides overlap my new footer and it looks stupid. I would like the navigations sides background to stop at the footer. Has anyone done this at all?
 

HEllo



Back to the top
 
Posted
Rating:
#35245
Avatar

Hi Kevin,

I'm aware of this topic and you'll receive a reply :). It's just it's too involved for me to do on a weekday evening.


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:
#35263
Avatar

Hi Kevin,

First thing, it's great to see someone making some big theme changes - it's nice to see :).

As you know ocPortal is CSS-based, and CSS can be quite difficult to work with at times. You often have to find tricks. This layout would be pretty easy if it was a table - you could just set table cell backgrounds to solve your latest problem. That's one option – to build a table into GLOBAL.tpl instead of the current structure of DIV's.

CSS has difficulties with heights. Realistically you can't really make div's that are next to each other in the global template have the same height, because CSS can't do it. So you have to do something else instead. Here's some pseudo code to (it's just meant to show the point, it's not ocPortal-ready):

Code

<body>
<div style="background: url('nav_left.png') top left repeat-y;">
   <div style="background: url('nav_right.png') top right repeat-y;">
      <div id="panel_left">...</div>
      <div id="panel_right">...</div>
      <div class="global_middle">...</div>
   </div>
</div>
</body>

What I'm illustrating here is that you could place two extra div's that surround both the middle and panels. Then you place background images on these div's that only have enough width for the left/right panels. One of the background's is aligned to the left, for the left navigation, and the other is aligned to the right.

Make sure that the panels themselves have a transparent background.

p.s. I'd advise you try out the Firefox 'firebug' extension - it really helps you find what CSS classes are used where.


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:
#35328
Avatar

Community saint

yes using the source code for your own site helps a lot.
I use that just about all the time.
I use it so much that I created a button for it with in firefox.

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:
#35614
Avatar

Well-settled

Well, okay…

I don't think I'll be using your solution due to the owner of the website I was working for isn't updating me on what he wants to do. I'm planning to go back to the Cyber'n Essence project soon, but with more done and accomplished this time with no finiacial drawbacks due to a friend of mine allowing me to use some of his space for my web site. :)




HEllo



Back to the top
 
1 guests and 0 members have just viewed this: None
Control functions:

Quick reply   Contract

Your name:
Your message: