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.


Floating, rounded corners, fixed-width theme

Login / Search

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

Fan in action

I don't have much experience with this new-fangled internet thing, but have managed to hack together a theme that includes the eye-candy of the appearance of a 3-D raised off the background (like the current ocPortal Forums theme).  It also has rounded corners with a slight gap between the top (and bottom) of the page and the top (and bottom) of the browser content window.  The 'tease' image that Fletch put up in another topic ( http://ocportal.com/forum/topicview/misc/themeing/tease_.htm ) is what I'm going after regarding the 'floating' effect.  Basically, I took the HTML output of a theme generator (Artisteer), and, following the excellent guidelines of the tutorials available here, I spliced some of the css and html code into global.css, global.tpl, header.tpl and footer.tpl.  I then re-referenced all the image files.  It pretty much works, but most likely has a LOT of redundant coding going on in the background.  That's ok, I'll eventually figure out what I can eliminate to make the whole thing more efficient.  Efficiency of the site has an impact on my working on it because I live out in the sticks and my internet connection is via satellite, and can be slow at times.

I noticed some extra css files that were generated by the theme generator, namely style.ie6.css and style.ie7.css.  These files are refered to in the page.html thusly:

    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
    <!–[if IE 6]><link rel="stylesheet" href="style.ie6.css" type="text/css" media="screen" /><![endif]–>
    <!–[if IE 7]><link rel="stylesheet" href="style.ie7.css" type="text/css" media="screen" /><![endif]–>

(I'm having difficulty getting the Codebox to work, so the code snippet isn't contained within.)

I already harvested the good stuff from the style.css into the appropriate places, but recently discovered from a friend with old browsers (IE6 and IE7) that the site doesn't look very nice when using IE6 and IE7.  I don't have easy access to these browsers, and will have to revive an old machine to be able to test those browsers, once I get a clue on how to include these fixes into ocPortal's awesome CMS.

If there is a 'native' way to get this same effect, I'd really like to know how to do it, to eliminate all the extra stuff.

After I get the IE6/IE7 issue resolved, I will document my little adventure in the hopes someone might benefit from all the late nights and over-indulgence of coffee I spent figuring it out.

Thanks in advance for any advice or RTFM references.


Last edit: by Andy Velasquez
Back to the top
 
Posted
Rating:
#66053
Avatar

Community saint

Hi Andy. If you want to put browser-specific things into your CSS and/or HTML then there are 2 ways to do this. You can exploit some IE bugs that other browsers will ignore, but this really depends on what you're trying to do. In ocPortal you can use Tempcode to run things based on the browser by putting something like the following

Code

{+START,IF,{$BROWSER_MATCHES,ie}}your HTML or CSS here{+END}

Instead of "ie" you can use "ie_old" or "ie_new" or a few other options (documented in the Tempcode tutorial). You can also make your code dependent on the browser's "user agent", which is what the browser calls itself. This can be done with

Code

{+START,IF,{$EQ,{$BROWSER_UA},abcdefg}}your HTML or CSS here{+END}

This will check whether the user agent equals "abcdefg" and will include "your HTML or CSS here" if it matches. The drawbacks to this approach compared to the BROWSER_MATCHES one are that
  • different browser versions have different user agents, so you may end up doing a lot of checks (here's a list of known user agents for Internet Explorer)
  • Users are free to change their user agent string to anything they like, so many IE users might not be identifying themselves as such and many users of other browsers may be calling themselves IE (this is because there are still a lot of sites out there that will refuse to load unless you do or don't have some specific browser). Incidentally, this point is also why statistics on browser usage are always so varying and imprecise.

You can use Tempcode in any of the files inside the "templates", "templates_custom", "css" and "css_custom" folders inside your theme (even files which say ".css" are actually treated as templates if they're in the css or css_custom folders). Thus we can write your given snippet of code like this in Tempcode (for generating HTML)

Code

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
    {+START,IF,{$BROWSER_MATCHES,ie_old}}<link rel="stylesheet" href="style.ie6.css" type="text/css" media="screen" />{+END}
    {+START,IF,{$BROWSER_MATCHES,ie_new}}<link rel="stylesheet" href="style.ie7.css" type="text/css" media="screen" />{+END}

You can, instead, merge all of these into one CSS file, putting the IE-specific stuff at the end and wrapping it with the same START/END tempcode as above. You'd want to put these in your css or css_custom folder to do this though, which would mean changing the path shown after the "href" above. You can get around this by including the CSS directly into the page rather than using links via a call like

Code

{$CSS_INCLUDE,style}

Hope that helps :) The Tempcode tutorial is invaluable for making ocPortal themes. There's rarely a moment when I haven't got a couple of browser tabs showing it ;)

Update: N00b mistake removed (trying to load a template file directly, rather than running it)


Last edit: by ChrisW
Back to the top
 
Posted
Rating:
#66054
Avatar

Correction Chris, the .css files will be statically cached as they are referenced direct out of templates_cached/<lang> by the browser. You're only allowed non-static Tempcode operations (things that might change from one request to the next) in nocache.css, apart from (in v6) references to whether a mobile device is being used or not.


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

Community saint

Interesting point Chris, I'd not run up against that before and stand corrected. Mind you, I don't usually keep separate stylesheets for conditional things.

For the record, the way I would approach your problem Andy is to make the IE-specific things apply to different classes, then select which classes to put in your HTML via the tempcode I posted earlier. For example, let's say we have a nice PNG background called "fancy_back.png" which uses transparency for rounded corners. This won't work in IE6, so we can make a separate file "less_fancy_back.jpg" which has no transparency (either the corners are filled in, if we know what it will be on top of, or we just give it square corners). Now we can use some CSS like this to style each kind of element

Code

.my_box {
  /* Some general styles which we want all the time */
  color: #FFFFFF;
  float: left;
}

.rounded_box {
  /* The transparent PNG background */
  background: url('{$IMG,fancy_back}');
}

.ie_box {
  /* The IE-specific fallback */
  background: url('{$IMG,less_fancy_back}');
}

The usage of $IMG in there is a nice Tempcode call which will find our images in whichever theme is currently being used. We could have used regular URLs instead, and other than that it's all standard CSS. Now when we make the code for a bit of the page where we want to use this we can do:

Code

<div class="my_box {$?,{$BROWSER_MATCHES,ie},ie_box,rounded_box}">
Box contents
</div>

The ? is just a quick way of doing an "if" (like everything, there are usually several ways of achieving the same thing). The important point is that the second class of the box will be different depending on the user's browser. Thus everyone gets the same CSS, as Chris pointed out, but their browsers will be told to use different parts of it.

I hope that makes sense :)
Back to the top
 
