Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

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

Status
Not open for further replies.

1DMF

Programmer
Jan 18, 2005
8,795
GB
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
 
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
| Marketing and Creative Services
 
Hi

1DMF said:
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 [tt]body[/tt] section with [tt]style[/tt] tag and the [tt]@import[/tt] rule :
HTML:
<style>
@import url(path/my.css);
</style>


Feherke.
feherke.github.io
 
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
| Marketing and Creative Services
 
You can include external CSS file into the body section with style tag and the @import rule :
Thanks fekerke, forgot about the import rule!

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
 
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
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top