I've added theme support for a custom background to my WordPress theme, as below, but the background colour is not actually being applied (note that the options are showing correctly in admin though).
According to the docs "When the administrator sets custom values for the theme, WordPress generates an extra style sheet in-line with the HTML headers." However, this is not the case.
The <body> tag is declared as <body class="home blog logged-in admin-bar customize-support">, with the promised custom-background class neither declared in the header nor applied to the <body> tag.
Is there something I'm missing here?
Here is how I am adding custom background support.
$ps_background_defaults = array(
'default-color' => '000000'
);
add_theme_support('custom-background', $ps_background_defaults);
The problem was that I hadn't saved the custom background settings, and once I'd done that everything was fine.
This does seem like an issue with the core to me, as the default is ignored, and I am off to do some research on Trac now. I'll update with a ticket if one is opened.
Related
I'm developing a Wordpress Headless website using NextJS.
In the blog section, I'm using Gutemberg to render text, buttons and links.
I would like to be able to assign each of these elements its own color and style using the Gutemberg color palette.
So far, I was able to get the "general style" of those elements by using this package: https://www.npmjs.com/package/#aamodtgroup/gutenberg-styles but I couldn't get the style of classes such as "has-purple-color", "has-orange-text" etc..
I'm getting the content of each post through the dangerouslySetInnerHTML method
<div dangerouslySetInnerHTML={{ __html: post.content.rendered }} />
HTML wise everything is working correctly: I can see every elements that has been added to the post content, except the custom CSS style.
I was wondering if there's a way of doing this! The idea is to allow my client to be able to customize the content of blog posts through WP Backend using the Gutemberg interface and then see the output on the NextJs frontend.
Thank you!
Recently, as of version 5.9, a new Global Settings and Styles API was added to enable access to global settings and styles. This may be used to get the style of classes like "has-purple-color". The wp_get_global_stylesheet() merges core, theme and user data like the color presets edited via the Editor:
<?php
wp_get_global_stylesheet( $types = array() ); // Supports 'variables', 'styles', 'presets'
Ref: https://developer.wordpress.org/reference/functions/wp_get_global_stylesheet/
The styles color palette also exists in the database, as a wp_global_styles custom post type if you wish to see all the actual values:
SELECT * from <database_name>.wp_posts
WHERE post_type = 'wp_global_styles'
AND post_name = 'wp-global-styles-<theme-slug>'; # eg: wp-global-styles-twentytwentythree
I’m inside the New Post page on WP-Admin, where you can create a new post.
At the right column, there’s the category selector, in which you select the category for that new post.
I have something like 15 categories, and therefore the category box is showing with a scrolling bar. Since I need to automate some post creation, I need all the categories to be visible right away, without having to scroll.
So I found the css file that manages the height of the category box (it’s inside /wp-admin/css/edit.css and //wp-admin/css/edit-rtl.css) and there I changed the CSS files to allow a bigger height by default on that box.
However when I open the new post page, it still shows the small box in categories, and when I see the CSS rule, the change I made is not visible. It’s like the CSS is cached or something. I already made sure that my browser is not caching it.
The problem I think it’s because the CSS rules are not pulled directly from CSS files, but from this file:
http://www.website.com/wp-admin/load-styles.php?c=0&dir=ltr&load%5B%5D=dashicons,admin-bar,buttons,media-views,common,forms,admin-menu,dashboard,list-tables,edit,revisions,media,themes,about,nav-menu&load%5B%5D=s,widgets,site-icon,l10n,wp-auth-check&ver=4.7
That file seems to go and gather the CSS information from some place (which I assumed was the CSS files in the wp-admin/css/ folder, in which I could find the exact same CSS rules that were applied to the category box) but for some reason, it’s not retreiving the updated CSS file. Or something else is happening (Server side caching the PHP response and therefore retreiving all the time the old response?)
I wouldn't recommend tampering with core admin files, as any changes you make could be lost from a WordPress update.
The proper way to do it is through a custom function added to your theme or child-theme functions.php file:
add_action('admin_head', 'custom_admin_css');
function custom_admin_css() {
echo '<style>
/* remove scrollbar from categories panel */
.categorydiv div.tabs-panel { max-height: none !important; }
</style>';
}
Another options that will allow you to have CSS for individual pages is to use this OH header/footer plugin. Once you install the plugin you can then add your CSS in the header textarea of the pages admin. Just make sure you enclose your CSS within a <style></style> tag.
I have installed a WordPress theme which features headings like 'our sponsors' or 'featured posts'. When I inspect the element using google chrome, it shows that it is within a tag called 'cufontext' which I have never come across before (i think it is to do with javascript).
Is it possible to change the content within the cufontext tag so that it says something different like 'about me' instead of 'our sponsors'?
Thanks
Cufon is a font-replacement technique that uses javascript to write fonts from a font file to your browser.
So those <cufon> tags are generated when page renders and are not in the template files.
Simply find where 'our sponsors' text is located and replace it to your likings.
The most possible location for that text is:
in post / page as a title
in the template as static text
I'm running into a curious problem with the Twenty Eleven theme. I have copied the theme to my own folder (using it to create a new theme...I should have gone the child-theme route but...I didn't). So far all is good. Now I want to create a custom verson of the sidebar-page.php template.
I grab the template page that has a sidebar: sidebar-page.php
I make an exact copy, changing the name to sidebar-page2.php
I change the template name of the new file from "Sidebar Template" to "Sidebar Template2"
I upload (no changes to the structure of the template)
I change a page's template to "Sidebar Template2" from "Sidebar Template"
Load the page, it looks different. It's almost as if the content is more centered, the H1 tag for the page is moved down, to the right and is bigger.
I can't find any info on this. I found one post where someone had the same problem (on another site) but no solution.
I had the same problem and found the answer on another page:
Basically, the problem is that it's adding another class to the body tag, in this case the 'singular' class. So here's something you can add to your functions.php file to filter that class for the sidebar-page2.php template file (or any other file, just replace sidebar-page2.php).
add_filter('body_class', 'adjust_body_class', 20, 2);
function adjust_body_class($wp_classes, $extra_classes) {
if( is_page_template('sidebar-page2.php') ) :
// Filter the body classes
foreach($wp_classes as $key => $value) {
if ($value == 'singular') unset($wp_classes[$key]);
}
endif;
// Add the extra classes back untouched
return array_merge($wp_classes, (array) $extra_classes );
}
My guess is that you have an unbalanced tag somewhere. Check to see that the is where you expect it. You may want to use Firebug or Chrome's Html viewer to verify the html is exactly the same.
Another possibility would be that the CSS is looking for a specific tag structure to which to apply styles. Again, Firebug or Chrome could help you locate this.
Without posted code, however, it would be difficult to answer it directly.
Just had the same problem!
It seems that the css classes on the body tags are different. On the copied template, the page has singular class, while the actual sidebar-page template doesn't. Clearly, there must be some logic in the theme that checks if the sidebar-page template is being used or not and alters the css classes. Not sure where this logic is in the theme yet, though.
sidebar-page template:
<body class="page page-id-2 page-template page-template-sidebar-page-php logged-in admin-bar single-author two-column right-sidebar">
side-page-copy template:
<body class="page page-id-2 page-template page-template-sidebar-copy-page-php logged-in admin-bar single-author singular two-column right-sidebar">
I use my custom block for displaying a flash game at the front page of my Drupal 7 installation, but there is also the annoying message:
<div id="first-time"><p>No front page content has been created yet.</p>
<div class="item-list"><ul><li class="first last">
Add new content</li>
</ul></div></div>
below it and I can't remove it. Is there please a hook for adding custom CSS? In my module I would like to make the #first-time light grey or invisible.
I prefer not to add a blank content just to get rid of that text.
Thank you!
Alex
UPDATE:
I've added the following to my module:
function game_init() {
drupal_set_message('XXX init called XXX');
if (drupal_is_front_page()) {
drupal_add_css('#first-time {color: green;}', 'inline');
}
}
but don't see that CSS-code or XXX string inside my front page.
UPDATE2:
Oh, I had to clear the cache and now it works (the Drupal docs seem to be wrong here - there was written that 'inline' CSS is not cached...)
Hiding the CSS is the WRONG way of doing it. why did you created your content as a Custom Block?
you should create a "Page" and set this page as front page in the Configuration->Site Information.
Whatever. you can also use any of these options but is not recommended.
you can also also add a BlankPage by Adding only the Title(then hiding it in PHP on page.tpl.php)
you can add your css in /templates/themes/bartik.info
you can call drupal_add_css on the _init() hook of your custom module.
Blocks are used to display information in every page(although we can set to display only on certain pages). Say For Example. A Menu, or A Shopping Cart etc.
If you want to add some CSS for a module, you should use drupal_add_css()
Why not simply add this CSS to your theme?