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!

Register Log in
  • Congratulations Mike Lewis 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

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
 
Sort by date Sort by votes
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
 
Upvote 0 Downvote
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.
Click to expand...
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
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
You can include external CSS file into the body section with style tag and the @import rule :
Click to expand...
Thanks fekerke, forgot about the import rule!

Is there a reason why you wouldn't just use a stylesheet in the head?
Click to expand...
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
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
129
lmcate
lmcate
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
779
spamjim
spamjim
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
460
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
404
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
321
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top