I am working on a Wordpress theme and want to give the option to choose between a boxed layout and a full width layout.
For this purpose I created a variable in my header.php:
<head>
<?php
$isBoxedLayout = true;
?>
...
</head>
Down in the body I am asking if the variable is set:
<?php if($isBoxedLayout) { echo '<div id="boxed">'; } ?>
...
<?php if($isBoxedLayout) { echo '</div>'; } ?>
This works fine so far. But now I also want to change some css styles if this variable is set. My problem is that I am not so good in PHP yet so my solution would be something like this:
<head>
<?php
$isBoxedLayout = true;
?>
...
if ($isBoxedLayout) {
echo '<style type="text/css">';
echo '#container {width:999px;}';
echo '</style>';
}
</head>
But I think this is not good programming because my header.php file would soon be full of code and confusing if I would add some other options. So logically I should create a variable or an array maybe in the functions.php file and outsource my code like this:
$isBoxedLayout = true;
if ($isBoxedLayout) {
function boxed_css_styles() {
echo '<style type="text/css">';
echo '#container {width:999px;}';
echo '</style>';
}
}
Is my thinking right? And if so how would I access the functions I create in my index.php or header.php or whatever. Or would it work to print the styles in the functions.php?
best regards
Don't over-complicate this by trying to add styles via PHP. Add the ID via PHP...but not the styles themselves.
Since you only apply the boxed ID when the boxed layout is in effect, you can simply define some #boxed CSS styles. These styles will ONLY be applied if the ID exists in your markup...which means they won't come into effect when the ID isn't applied by your PHP.
In other words, put this in your CSS stylesheet, and forget about it:
#boxed {
width: 999px;
}
A flexible option would be to use the body_class() function to add an additional class to your body tag. This would allow you to scope your styles accordingly:
.boxed section {
/* Styles here /
}
.full-width section {
/ Styles here */
}
By adding the class on the body you can effectively target everything. This way you're keeping your styles separate from your markup.
Another option would be to keep your universal styles in one stylesheet and then load an additional stylesheet for your full-width/boxed specific styles. This can be handy for organisational purposes, by does add an extra http request, so you'd need to consider bear that in mind.
Related
We know that in WordPress themes we often provide theme options where a layman who doesn't know the coding can also make changes in font style, color etc.
so when we generate user generated CSS in a php file how does it get implemented in the live website.
Code in css-functions.php →
function selected_typography() {
$output='';
$h1typography = of_get_option('h1typography');
$h2typography = of_get_option('h2typography');
$h3typography = of_get_option('h3typography');
$h4typography = of_get_option('h4typography');
$h5typography = of_get_option('h5typography');
$h6typography = of_get_option('h6typography');
if ($h1typography) {
$output.='h1{
font-family:'.tmarketo_charito_load_google_font_styles($h1typography['face']).';
font-size:'.$h1typography['size'].';
font-weight:'.$h1typography['style'].';
color:'.$h1typography['color'].';
}
h1 a{
font-family:'.tmarketo_charito_load_google_font_styles($h1typography['face']).';
font-size:'.$h1typography['size'].';
font-weight:'.$h1typography['style'].';
}';
}
if ($h2typography) {
$output.='h2{
font-family:'.tmarketo_charito_load_google_font_styles($h2typography['face']).';
font-size:'.$h2typography['size'].';
font-weight:'.$h2typography['style'].';
color:'.$h2typography['color'].';
}';
}
return $output;
}
But the above CSS is not getting implemented on the live website. that means h2 and h1 don't show any change. Any suggestions or a Fix?
Additional information →
I purchased a premium theme → they are also doing it like this → https://www.screencast.com/t/GBvrEvqG98 and it works like a charm in their theme.
The user generated CSS its just 'echoed' either in the head or in the footer, using an action to do so, like this:
function hook_css() {
$my_css = selected_typography();
echo '<style>';
echo $my_css;
echo '</style>';
}
add_action('wp_head', 'hook_css');
For this to work, you need to make sure:
The values you expect from the function and from get_option are correct.
There are no syntax errors.
The style block is showing when inspecting the <head> block.
You are modifying the correct files.
There is no CSS overriding what you are trying to apply.
tl;dr - I'd like to know if it is possible to pass an object into a PHP file with CSS headers, such that I can use this object to manipulate various CSS attributes.
What I'm attempting to do, is allow my PHP/CSS file to interact with the other objects/php files in the webpage, e.g. menu item objects. My ultimate goal is to use PHP in the CSS file to count the number of menu items, and apply the appropriate width value in order to space them out evenly on the page.
I use a very simple color based example below to demonstrate my understanding so far...
I understand that for basic usage of PHP in a CSS file, one can do something like:
<?php header("Content-type: text/css");
$dkgreen = '#008400';
body {
background:<?=$white?>;
}
?>
I also understand that OO PHP can be used to achieve a similar thing, e.g.:
class css {
function __construct($args=array()) {
foreach($args as $key => $field) {
$this->{"$key"} = $args["$key"];
}
return $this;
}
}
$css = new css(
array(
bgcolor => '#00FF00',
fgcolor => '#000000',
)
);
body {
background: <?php echo $css->bgcolor; ?>;
color: <?php echo $css->fgcolor; ?>;
}
Results of experimentation
1) OO style
I firstly attempted to make my css class create a singleton object for the CSS, which I tried to retrieve using $css = css::singleton(), along with the getCss() function, instead of $css = new css(...). The idea was that I wouldn't simply initialise another css object which would be useless to me. Attempts to get the values for bgcolor and fgcolor using:
$css = css::singleton();
$css->getCss()->bgcolor;
were unsuccessful.
2) altering the href in the link tag à la style.php?bgcolor=00FF00&fgcolor=000000
This worked beatifully, when I could easily type $bgcolor = $_GET['bgcolor'];, but doesn't seem to me an elegant solution.
Ideally, I'd like to retain an Object-Oriented approach, but if that's not possible, I'll happily settle for a POST approach, (i.e. allow me to use $bgcolor = $_POST['bgcolor'];) to avoid filling up the source code with ugly parameters in the link tag.
I'd also wish to avoid creating multiple .css files, if that is at all possible.
Any tips?
Many thanks,
Owen.
The easiest way to do this is to make your CSS file a PHP file, and link to it.
<link href="style.php" rel="stylesheet" type="text/css" media="all" />
Then, you parse all your code and dump it out at the end.
$css = ''; # all of your compiled CSS after you do what you need to
header("Content-type: text/css");
print $css;
exit;
Now, your CSS is being parsed how you want it to be, and it's being served as CSS.
I don't think it's possible, and that doesn't fit the purpose of CSS.
Edit:
Well basically, CSS is suppose to contain data that apply a style on a well defined structure. So CSS should not even have variables ( this is a big debate ). The "good theorical way" to solve your problem is to generate html code with proper id and classes, so that you don't have to make any calculation using CSS: you only have to apply a style.
Furthermore:
CSS file are made to be cached. If they change all the time, you may have cache problem, or need to ask the file not to be cached. The you might need to generate inline CSS using PHP, but not a CSS file itself.
I've searched for a way to do this, but since i'm not fluent in PHP, nothing i've tried seems to work. I have a general idea of how it should work, and it seems simple enough, but I can't get it to work the way I want it to.
Basically, I have two links on my site - each one of them links to a different style sheet, which is part of a JS style switcher. The style switcher works fine, except for one thing - I want the links to be conditional. For example, right now, my links look like this:
Make it Dark (alternate stylesheet)
Light it up (main stylesheet)
They both appear at once.
I'd like it to work this way: when the page loads, only the "Make it Dark" link shows. Then when it's on "Make it Dark", only a link to the Main style sheet shows.
This can be seen on the last.fm page at the very top right: http://www.last.fm/
There's two themes there: "Paint it Black" and "Simply Red". Only one link shows at a time so that you can switch between them. How would I be able to do that?
I'd appreciate any help with this. Thanks.
Would it work if in each of your stylesheets you gave one of your links display:none?
You can specify a class on both off them and than add a display: none in the opposite stylesheet to hide it for the user. So you have:
Make it dark
Light it up
And in the two stylesheets you have in the dark one:
.lighten { display: none; }
And in the light one:
.darken { display: none; }
Personally I'd use a session variable and not a cookie.
Something like this should work:
<?php
session_start(); // add to the top of your page
if (!isset($_SESSION['dark_theme'])) {
$_SESSION['dark_theme']==false;
}
if ($_GET['changetheme']!='') {
if ($_GET['changetheme']=='dark') {
$_SESSION['dark_theme']=true;
} else {
$_SESSION['dark_theme']=false;
}
}
?>
This bit, place where you want the link:
<?php
if(!$_SESSION['dark_theme']){
?>
Make it Dark
<?
}else{
?>
Make it Light
<?
}
?>
Or do it using CSS+JavaScript:
The HTML:
Make it Dark
Make it Light
The CSS:
In your "dark" stylesheet:
#darken {
display:none;
}
In your "light" stylesheet:
#lighten {
display:none;
}
JavaScript (note, I'm using JQuery as it's much easier to write than normal JS - just you'll need to include JQuery if it's not already on the site):
(function($, undefined)
{
$('#darken').click(function() {
$(this).preventDefault(); // stops the link from functioning as a link
chooseStyle('none', 60); //call your change stylesheet function
$('#darken').hide(); //hide the dark link
$('#lighten').show(); // show the light link
})
$('#lighten').click(function() {
$(this).preventDefault(); // stops the link from functioning as a link
chooseStyle('none', 60); //call your change stylesheet function
$('#lighten').hide(); //hide the light link
$('#darken').show(); // show the dark link
})
})(jQuery);
if($_COOKIES['dark_theme']){
$show_dark = true;
}else{
$show_dark = false;
}
if($show_dark){
echo "<link rel="stylesheet" href="/css/dark.css"...";
}else{
echo "<link rel="stylesheet" href="/css/light.css"...";
}
When you click "make it dark", just reload the page and modify the cookie.
Or you can tell php to do this in one line, you just need to set cookie when user is switching to another stylesheet change below cookie name according to your need.
echo (isset($_COOKIE['dark_theme'])) ? '<link rel="stylesheet" href="/css/dark.css">' : '<link rel="stylesheet" href="/css/light.css">';
I need to use drupal_add_css to call stylesheets onto single Drupal 6 pages. I don't want to edit the main theme stylesheet as there will be a set of individual pages which all need completely new styles - the main sheet would be massive if i put it all in there.
My solution was to edit the page in PHP editor mode and do this:
<?php
drupal_add_css("/styles/file1.css", "theme");
?>
<div id="newPageContent">stuff here in html</div>
But when I view source, there is nothing there! Not even a broken CSS link or anything, it's just refusing to add the CSS sheet to the CSS package put into the page head.
Variations don't seem to work either:
drupal_add_css($path = '/styles/file1.css', $type = 'module', $media = 'all', $preprocess = TRUE)
My template header looks like this, I've not changed anything from the default other than adding a custom JavaScript.
<head>
<?php print $head ?>
<title><?php print $head_title ?></title>
<?php print $styles ?>
<?php print $scripts ?>
<script type="text/javascript" src="<?php print base_path() ?>misc/askme.js"></script>
<!--[if lt IE 7]>
<?php print phptemplate_get_ie_styles(); ?>
<![endif]-->
</head>
Why is this function not working?
It is not quite clear where you are selecting the template that you have in your example. If you are selecting it from a module then you can just use drupal_add_css in the module rather than the template.
If you have your own theme you can use template_preprocess_page and put logic in there to add the relevant CSS (you can also use it to select the template to use).
I have noticed something weird and it might fix your problem:
drupal_add_css( drupal_get_path('theme','themname') . '/working.css','module' ,'all' , false );
drupal_add_css( drupal_get_path('theme','themname') . '/path/to/folder/notworking.css','module' ,'all' , false );
The first one will work ebcause the style it in the main them folder
The second line will not work because the style is in a sub folder !
Edit:
i think it did not work because i did not write the path the the style file properly :S so please disregard my answer
drupal_add_css( drupal_get_path('theme','test') . '/pages/subpage/style.css','theme');
is working
This function wont work in templates. The reason is that the variable $styles which will hold all the stylesheet html will already have been generated at this point, so drupal_add_css wont work as it adds to that. if you want to do this in your theme, you would probably have to add the css file manually
<link rel="stylesheet" ... />
The other way would be to use drupal_add_css in a module, but you might have a hard time adding the correct css files on the pages you want.
It's possible to use drupal_add_css() inside your template.php file; this page has a good example of how to do just that.
Thanks for the link, wyrmmage. That's very useful. I think the rest of the code in the page is unneccessary. You probably just need these since drupal 6 already automatically check for file existence:
drupal_add_css(path_to_theme() . '/css/yourcss.css', 'theme');
// Add the following to regenerate $styles.
// This is needed for template_preprocess_page() since css is already generated at this point.
$variables['styles'] = drupal_get_css();
Answer was very much to use the CSS Injector module - great little addon!
Here is an excerpt from its project page:
Allows administrators to inject CSS into the page output based on configurable rules. It's useful for adding simple CSS tweaks without modifying a site's official theme. The CSS is added using Drupal's standard drupal_add_css() function and respects page caching, etc. The 2.x brach leverages CTools so CSS can be included with Feature changes (ie. CSS that improves the look of a View can be packaged with the View).
This code inside template.php works for me:
function alagna_preprocess_page(&$vars) {
drupal_add_css(path_to_theme() . '/header_1.css', 'theme');
$vars['css'] = drupal_add_css();
$vars['styles'] = drupal_get_css();
}
explained:
alagna is the theme name
header_1.css is the css file required.
drupal_add_css is expecting a path relative to base path whereas drupal_get_path does not return the path relative to base path.
global $base_path;
drupal_add_css($base_path . drupal_get_path('module / theme','name') . "/styles/file1.css", "module / theme");
You can choose between module and theme accordingly.
Try this
common.inc drupal_get_css($css = NULL)
Parameters
$css: (optional) An array of CSS files. If no array is provided, the default stylesheets array is used instead.
$css = $vars['css'];
// unset the system css files
$unset_css = array
'modules/system/system.css',
'modules/system/system-menus.css',
);
foreach($unset_css as $css_f) {
if(isset($css['all']['module'][$css_f])) {
unset($css['all']['module'][$css_f]);
}
}
// add css
$css['all']['theme'][drupal_get_path('theme', 'openpublish_theme') . '/css/style.css'] = true;
$vars['styles'] = drupal_get_css($css);
I have a (probably not) unique issue with a css background div I am seeking advice on. I am using Wordpress, which creates my pages dynamically. The front page and some other pages are using one type of background (Gradient) while internal pages are using a solid white. Right now I am forced to have two style sheets - main.css for the gradient background, then internal.css for the internal - just for this background div.
Is there a way to use one css file and handle these two background divs easily? I will probably need to use a bit of php...
Essentially I am only trying to pass two different background divs, on either home or some internal pages.
Just use different template files (which you should be doing anyway because of the different looks), and use something like an ID on the body tag to check like this:
<body id="grad">
...
</body>
or
<body id="white">
...
</body>
And use this in your stylesheet:
#grad {
background-image:url(something.png);
}
#white {
background-color:#FFF;
}
Make sure to check out the template hierarchy page in the WordPress codex to see how you can easily create the template files you need. Use #grad in home.php and/or a custom template file that you apply to your front page (if it's static), and then use #while in everything else (category.php, tag.php, single.php, and page.php are probably the basics).
You could use your normal stylsheet on all the pages, with the solid white background set. Then on your front page and other 'special' pages, you could have a tag with the background image that will override the white:
<head>
<link rel="stylesheet" type="text/css" href="main.css" /><!-- This has background-color:white; -->
<?php if(!empty($special)){
echo <<<HTML
<style>
body{
background-color:transparent;
background-image:url('image_url');
}
</style>
HTML;
?>
</head>
Then you'd just set $special to true or something when you're on a 'special' page.
I didn't think of this but here is the code:
<body<?php if ( !is_home() ) echo ' style="background-image: url(images/about_bg.png);"'; ?>>
Put it in the header.
<?php
if(is_home) {
echo '<div class="bg for main page">';
} else {
echo '<div class="bg for internal page">';
}
?>