INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

How do you widgetise templated content and still use external CSS files?

How do you widgetise templated content and still use external CSS files?

How do you widgetise templated content and still use external CSS files?

(OP)
Hi,

I'm refactoring a website and I'm trying to build it in widgetised sections, so in my template I can at any time use

CODE

<tmpl_include name='xyz.tp'> 

However, I would like to keep the CSS in an external file, only you cannot use

CODE

<link href="path/my.css" rel="stylesheet" type="text/css" /> 
outside of the header.

So I have found I have to use <style> tags within the widget template, breaking the design / content separation paradigm.

How do I resolve this conflict?

Thanks,
1DMF

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Free Dance Music Downloads

RE: How do you widgetise templated content and still use external CSS files?

You don't need to use style in your include files.

Simply have the relevant HTML in your files IE

CODE

<a href="link.htm" class="style">my link</a> 

then in a stylesheet just have the styling in 'path/my.css'

CODE

.style {color: black;} 

Then the page that you have all this on your display page

CODE

<head>
<link href="path/my.css" rel="stylesheet" type="text/css" /> 
</head>
<body>
<tmpl_include name='xyz.tp'> 
</body 

Either way in your template pages you need to assign CLASSES or ID's to elements unless you want to stylize the elements universally

CODE

input {color: black;} 

Essentially if you are creating widgets I would create widget subclasses so that all styles are

CODE

widgetName.className {color:black;} 

This way it will be easier to make universal changes to widgets and better organize your styling etc.

Darryn Cooke
www.darryncooke.com | Marketing and Creative Services

RE: How do you widgetise templated content and still use external CSS files?

Hi

Quote (1DMF)

However, I would like to keep the CSS in an external file, only you cannot use

CODE

<link href="path/my.css" rel="stylesheet" type="text/css" /> 
outside of the header.

So I have found I have to use <style> tags within the widget template, breaking the design / content separation paradigm.
You can include external CSS file into the body section with style tag and the @import rule :

CODE --> HTML

<style>
@import url(path/my.css);
</style> 

Feherke.
feherke.github.io

RE: How do you widgetise templated content and still use external CSS files?

importing the CSS in the body is generally not an approved method and it makes debugging and the source code a long and messy funky thing to look at.

Is there a reason why you wouldn't just use a stylesheet in the head?

Darryn Cooke
www.darryncooke.com | Marketing and Creative Services

RE: How do you widgetise templated content and still use external CSS files?

(OP)

Quote:

You can include external CSS file into the body section with style tag and the @import rule :
Thanks fekerke, forgot about the import rule!

Quote:

Is there a reason why you wouldn't just use a stylesheet in the head?
Yes, the site is templated, there is a generic header used for all pages and I don't want 100+ style sheets loaded into every page for widgetised content that won't exist on a every page. I understood that to be very bad practice?

How does using @import make the source code long/messy/funky?

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Free Dance Music Downloads

RE: How do you widgetise templated content and still use external CSS files?

(OP)
well after a nights sleep and a fresh look at things I realised I was being a bit of a numpty!

I already had a header template variable for allowing a single bespoke CSS or JS file to be dynamically loaded into the header through the application framework.

So why don't I make it a collection!

Now I have in my application

CODE

# template components
    $c->stash->{css} = [{val => 'home'},{val => 'jquery.mCustomScrollbar'},{val => 'update_messages'},{val => 'navigation_menu'}]; 
    $c->stash->{js} = [{val => 'jquery.mCustomScrollbar.min'}, {val => 'update_messages'}];        
    $c->stash(template => 'home.tp' 

So I can now pass an array of hashes with the required CSS / JS on a per template basis

And then load it dynamically into the generic header

CODE

<tmpl_if name='css'>
        <tmpl_loop name='css'>
            <link rel="stylesheet" type="text/css" href="/css/<tmpl_var name='val'>.css" />
        </tmpl_loop>
    </tmpl_if>
    <tmpl_if name='js'>
        <tmpl_loop name='js'>
            <script src="/js/<tmpl_var name='val'>.js" type="text/javascript"></script>
        </tmpl_loop>
    </tmpl_if> 

Much better thumbsup

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Free Dance Music Downloads

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close