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.


CSS_INCLUDE tempcode

Login / Search

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

Well-settled

Working with CSS_INCLUDE tempcode and having some issues

Hi there,

So for the past couple days or so I have been porting a theme I found on oswd.org into ocPortal just to test it out.

I managed to upgrade to the latest beta and the code editor is a tad better, still slow but a little more easier to deal with so cool stuff!

Anyway, I have it almost complete now and I was just adding in the ability to auto-collapse the left and right columns so the middle section expands outwards when those columns aren't there. To do this I have to use some CSS rather than just changing the widths of the div elements. This is because I have a background image which is loading behind the main content area which has to change depending on which columns are loading.

However I am having some troubles figuring out how to determine which columns are loading. My method is that if there is nothing in the right column it will load noright.css. If there is nothing in the left column it will load noleft.css. If there is nothing in both columns it will then load full.css which contains CSS that overrides the others.

Here is what I have placed into HEADER.tpl:


{+START,IF,{$IS_EMPTY,{$TRIM,{$GET,panel_left}}}}
<link href="{$CSS_INCLUDE,noleft}" rel="stylesheet" type="text/css" />
{+END}
{+START,IF,{$IS_EMPTY,{$TRIM,{$GET,panel_right}}}}
<link href="{$CSS_INCLUDE,noright}" rel="stylesheet" type="text/css" />
{+END}
{+START,IF,{$IS_EMPTY,{$TRIM,{$GET,panel_left}}{$TRIM,{$GET,panel_right}}}}
<link href="{$CSS_INCLUDE,full}" rel="stylesheet" type="text/css" />
{+END}

I have put that right below the section that says "Preload all the panels", below the 4 lines of code below that comment.

The problem is that it is then loading all of the CSS files even when there should be left and right columns showing, thus causing the main area to expand and the left and right columns to be hidden. It doesn't really make sense to me considering it appears to me that the panel_left and panel_right variables are set in those 4 lines of code above. So obviously I don't understand what they do or if my code is even the right way to go about it.

Also, when I view the site and view Source Code I see the following in place of my code:
<link href="" rel="stylesheet" type="text/css" />
And the actual links to my CSS files are loading below with all the others, I am guessing from the {$CSS_TEMPCODE} variable.

So, I think after I figure this out the theme will be pretty much done, except for the help panel which hopefully I can figure out somehow.

Not bad at all. I look forward to setting up a live ocPortal site and testing out all the neat little addons and whatnot.

Ryan

P.S. Your codeboxes don't seem to work properly when I try putting my code into them and previewing it on here so I just pasted it in, hopefully that's ok.
Back to the top
 
Posted
Rating:
#63539
Avatar

Well-settled

I just figured out I can just use {$CSS_INCLUDE,full} instead of the link tag and that fixes the extra link tag problem but not the rest of the problems.  Must be something wrong with the way I am trying to use the panel_right and panel_left variables.
Back to the top
 
Posted
Rating:
#63543
Avatar

ocPortal passes the output through a preprocessor which is where the CSS includes are processed. This is because they have to happen before main output. The pre-processor is not aware of things like IF.

You're probably better off adding CSS classes to the <body> tag then using descendant selectors.

Code

<body class="re_body{+START,IF,{$IS_EMPTY,{$TRIM,{$GET,panel_left}}}} no_panel_left{+END}">

Code

.no_panel_left .whatever {
...
}


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

Well-settled

Perfect!  Thank you Chris =)  That does the trick nicely.
Back to the top
 
1 guests and 0 members have just viewed this: None
Control functions:

Quick reply   Contract

Your name:
Your message: