Jump to content

Add style tag to html head

sttaq
 Share

Recommended Posts

sttaq Newbie

sttaq

Posted
Posted

Hi

 

I want to add some inline css to the <head> section of my template header.tpl file. I have tried to do it using the following code but when I do this the page does not load at all. By "at all" I mean it does not load a single thing!

<head>
<style type="text/css">
#someID{
    position: fixed;
    bottom: 0px;
    left: 0px;
    background: #fff;
    width: 100%;
    padding: 13px 0px;
    border-top: 1px solid #cecece;
    -webkit-box-shadow: 0px -2px 5px rgba(0, 0, 0, 0.2);
    -moz-box-shadow:    0px -2px 5px rgba(0, 0, 0, 0.2);
     box-shadow:         0px -2px 5px rgba(0, 0, 0, 0.2);
     zoom: 1;
    filter: alpha(opacity=90);
    opacity: 0.9;
    text-align: left !important;
    }
</style>
</head>

I would appreciate if you can let me know what is the mistake that I am making here and the correct way to do this.

 

Thanks in advance

Link to comment
Share on other sites
sttaq Newbie

sttaq

Posted
  • Author
Posted

Why are you doing this in head? Do it in global.css

 

 

I understand that You edit header.tpl file. 

Don't touch this file. Put Your style to global.css of Your template

 

 

Well can you please tell me if it is possible of or not? If it is possible then I want to find out how. If it is not possible then I want to know why its not possible? and yes I am doing this in header.tpl

 

The reason I am doing is because I have run my website through some website analysis tools like Google PageSpeed which are suggesting me that I should inline some small css code to improve load time of above-the-fold content.

Link to comment
Share on other sites
tmk Newbie

tmk

Posted
Posted

I don't know how do you exactly implement your style to header.tpl so it is hard to tell what you are doing wrong.

If you put presented code as is to the header you have two header sections. That couldn't work correctly.

 

Pagespeed analytic tools suggest obvious things but hard coding every style it is not the correct way to optymalize page generation speed. To observe improvements you should implement to header thousands line of style code and it will be not big improvement if any.

 

To optymalize css use ccc function in your admin panel.  

Link to comment
Share on other sites
sttaq Newbie

sttaq

Posted
  • Author
Posted

I don't know how do you exactly implement your style to header.tpl so it is hard to tell what you are doing wrong.

If you put presented code as is to the header you have two header sections. That couldn't work correctly.

 

Pagespeed analytic tools suggest obvious things but hard coding every style it is not the correct way to optymalize page generation speed. To observe improvements you should implement to header thousands line of style code and it will be not big improvement if any.

 

To optymalize css use ccc function in your admin panel.  

 

 

If you want to have it in header.tpl just put style code in between existing head tags, i mean don't make new head tags

 

 

I think you guys did not get my problem. I am not adding another <head>. All I am doing is adding style which look like as below to an already existing HEAD:

<style type="text/css">
#someID{
    position: fixed;
    bottom: 0px;
    left: 0px;
    background: #fff;
    width: 100%;
    padding: 13px 0px;
    border-top: 1px solid #cecece;
    -webkit-box-shadow: 0px -2px 5px rgba(0, 0, 0, 0.2);
    -moz-box-shadow:    0px -2px 5px rgba(0, 0, 0, 0.2);
     box-shadow:         0px -2px 5px rgba(0, 0, 0, 0.2);
     zoom: 1;
    filter: alpha(opacity=90);
    opacity: 0.9;
    text-align: left !important;
    }
</style>

Just to avoid more confusion, the HEAD section is already present and is properly opened and closed. The problem happens when the style tag like above is added to it.

 

Now, whenever I do this the page does not load a single line. I don't see any markup when I view the page source and I don't get any error message. All I get is just a plain blank page.

Link to comment
Share on other sites
sttaq Newbie

sttaq

Posted
  • Author
Posted

I think I have got to the problem and solution but dont really understand whats going on under the hood. This time I am going to show the exact css code which is causing problem.

 

With the following minified css the website does not load:

#cookielaw{position:fixed;bottom:0;left:0;background:#fff;width:100%;padding:13px 0;border-top:1px solid #cecece;-webkit-box-shadow:0 -2px 5px rgba(0,0,0,.2);-moz-box-shadow:0 -2px 5px rgba(0,0,0,.2);box-shadow:0 -2px 5px rgba(0,0,0,.2);zoom:1;filter:alpha(opacity=90);opacity:.9;text-align:left !important}#cookielaw p{padding:6px 0 !important;margin-right:15px}#cookie_close{text-transform:uppercase;float:right}

But with the following the website works:

#cookielaw { position: fixed; bottom: 0; left: 0; background: #fff; width: 100%; padding: 13px 0; border-top: 1px solid #cecece; box-shadow: 0 -2px 5px rgba( 0, 0, 0, .2); zoom:1; filter: alpha(opacity=90); opacity: .9; text-align: left !important; -webkit-box-shadow: 0px -2px 5px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px -2px 5px rgba(0, 0, 0, 0.2)}
#cookielaw p { padding: 6px 0 !important; margin-right: 15px }
#cookie_close { text-transform: uppercase; float: right }

Though I am happy that the last snippet works but I have no idea why the first css did not work!

Link to comment
Share on other sites
sttaq Newbie

sttaq

Posted
  • Author
Posted

if you use styles in tpl files don't forget to use {literal}{/literal} tags

these tags are necessary because css styles code uses brackets, so smarty compiler treats these brackets as a smarty syntax

 

aaah I see, that explains a lot, many thanks

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...