Posted
Rating:
#66056
Avatar

Fan in action

Ok, I kinda get it.  Up until the correction part from Chris Graham…  

If I add the contents of style.ie6.css to the end of global.css and surround it with the {+START,IF,{$BROWSER_MATCHES,ie_old}} and {+END}  and do a similar thing with style.ie7.css, will that do the trick?  I'm assuming that the 'special' IE code will just supersede the 'normal' parts of the code that IE chokes on.

I didn't see specifics on what version 'ie_old' and 'ie_new', and 'ie' refers to.  Did I miss it?  I just did a Find on those strings in the tut_tempcode.
Back to the top
 
Posted
Rating:
#66058
Avatar

Community saint

Ok, I kinda get it.  Up until the correction part from Chris Graham…

If I add the contents of style.ie6.css to the end of global.css and surround it with the {+START,IF,{$BROWSER_MATCHES,ie_old}} and {+END}  and do a similar thing with style.ie7.css, will that do the trick?  I'm assuming that the 'special' IE code will just supersede the 'normal' parts of the code that IE chokes on.

 That was what I was thinking, but Chris's correction pointed out that it won't work, since the CSS won't be recalculated every time in the same way that other templates are, so we have to make the choice between browsers inside the HTML templates. With this in mind, I think the best ways to do what you're after are to either bring in the IE-specific CSS files as needed by using $CSS_INCLUDE inside a START/END statement, like

Code

{$INCLUDE_CSS,style}
{+START,IF,{$BROWSER_MATCHES,ie_old}}
   {$INCLUDE_CSS,style.ie6}
{+END}
{+START,IF,{$BROWSER_MATCHES,ie_new}}
   {$CSS_INCLUDE,style.ie7}
{+END}

 This way you can keep the separate CSS files you've already got. The suggestion I made in my last post is the way I would do it if I were starting from scratch, but you've already got the separate files made so there's no point complicating it.

I didn't see specifics on what version 'ie_old' and 'ie_new', and 'ie' refers to.  Did I miss it?  I just did a Find on those strings in the tut_tempcode.

 I can't find any such documentation either. I just did a quick search of the 5.0.3 source code and it seems like ie_old will match IE5 and IE6, whilst ie_new will match any newer version (ie. "it is IE, but it's not ie_old"). It looks like "ie_decent" will match IE7, and "ie5" will match IE5, but I would only use those two if you really need to, since undocumented things have a habit of breaking or disappearing in later versions of software.


Last edit: by ChrisW
Back to the top
 
Posted
Rating:
#66060
Avatar

Chris is almost correct.

Easiest way to think about it, based on the browsers ocPortal supports…

ie = 6 or 7 or 8 or 9
ie_old = 6
ie_new = 7 or 8 or 9
ie_decent = 8 or 9 (i.e. the 'decent' ones that aren't hideously buggy)

It kind of makes sense except 'ie_new', which made sense at the time (before IE8 came out). In hindsight of course we should have just used the version numbers ;).


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

Fan in action

I think I'm finally getting it. Except for one thing.  Where exactly do I insert the suggested code?

Back to the top
 
Posted
Rating:
#66074
Avatar

Community saint

I think I'm finally getting it. Except for one thing.  Where exactly do I insert the suggested code?

You'll probably want to put it in the HEADER.tpl file of your theme, somewhere between <head> and </head>. That file includes lots of things so it might be a bit confusing. If you put your tempcode directly before the </head> then you can be sure it won't change the other functionality.
Back to the top
 
Posted
Rating:
#66215
Avatar

Community saint

I've had to do a similar thing to this today, although including Javascript rather than CSS, and ran into a problem that took me a few moments to track down.

In the HEADER.tpl template there are the tempcode symbols {$CSS_TEMPCODE} and {$JS_TEMPCODE,header}. What these do is to collect together all of the CSS and Javascript that the page has been asking for and they dump it all into the page.

The reason this causes a problem is that $CSS_INCLUDE works by asking $CSS_TEMPCODE to include the CSS you want, but if $CSS_TEMPCODE has already been used then you're too late.

This means that when I suggested you use $CSS_INCLUDE just before </head> (since this would have the smallest chance of conflict), instead you need to put it somewhere above where the $CSS_TEMPCODE symbol is used. Just try to keep it out of any of the existing {+START}...{+END} sections, since, by definition, they won't always run their contents.

Apologies if you've been running into this problem, I should've tested the code I posted :$ I ran into this problem when my Javascript wasn't being put into the page, and it turned out I'd used $JAVASCRIPT_INCLUDE after $JS_TEMPCODE, and it turns out the CSS works in the same way.
Back to the top
 
There are too many online users to list.
Control functions:

Quick reply   Contract

Your name:
Your message: