I am trying to set up a template that will apply some .css code to hide the header, footer and breadcrumbs on my landing pages.
I've created a css folder in my child theme, created a .css file with the code below and works perfectly with the function under the code:
#header-wrap, #navi-wrap.site-header, #footer-wrap, #footer.clearfix, #sidebar.secondary.clearfix, #breadcrumbs, .page-title {
display:none
}
Function in my child theme:
function wpse_enqueue_page_template_styles() {
if ( is_page_template( 'template-fullwidth.php' ) ) {
wp_enqueue_style( 'page-template', get_stylesheet_directory_uri() . '/css/landing-page.css' );
}
}
add_action( 'wp_enqueue_scripts', 'wpse_enqueue_page_template_styles' );
I have another .css code though, that changes the link colour from the website default Blue to White, in my Adidtional CSS for my theme and it works, but I would like to include it in my .css file, so I don't have to apply it to every page separately:
.page-id-2934 a.wp-block-button__link.has-white-color.has-text-color.has-background.no-border-radius{
color:white;
}
Problem is, when I add this code as it is (without the page id, obviously) in my existing .css file, an exclamation mark shows up on the left and when I hover it tells me to not use adjoining clases, that a,wp... it's Overqualified and I should use only .wp-block-button__link without element name and I don't know what that means.
When I leave only .wp-block-button__link {color:white;} it's not working.
I also have some pages with different buttons and the code that works in the Additional CSS is
.page-id-3547 a.uagb-buttons-repeater {
color:white;
}
...But when I put that in the .css file I get the same message: with a... is overqualified and when I leave just .uagb-buttons-repeater {color:white;} it doesn't work.
So, long story short, I would like to add the white link .css code in the .css file, so that my landing pages button links are white, not blue and I was hoping to add both codes, so that it works with both button types.
Alternatively, I could just use the second button type (a.uag...) and change it on the existing pages.
Thanks
Related
I am having a problem with a site I am developing with wordpress.
It happened after upgrading to the latest version (4.7)
Anyway. Go to the site www.scientized.com (just dummy content for now), and go the source. At around line 124 you see the tag <style type="text/css" id="wp-custom-css"> and then after some css is loaded.
The thing is, is that this some of my old css code from way early. To make life easier and to isolate the problem I have delete all css in my child themes style.css as well as the custom css in the customizer, and delete jetpack just to be sure. Yet this css is being loaded from somewhere. I have file explored the crap out of my site trying to find where this is located, but couldn't find anything.
I have found that in the wp-includes/theme.php there is this function:
function wp_custom_css_cb() {
$styles = wp_get_custom_css();
if ( $styles || is_customize_preview() ) : ?>
<style type="text/css" id="wp-custom-css">
<?php echo strip_tags( $styles ); // Note that esc_html() cannot be used because `div > span` is not interpreted properly. ?>
</style>
<?php endif;
}
so this wp_get_customer_css() function is calling the old css from somewhere -- I tried to follow the functions back to see where - but my php is not that good and got lost. Does anyone know where this is being loaded from?
I think I need to know where the JetPack custom css location is. I have read it is generated dynamically -- so I am not sure how to go about the problem.
Edit: I dont get the text box in the custom css area in customizer. Where is this text located?
Edit: I dont get the text box in the custom css area in customizer. Where is this text located?
The Additional CSS content is stored in wp_posts database table as a separate record. It's post_type is set to custom_css. To find which post is assigned to the field, you need to look in the option theme_mods_{your theme's slug}.
For example, here is the one from my test Sandbox site which is running the Genesis Sample theme. The post ID is 31, per the key custom_css_post_id.
How do I check my site?
You can go directly into your database via phpMyAdmin and look in the wp_options table. Or...you can do this:
add_action( 'init', 'check_custom_css_post_id_theme_mod' );
function check_custom_css_post_id_theme_mod() {
var_dump( get_theme_mods() );
}
The above code will display the theme mods for your current theme. Note the one that is keyed as 'custom_css_post_id'. That one holds the ID to the post for the CSS.
How to Remove It
To remove a theme mod, you use remove_theme_mod( 'custom_css_post_id' );. See codex for the documentation on this construct. It will remove the binding between the Additional CSS. How? It deletes the sub-option.
Note, it does not delete the post record, meaning you'll have an orphaned record in wp_posts.
The wp-custom-css is loaded from custom css & js
I have developed my own custom theme for WordPress. Now recently I installed my theme under WordPress 3.9.1 and I have noticed a rather annoying message which appears on the second and third pages of my site. The message appears in the footer area. It does however not appear on the home page. The message conveyed is as following:
site name proudly powered by Wordpress Entries(RSS) and Comments(RSS)
Now one solution I have seen is to put the following into the style.css. however it does not work.
#site-generator{
display:none;
}
The second solution is to modify the footer.php file and remove a block of php code, now interestingly enough my theme does not contain a footer.php file. Just wondering is it some WordPress system file pushing out the message on my theme.
Any help greatly appreciated.
If you call get_footer() anywhere in your theme, but your theme doesn't include a footer.php, then a footer template is provided for you automatically:
If the theme contains no footer.php file then the footer from the default theme wp-includes/theme-compat/footer.php will be included.
This "theme compatibility" footer outputs a standard footer which includes the lines:
<?php printf(__('%1$s is proudly powered by %2$s'), get_bloginfo('name'),
'WordPress'); ?>
<br /><?php printf(__('%1$s and %2$s.'), '' . __('Entries (RSS)') . '', '' . __('Comments (RSS)') . ''); ?>
Which I'm pretty sure is where your "site name proudly powered by Wordpress Entries(RSS) and Comments(RSS)" will be coming from.
So, check your theme files for "get_footer()". If you don't have a footer.php, then you probably don't want to be using that.
However, it would be normal to include a footer.php so you can have standard footer code across all pages, for doing vital things like calling wp_footer() on every page, which is something you must do in a theme.
wp_footer is a standard hook point for plugins, themes, and WordPress itself to inject scripts, and anything else necessary, just before the closing of the HTML body, </body>. It's how the admin menubar gets output, for example, and often plugin Javascript. So you absolutely want it called at the bottom of every template, and providing a footer.php that does this (and closes your <body> and <html> tags, etc.) and including it from all of your template pages with get_footer() is the normal way.
If your current code works well and produces valid HTML while using the standard "compatibility" get_footer(), then personally, I'd add the bare minimum footer.php to your own theme:
<?php wp_footer(); ?>
</body>
</html>
Your CSS should probably say something more along the lines of
.site-generator {
display: none;
}
or if that doesn't work you could always do
.site-generator {
display: none!important;
}
What you have is missing the '.' which refers to the class 'site-generator'. It might also be an ID, in which case, it should look like
#site-generator {
display: none;
}
If you'd rather remove it from the theme, you could let me know what theme you're using, and I can take a look at where it is occurring in the theme.
I know this can be done only by making some changes on the file footer.php.If you can't find the footer.php file, look for another PHP file with "foot" or "footer" in the filename.
Just see a detailed explanation here.
If you're not using a footer.php file, the footer info must be in the bottom of index.php and page.php. My hunch is that the generator was removed from your page file, but not the index file. I would check that file and make sure the code isn't there.
If that doesn't work, you need to see what the css selector is surrounding the generator. If you right click on the sentence within your browser, you should get some sort of 'inspect element' option. (I use Chrome, but other browsers have similar tools.) Inspect the element and you should see some sort of class or id to target. It may be a
<div id="example">
or
<p class="example">
Find the id or class and modify your css, i.e.:
for an id:
#example {
display: none;
}
or for a class:
.example {
display: none;
}
If the generator is being added by an external source you may need to add !important.
.example {
display: none!important;
}
Good luck!
Another route would be copy the footer.php file in your theme's directory and paste it into a child theme. Open up the footer.php file in your child theme and delete the text with the sitename and powered by. It should be wrapped in php tags.
Easy! If your theme doesn't have a footer.php file (for example if you are creating a theme from scratch), create it and leave it empty. It will just disapear the annoying "proudly powered by..."
Example of theme/:
style.css // theme info
header.php // empty file <----
footer.php // empty file <----
index.php // file with wordpress loop, etc.
you can edit your theme in admin panel, (footer.php)
if you see an error on your homepage when you edit the footer.php you can use javascript to delete that. But first you should add tag with an id, then access that id in javascript like;
function myFunc(){
document.getElementById('id').innerHTML ="";
}
then edit your body tag like
<body onload="myFunc()">
I have written a little PHP script that I have included via short-code into a WordPress page. Is it possible to only use a custom css file in the PHP script without it inheriting CSS elements from the WordPress theme?
If yes than how ?
Any styles included after the original stylesheet will override the previous styles (as long as they are qualified to the same level).
A better way of overriding styles would be to give your new page an ID and then in your new stylesheet you can use #NewID .cssSelectorToOverride {\*new styles\*}
This is a good article that can teach you about css selectors and precedence: http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/
Generally if the new style file is called after the previous file it will be over wridden, or else specify the style in the tag it self if its critical in some manner.
I hope this will do, if want more assistance provide example with your work.
thank you
open function.php file inside your root directory of WordPress theme. and just insert this function PFB, just change the directory, for js you don't need to connect a separate file because you can use footer.php and insert your js code in script tag it will work accurately.
add_action( 'wp_enqueue_scripts', 'radliv_child_enqueue_styles' ); function radliv_child_enqueue_styles() { wp_enqueue_style( 'custom-css-style', get_template_directory_uri() . '/inc/assets/css/custom.css' ); } ;
You have to do two things:
give your snippet a parent div id, say "#mySnippet"
At the bottom of your css file, ad a section for #mySnippet elements. It is important to be at the bottom so it can override other properties if you must
A custom CSS files won't always work with wordpress because the platform requires a certain file structure, and if I'm not mistaken, all your css code has to be in style.css. This is why your snippet code has to be in style.css at the bottom (preferably well isolated from the rest with a comment line).
Now all the elements that you need to change would simply be preceded by #mySnippet. For example, your P tags in the snippet should be targeted as such:
#mySnippet p {
property:value;
}
This should take care of it..
Here is screen shot : http://d.pr/i/QhkF
My theme is : http://www.templatemonster.com/wordpress-themes/37712.html
Any idea?
If you want to fix the content area of an editor of wordpress, then the only way way to do this by adding the custom css to your default template.
To do this go to your default template and add the below line to your functions.php.
suppose i have given a name for my custom css file like test.css.
add_editor_style('test.css'); //in functions.php
and then create a file named test.css (or whatever) in your theme directory and put this line of code inside it:
html .mceContentBody {
max-width: 400px !important; // whatever improbable size you want
}
When you personalize your site you'll need to go to site styling > custom CSS and add this script :
body {
overflow-x: hidden;
}
It will enable your horizontal scroll.
I'm getting into wordpress and I've been following some pretty good tutorials and reading through the codex but I've encountered a problem which I can't seem to find the answer to anywhere else. Eventually my plan is to create an interface for users of my theme that will allow them to change colors, widths, positioning, etc. of certain elements in the template. Basically it will be a php file that will generate a css document. For right now though all it does is echo a sentence. I'm not sure if this is technically a "plug-in" but when I try to put it in the plugins folder, I end up with a 404 error. I know the file is there and I have triple checked the path. I have also tried navigating to the php file directly in the url but I still get a 404 error. I have also tried using the plugin template. It echoes the sentence when I click "activate" in the plugins manager, but it does not work at all when calling it from the functions.php file. Any help is greatly appreciated.
Here is the code which I have placed at the end of my functions.php:
//begin template specific*******************************************************
//------the function below styles the wordpress admin menus.-------
function custom_style() {
echo '<style type="text/css">#adminmenu .wp-menu-image img {padding: 0px !important; margin-left: -3px;}</style>';
}
add_action('admin_menu', 'register_custom_menu_page');
add_action('admin_menu', 'custom_style');
//------this function adds the template specific menu item.---------
function register_custom_menu_page() {
add_menu_page('Epsilon', 'Epsilon', 'add_users', plugins_url('epsilon/eps-manage.php', eps-manage.php ), '', content_url('themes/epsilon/images/eps-icon.png'), 6);
} // this function creates the correct path as far as I can tell, but when I click the link button in the admin menu, I get the 404.
//------this function hides the editor option under the appearance menu ----------
function remove_editor_menu() {
remove_action('admin_menu', '_add_themes_utility_last', 101);
}
add_action('_admin_menu', 'remove_editor_menu', 1);
Why am i getting this 404 error and is there a more correct way to do this?
You are trying to merge a plugin and a theme. plugins_url will only load up the file of a registered and activated (not sure on the activation 100%) plugin, As you are developing a theme it is better to have your management files relative to your theme folder, but to be honest for this type of job as you are a begginer I would keep everything in functions.php and use functions as the callbacks to your menus.