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.
Related
I need your input and insight on using GLOBALS variable to store all CSS that is generated through Wordpress Shortcodes. I have designed Shortcode that use the following css format:
<style>
#divID1 .blah { /* code */}
#divID2 .blah { /* code */}
</style>
this works well, however while validating through https://validator.w3.org I keep getting errors like below:
- Element style is missing required attribute scoped.
or sometimes..
- Element style not allowed as child of element div in this context. (Suppressing further errors from this subtree.)
Now my question is what if I keep adding that dynamic CSS code to one variable $GLOBALS['custom-css'] .= 'whatever code';
and I can print that variable within <head>. Is this insecure ? OR the $GLOBALS doesn't work on many hosts ? Or it may effect Wordpress site, I don't want to risk and ending up it not working on many different web hosts.
Can someone please explain and/or confirm if that is a right method.
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.
I am trying to use Lettering.js on the site name of my new Drupal 7 website. Here is what I have done so far:
I downloaded the file from Github and put it in a folder called scripts inside my theme. (so it looks like this /sites/all/themes/MyThemeName/scripts/jquery.lettering.js)
Then I added the script to my theme's info file using this syntax "scripts[] = scripts/jquery.lettering.js". I can see that the script is being loaded when I view the page source.
The part I'm having problems with is how to call it. I've been reading the documentation at http://drupal.org/node/171213 but I'm still confused. I assume that I should put the call in the template.php and that I can use $site_name to get access to the site name within the site but I'm unsure where to go from there.
Thanks to anyone who can offer some advice.
All what lettering.js does is to split a text into spans.
<p>Hey</p>
Becomes
<p><span class="char1">H</span><span class="char2">e</span><span class="char3">y</span></p>
See the source code for details: https://github.com/davatron5000/Lettering.js/blob/master/jquery.lettering.js
This can easily done with a preprocess function or in your template using PHP:
$chars = str_split($site_name);
$letter_site_name = "";
for($i=0,$count=count($chars);$i<$count;$i++) {
$letter_site_name = '<span class="char' . ($i+1) . '">' . $chars[$i] . '</span>';
}
If you want to use lettering.js anyway you have to write an additional javascript.
This script has to define a Drupal behaviour which might run letteringjs on all headlines with the class lettering.
(function ($) {
Drupal.behaviors.headline_lettering = {
attach:function (context, settings) {
$("h1.lettering:not(.lettering-attached)", context)
.addClass('lettering-attached')
.lettering();
}
}
})(jQuery);
To expand on the previous answer.
The javascript can be added using drupal_add_js() in template.php:
drupal_add_js($path_to_theme . '/scripts/jquery.lettering-0.6.1.min.js');
And the additional script mentioned above can be added to page.tpl.php as
<script>
(function ($) {
Drupal.behaviors.headline_lettering = {
attach:function (context, settings) {
$(".lettering:not(.lettering-attached)", context)
.addClass('lettering-attached')
.lettering();
}
}
})(jQuery);
</script>
I did not add the .h1 in the script and then I just need to add a class "lettering" to any text and the lettering will be applied.
Then you can use Kern.js to adjust the position of each letter. It produces CSS that needs to be included on the page.
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 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);