Wordpress - where should I place editable CSS - wordpress

Where do I place things like header's image, background color, background image...? Should I simply add them to html code? Or add pieces of the CSS to functions.php?
Also, when I add some code to head section from functions.php - will this be loaded automatically, or should I add something more to the head section myself?

you can change style.css for any css change
and header.php for header section,footer.php for footer section
for home content index.php file
you can call function from function.php file in to these files

If the theme you are using already has the HTML, then just modify the style.css. If the theme doesn't support the image placements that you want, you can either try to modify the HTML files yourself, or ask the theme creator to add it for you. If you modify this yourself, you'll have to remember that future updates to the theme may overwrite your changes.
If you are creating your own theme and don't care about flexibility, then add a spot in the HTML using your tags.

Related

In drupal 9. How can I add custom html between <head></head> Doing a hook or something rather than install a module

I am trying to add custom html between <head></head> Doing a hook or something rather than install a module.
But i cant figure how to doit.
I am using bartik and i make this function
function bartik_add_text_to_header(&$vars, $hook) {//}
but i cant figure how or which function to used.
I try with
drupal_set_html_head('style type="text/css">#import url(' . $GLOBALS[base_url] . '/modules/codefilter/codefilter.css);</style>');
But the drupal_set_html_head looks that is not existing in drupal 8 or 9
You should be using a custom theme with bartik as it's base theme rather than the bartik theme itself.
Just make the minimum file for a theme and set the bartik theme as it's base theme.
You can put whatever you want in the head section by overriding the template file that is currently being used to output that part of the html. For Bartik it is a file named html.html.twig in the core/themes/bartik/templates/classy/layout folder.
You would make a copy this file and put it into your custom themes templates folder so your file is used instead of the original.
To easily find what file is currently being used, you can enable twig debugging so comments are output in your html that show exactly what template files are being used.
Having said all that, and seeing as you are only looking to add css, you probably want to check out this page on Adding stylesheets (CSS) and JavaScript (JS) to a Drupal theme which will show you the different options you have to add js and css.
If you are just after a quick answer.... the function you want may be:
function fluffiness_preprocess_page(&$variables) {
$variables['#attached']['library'][] = 'fluffiness/global-styling';
}

Add comments to wordpress inspect element page

As the title says, I want to add some sort of signature with comments on my wordpress index file, thing is - there are 30 different index files and none of them seems to work
If I understand correctly, it'll just be a case of adding some HTML comments (not PHP comments as they won't show in the source code) in your theme files. Bear in mind that editing a theme won't work if someone else made it and releases updates to it as it'll overwrite your changes if you update it.
The best place to add in the comments is to either open the header.php file and place your HTML comments after the opening <body> tag. If your theme doesn't include a header file, you could always add your comments to the top of your themes index.php file instead.
Your theme should be located within /wp-content/themes/YOUR-THEME/.
Alternatively, you could also place HTML comments between the <head> tags of your theme so they show up a bit higher in the source code. To do this, it's probably best to use an action hook instead. Place this in your themes functions.php file:
add_action( 'wp_head', 'add_signature_to_theme', 1, 0 );
function add_signature_to_theme() {
?><!-- Welcome to my website. --><?php
}
The wp_head action hook documentation is useful to have as reference as well if you'd like a bit more information on what it is and what it does.

CSS classes not getting applied to html code in wordpress

I am actually trying to integrate my static HTML pages with TWENTY TWELVE theme
As far as I understood, I need to add my header section into header.php and footer to footer.php and for the content part I need to add template and for adding CSS & JS function call need to add them function.php
But after doing all this things my CSS classes does not get applied to HTML code which I have added to header section as well as footer section.
After inspecting I came to know my CSS classes are loaded properly but does not get applied.

How to add my own created drop down menu to theme?

I have created my own drop down menu in html&css. So,anyone can guide me how, i can add my self made dropdown menu to my own custom WordPress theme ?
I don't want to use any Plugin because it would not give me same look as my own drop down menu.
Thanks In advance.
Its not clear if you already have any register_nav_menus. If you have any registered menu, you need to call it through wp_nav_menu and use you own css in style.css of your theme. After adding your css in style.css, you need to check this css hierarchy of Unordered List generated by wp_nav_menu.
You can also check Menu_Item_CSS_Classes section in wp_nav_menu documentation.
If your theme don't have any register_nav_menus, add this in your functions.php file to make it more managale in future.
Pretty straightforward. Somewhere in your theme you should see a function called wp_nav_menu:
<?php wp_nav_menu(); ?>
This is the default navigation. Replace it with your own HTML, and add the CSS to the style.css file. If there's any JavaScript, you'll obviously need to include that on the site, too.

How do I use new add_editor_style() function in wordPress?

I found this article:
http://www.deluxeblogtips.com/2010/05/editor-style-wordpress-30.html
I created a child theme using the Twentyten theme as a parent. I am trying to have the WYSIWYG editor use a custom stylesheet.
I added this to my functions.php file:
add_editor_style();
Then I created an editor-style.css file in my child theme's folder and added this:
html .mceContentBody {
max-width:591px;
}
When I go to the WYSIWYG editor and use firebug to check the css that is affecting the .mceContentBody element, I can see that is using my stylesheet, but it is being overrriden by the default editor-style.css sheet from the twentyten theme.
How can I force it to use my editor-style.css file and not the default one?
add_theme_support('editor_style');
before
add_editor_style('tinymce-styles.css');
assuming that your custom css is in your template's root folder.
Try redeclaring twentyten_setup in your theme's functions.php file. Just copy and paste the whole function from twentyten to your theme.
Check your CSS for errors. I spent hours pulling my hair out wondering why wordpress wasn't using my stylesheet. It wasn't even getting included. Turns out i had an extra { in my css.

Resources