How to add additional css to wordpress theme?

Question

I checked my blog on tablets and netbooks and it looked a bit bad, so I made an extra css and added to header.php in between :

<head> <link media="all and (min-width: 481px) and (max-width: 768px)" type="text/css" rel="stylesheet" href="tablet.css"> </head>

But nothing happens. How to add an extra .css to make this work ?

Also tried to add this function to themes functions.php, but blog crashes.

wp_enqueue_style('my-custom-style', 'get_bloginfo('template_url') . '/css/tablet.css',false,'1.1','all and (min-width: 481px) and (max-width: 768px)');

What should I add in 'template_url' and what is the simpliest way of achieving my goal?

Thanks!

Andrew, how to add this condition (,'all and (min-width: 481px) and (max-width: 768px)');) to simple media query inside an existing css? — funguy
– funguy, Commented Jul 29, 2011 at 20:02
Why no include it in the header.php? like: <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url') ?/your_css_file/css />" — eveevans
– eveevans, Commented Jul 29, 2011 at 20:19

Sparkup · Accepted Answer · 2011-07-30 00:02:03Z

Try this :

<link rel="stylesheet" type="text/css" href="path/to/your/css/file.css">

Add it to you template header.php file, after <?php wp_head(); ?> and after your last stylesheet.

If this fails add it just before the </head> tag.

Also make sur your the path to your stylesheet is correct, if your not sure use the full path:

<link rel="stylesheet" type="text/css" href="http://www.site.com/path/file.css">

Hope it helps

ayyp · Accepted Answer · 2011-07-29 20:32:20Z

2

You just add the code below into the bottom of your stylesheet and apply the styles that you want for those specifications in there. That's for an exact size though.

@media all and (max-width: 768px) and (min-width: 481px) { Your styles go in here }

The code below this will target a max-width of 768px or a min-width of 481px.

@media all and (max-width: 768px), (min-width: 481px) { Your styles go in here }

edited Jul 29, 2011 at 20:32

answered Jul 29, 2011 at 20:06

ayyp

6,5984 gold badges35 silver badges47 bronze badges

5 Comments

ayyp Over a year ago

Which browser are you targeting and testing in?

funguy Over a year ago

im targeting firefox and chrome and opera. If I open my blog on a normal pc or notebook its fine, netbooks or tablets - crappy.

funguy Over a year ago

lets say I have a custom.css with main css conditions and I want to include into it a conditional css like this: @media all and (max-width: 768px) and (min-width: 481px) { #navigation ul.rss li.sub-rss a { background: url("images/ico-social-rss.png") no-repeat scroll right center transparent; font-weight: bold; margin: 5px; padding: 45px 38px 40px 0; position: relative; right: 5px; }}

ayyp Over a year ago

For any new styles you'd want to apply, you would need to make sure to reset any previous styles. Example: you have body { background:#FFFFFF; width:500px;} in your regular styling but on the other sizes you want it to be 200px. It would be `body {width:200px;}, but the background would still be white because everything cascades down.

funguy Over a year ago

solved, I was targeting a bit different resolution, thanks everyone!

Collectives™ on Stack Overflow

How to add additional css to wordpress theme?

2 Answers 2

Comments

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Related