i need some help with linking css to a php file.
This was completed by someone else and now i need to fix it. We have the main css that controls the look and feel of the entire site. The other CSS is just for the accordions page. that needs to be added in.
Current links include:
<!-- CSS Linking -->
<link href="css/template.css" rel="stylesheet" type="text/css" />
<link href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/accord.css" rel="stylesheet" type="text/css" />
If i remove the ?php echo from the second one it doesn't work, but if i leave it in there the css/template.css doesn't work.
Basically if both are in there are the same time they one doesn't work. Is there are way to resolve this?
The answer was that in the css of the second file there was an element of code that was overwriting the other file. The people had a body element. This has been removed and now both working together well.
Related
For example, my site has 5 CSS files like this...
<link rel="stylesheet" href="/templates/purity_iii/css/custom_marketing.css" type="text/css" />
<link rel="stylesheet" href="/templates/purity_iii/css/custom_gps.css" type="text/css" />
<link rel="stylesheet" href="/templates/purity_iii/css/custom_fleet.css" type="text/css" />
<link rel="stylesheet" href="/templates/purity_iii/css/custom_service.css" type="text/css" />
<link rel="stylesheet" href="/templates/purity_iii/css/custom_corporate.css" type="text/css" />
Every page of the site will be in one of those "categories" (i.e. marketing, gps, fleet, service or corporate). And this is indicated by a class on the HTML tag. So something like this at the top of every page...
<html class="gps">
I currently have EVERY page calling all 5 style sheets listed above, but it only NEEDS the corresponding style sheet, so I'd like to be efficient if possible.
Is there a way using PHP (or whatever makes sense) to essentially search the tag's class for "gps" or "fleet" (etc.) and if, for example, it found "gps", I could then echo only that style sheet, i.e...
echo "<link rel="stylesheet" href="/templates/purity_iii/css/custom_gps.css" type="text/css" />";
This totally depends on how PHP generates your HTML. Another possibility is to do this with JavaScript. You can do it like this:
<script type="text/javascript">
var file = 'templates/purity_iii/css/custom_' + document.documentElement.className + '.css';
var link = document.createElement('link');
link.href = file;
link.type = 'text/css';
link.rel = 'stylesheet';
document.getElementsByTagName('head')[0].appendChild(link);
</script>
You can for example place the code above between <head> and </head>. Not really a valid answer to your question (PHP solution), but you could consider this as an alternative.
This seems like a poor strategy, albeit I don't know the size of your CSS files and other parameters.
How different are these pages as far as their style goes? From the file names above it looks like you might have a lot of redundant (duplicate) CSS selectors in each file. How much of the CSS in each of those files is actually unique? Is it 5k? 10k? 50k? If it's fairly small, go ahead an put it all in one file. By placing it in one file all the CSS for all the pages of your site will be cached in the user's browser and no additional requests would be needed for subsequent pages.
If combining all files and you have a 500k file and 250k is for a single page then splitting it would make more sense.
A PHP Solution
I'm guessing that your setting the CSS class on the <html> tag with PHP. If so, why not check the value of that variable in your PHP script and add the appropriate CSS file.
Something like this:
<html class="<?php echo $page_class; ?>">
<head>
<link href="custom_<?php echo $page_class; ?>.css">
</head>
This is advice is fairly general but hopefully it points you in the right direction.
try something like
<?php
if($page_type = 'gps')
{
?>
<link rel="stylesheet" href="/templates/purity_iii/css/custom_gps.css" type="text/css" />
<?php
}
elseif($page_type = 'marketing')
{
?>
<link rel="stylesheet" href="/templates/purity_iii/css/custom_marketing.css" type="text/css" />
<?php
}
?>
I am stumped. I am using includes to import a style sheet. If I add a new style to the style sheet, generated pages will not display ANY of the new css. If I change an old css rule it WILL display the change. I thought it might be a cached file of some kind, but I have cleared the cache in all testing browsers and the problem persists.
At first I thought it was a WAMP issue, but the problem happens when I move it all live as well so now I am thinking I am doing something wrong with the includes....
<link rel="stylesheet" type="text/css" href="css/foundation.css">
<!-- Included Custom Overides -->
<link rel="stylesheet" type="text/css" href="css/Custon_Foundation_Overides.css">
<!-- Supersizer CSS -->
And this is simply my include...
<?php require("Includes/HEADER.php"); ?>
Again, all the old CSS works fine, just any new additions to any of the style sheets will not display.
Thanks
<link rel="stylesheet" type="text/css" href="css/Custon_Foundation_Overides.css">
Maybe "Custon_Foundation_Overides.css" is a typo and you meant "Custom_Foundation_Overrides.css" or maybe you have to upload the file with correct letters capitalization.
Sounds like a browser cache issue. A simple way to fix this while maintaining good caching practices would be to pass the file make time as a query var to the file.
<link rel="stylesheet" type="text/css" href="css/foundation.css?ver=<?php echo filemtime('css/foundation.css');?>">
This will generate a string like:
<link rel="stylesheet" type="text/css" href="css/foundation.css?ver=1382564850">
This way when you update the file your browser will think its a new file and cache that, but as long as the file remains unchanged it will have the same name and maintain the browser cache.
Help!!! My worst nightmare has come true. My site is broken. It happened after attempting to install some PHP scripts to automatically minify and concatenate CSS and JS files. These were MISER and Minify. Each one created problems, so I took them out. Now none of the styles are showing, despite the fact that the CSS files are referenced properly. I had backed up the site prior to making these changes, but restoring the backup does nothing to fix the problem. Does anyone have any ideas? I am in crisis mode and nothing I do seems to fix the problem!
The following code is invalid:
<link rel="stylesheet" href="/themes/C5-LR/css/foundation.css'); ?>" />
<link rel="stylesheet" href="/themes/C5-LR/typography.css'); ?>" />
<link rel="stylesheet" href="/themes/C5-LR/css/main.css'); ?>" />
'); ?> should be removed in each link.
<link href="/themes/C5-LR/css/foundation.css'); ?>" rel="stylesheet">
<link href="/themes/C5-LR/typography.css'); ?>" rel="stylesheet">
<link href="/themes/C5-LR/css/main.css'); ?>" rel="stylesheet">
All these links are broken, remove ); and you should be good just like the above answer. You only need to reference those if you are using an
#import url('some-css-file.css');
instead of
I'm attempting to link my CSS file with my header.php file for a Wordpress site I'm working on, but I'm having a little trouble following along.
I was told to set it up like so:
<link href="<?php bloginfo('stylesheet_url');?>" rel="stylesheet">
Below is my current code:
<link href="<?php bloginfo('/style.css');?>" rel="stylesheet">
However if you look at the current state of the site, http://thenerdup.com, it's obvious that the CSS file is not linked properly.
For what it's worth, this is the tutorial I'm following along with: http://blog.teamtreehouse.com/responsive-wordpress-bootstrap-theme-tutorial
I'm currently on the part about editing the header.
Thanks for any help.
Actually it should be
<link href="<?php bloginfo('stylesheet_url');?>" rel="stylesheet">
So it'll echo/print the url of your stylesheet.
Here bloginfo() is a function and stylesheet_url is a parameter of this function. There are other parameters too, for example if you write bloginfo('name') then it'll print the name of your blog.
Also you can use
<link href="<?php echo get_stylesheet_uri();?>" rel="stylesheet">
Read more at Codex.
I have top section and footage section common on all pages of my website. I have css classes defined for these sections. What I want to do is to create common file of classes of these two sections and use it on every page, so that if I want to edit something in this section, I have to do it at one place only.
I have different css for middle section of each web page. So if I want create one common css file for top and bottom section, I have to have two css files for one web page. So my real question is can I have two css files for one web page? If yes, how to include and manage them? If no, is there any way to achieve my purpose?
And the best solution will be if I don't need to change html of each page also. If I can create an html page which has top and bottom section. And use this html page on every web page. It will be very useful, as it will save many edits, if I want to change something.
It is not a problem to link two different style sheets:
<link rel="stylesheet" type="text/css" href="commonStyles.css" />
<link rel="stylesheet" type="text/css" href="specificAboutUsPageStyle.css" />
You can have multiple CSS files for a web page, like so:
<link rel="stylesheet" type="text/css" href="header_footer.css"/>
<link rel="stylesheet" type="text/css" href="main.css"/>
Within the header_footer.css, define your styles, for header and footer.
Since your using php (according to your tags) as your scripting language you can use php includes to create your header, main content and footer.
Page: MainContent.php
<html>
<head>
<link rel="stylesheet" type="text/css" href="headerStyles.css" />
<link rel="stylesheet" type="text/css" href="mainStyles.css" />
<link rel="stylesheet" type="text/css" href="footerStyles.css" />
</head>
<body>
<?php include("header.php"); ?>
<p>Main Content</p>
<?php include("footer.php"); ?>
</body>
</html>
Your header.php and footer.php then contain your code for those respective pages.
Personally I wouldn't recommend separate style sheets as it will increase your page load time because the client needs to make separate calls to retrieve these files. I'm sure you have common styles and creating one stylesheet will be more efficient to maintain.