I'm trying to understand how create a Drupal 8 custom theme. I've some questions about that, and i can't find a real answer on documentation or else. Can somebody help me please ?
I've created a libraries.yml and theme_info.yml with theses informations :
name: Cosplay Academy
type: theme
description: 'A cuddly theme that offers extra fluffiness.'
core: 8.x
libraries:
- cosplayacademy/global-styling-and-scripts
regions:
header: Header
primary_menu: 'Primary menu'
secondary_menu: 'Secondary menu'
page_top: 'Page top'
page_bottom: 'Page bottom'
highlighted: Highlighted
featured_top: 'Featured top'
breadcrumb: Breadcrumb
content: Content
sidebar_first: 'Sidebar first'
sidebar_second: 'Sidebar second'
featured_bottom_first: 'Featured bottom first'
featured_bottom_second: 'Featured bottom second'
featured_bottom_third: 'Featured bottom third'
footer_first: 'Footer first'
footer_second: 'Footer second'
footer_third: 'Footer third'
footer_fourth: 'Footer fourth'
footer_fifth: 'Footer fifth'
global-styling-and-scripts:
version: VERSION
css:
theme:
css/plugins/bootstrap.min.css: {}
css/style.css: {}
css/skin-modes.css: {}
css/icons.css: {}
css/plugins/horizontal-menu.css: {}
css/colors/color6.css: {}
I see my css files in my html markup, but there is a lot of css files before it. Why ? Can i remove them ?
Also, i'm trying to display an image into a data-image-src and it won't shows up :/ When i look at my html markup and when i copy the image url, it's work, i can see it, but i can't see it into my page... I'm totally lost :/
As you can see below, my css files are loaded at the end, and my image doesn't appeared...
Extra css files:
The extra css files you are seeing are added by drupal core and various modules that have been enabled. I can see by what css files are included, that you are logged in when viewing this page, which, for example, has made the toolbar css be included on the page. Most of these css files would not be included when viewing the page as an anonymous user.
You should not worry about these, when putting the site live, you would set css and javascript aggregation under the "performance" settings and these would be combined into just a few files and only include what is needed.
data-img-src:
I am not sure what you are expecting to happen by adding 'data-img-src' ??
To set the image path on an img tag, you just use the 'src' attribute.
Any attribute that begins with 'data-' is just meant to be a data store, that, for example, you may want to use with some javascript.
More info on data attributes:
https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
https://www.sitepoint.com/use-html5-data-attributes/
https://www.w3schools.com/tags/att_global_data.asp
Regarding removing of Drupal stylesheets in your custom theme... you can add something like this into your .info.yml
stylesheets-remove:
- core/assets/vendor/normalize-css/normalize.css
- core/modules/system/css/system.module.css
- core/modules/system/css/system.theme.css
- core/modules/views/css/views.module.css
to have them removed.
Related
I'm building landing pages with the amazing Gatsby framework (version 2.16.1).
Everything would have worked perfectly, except that I can't find a way to make changes to the HTML that's being loaded before any script is loaded (the 'over-the-fold' initial HTML).
For example, if I change the HTML's background color in Gatsby - Users can wait up to 5 seconds since the 'over-the-fold' initial HTML is displayed, until the background color is applied.
I know about gatsby-browser.js and the ability to make global CSS files, but that's no use for me as I use a different color or background-picture for each landing page.
My question is: Can I affect the first loaded HTML (differently for each Gatsby page) in Gatsby or React?
Illustration: I color the background color as yellow, but the flow is like this -
HTML is first displayed (background=while) -->
3-5 seconds later -->
all scripts are loaded, and background changes to yellow
#ksav answered the question in a comment to the question! Thank you!
The answer is using a function called onRenderBody under the gatsby-ssr.js file, as explained in the article that was mentioned: https://www.gatsbyjs.org/docs/custom-html/
exports.onRenderBody = ({setBodyAttributes,pathname,}) => {
// Differentiate between the landing pages here
switch(pathname) {
case 'landing_page_a':
case 'landing_page_b':
}
// Affect the HTML that gets loaded before React here
setBodyAttributes({
style: {
backgroundColor: 'red',
},
});
}
The funny thing is, that I've already bumped into this article before, but didn't think it was relevant because it talked about server-side-rendering, and I know that Gatsby is server-less. After #ksav 's comment, I re-read it, and understood that the server-side-rendering happens during Gatsby's build process, and not during run-time (i.e. when the user enters the landing pages).
Can I affect the first loaded HTML (differently for each Gatsby page) in Gatsby or React?
Yes, you can directly in the JSX React code. Google has documentation how you can optimize CSS delivery so your above-the-fold content is always styled correctly. It comes down to using inline CSS for all your components above the fold. With inline CSS your HTML elements are always styled when they are loaded because the styling is part of the HTML code.
See the React documentation for how to handle inline styles in React.
An example from the Gatsby tutorial:
src/pages/index.js
import React from "react"
export default () => (
{/* inline CSS */}
<div style={{ margin: `3rem auto`, maxWidth: 600 }}>
<h1>Hi! I'm building a fake Gatsby site as part of a tutorial!</h1>
</div>
)
hello all experienced Sphinx users,
since a few days I'm performing my first experiences with Sphinx for building a small documentation site. I'm playing around using the Alabaster theme. When I try to place a logo in the left upper corner it only works with using an entry in the build configuration file 'conf.py' like this:
html_logo = '_static/images/PJS-small.png'
when I try to use the Alabaster theme configuration like this
html_theme_options = {
'logo': '_static/images/PJS-small.png',
'logo_name': True,
'description': 'one more logo'
}
no logo appears above the sidebar.
I'd like to use the theme configurations because I'm able to place a subtitle and other things like that.
Does anyone have an idea how to use the Alabaster configurations like it is documented?
Thank you very much for helping.
As per the Alabaster installation instructions,
you have to add an html_sidebars setting to the conf.py file:
html_sidebars = {
'**': [
'about.html',
'navigation.html',
'relations.html',
'searchbox.html',
'donate.html',
]
}
This causes Alabaster’s customized sidebar templates to be loaded.
Then you can specify the logo path like this:
html_theme_options = {
'logo': 'images/PJS-small.png',
# etc.
}
The path is automatically prepended with _static/.
In the theme configuration (theme.conf) file, you need to use the following syntax:
logo = images/PJS-small.png
logo_name = true
description = one more logo
Note the absence of the _static directory in the logo path (it is prepended in the theme's HTML template) and the lowercase boolean.
Still, you can set any theme configuration variable through the html_theme_options object in the Sphinx project configuration file (conf.py).
I'm having some really weird issues with converting a static HTML page to a wordpress custom theme. I have a style css sheet and a foundation css sheet as I am using that frameowrk.
The CSS works perfectly on the static html page but when it goes to wordpress there are issues with the font including the colour and size. Is there a specfic way you should be importing the CSS or a conflict I should be aware of?
The CSS of both are added to the page because I can see them in style editor when I 'inspect element'. I enque the scripts as shown below;
// Adds the css to the theme
function add_theme_scripts()
{
wp_enqueue_style('styles', get_stylesheet_uri() );
wp_enqueue_style('foundation', get_template_directory_uri() . "/css/foundation.css" );
}
add_action('wp_enqueue_scripts', 'add_theme_scripts');
I didn't know if it was to do with any form of config error or just faulty files so I recreated the theme from scratch and the problem persisted.
If someone could perhaps point me in the right direction it would be very appreciated.
Thank you.
-Edit-
I've checked inspect element and removed all the addtional CSS that has been added by wordpress and the problem persists.
try to view source and check any other css are included in the page. May be some plugin css is conflicting with your css. If any plugin css conflicting deactivate that plugin and then change.
If you are en-queuing css file in parent theme.Try like this
function add_theme_scripts()
{
wp_register_style( 'foundation', THEME_DIR . '/css/foundation.css', array(), '1', 'all' );
wp_enqueue_style( 'foundation' );
}
add_action('wp_enqueue_scripts', 'add_theme_scripts');
Someone was able to so quickly help me with a problem I'd spent hours and hours on, that I'm hoping I'll get lucky and someone can point me in the right direction on this one, too.
I didn't see anyone else with quite my issue here - and I'm new to working with WP templates instead of plain old HTML/CSS/JS stuff.
Basically - on a site we did (www.opted.org) with a purchased WP theme - I can't get the mobile version collapsible menu to stop defaulting on page load to the last item in the Main Menu.
So instead of something that makes sense - like About ASCO, or even being able to add "Select Page" - the drop down shows "-- past issues"
I don't care how I fix it really, but the client just doesn't want that page to be the default. I tried adding an extra menu item at the end called "Select Page" with an href='#' and using CSS to hide it on screens above 480px - but I couldn't get it to work no matter how I tried to refer to it.
I feel like this should be easy - but I don't know where to set the selected LI among the many WP files.
Thanks!!
I had a look at the plugin.js file on the site www.opted.org.
On line 22, there is 'header' : false // Boolean: Show header instead of the active item
and on line 41 there is jQuery('<option/>').text('Navigation')
Try setting line 22 to true, and text('Navigation') to your 'Select Page' if you prefer that over the text 'Navigation'
Or, according to the tinynav.js page (http://tinynav.viljamis.com/), you can customize that as an option like this:
$("#nav").tinyNav({
active: 'selected', // String: Set the "active" class
header: 'Navigation', // String: Specify text for "header" and show header instead of the active item
label: '' // String: Sets the <label> text for the <select> (if not set, no label will be added)
});
In your main.js file, your calling it on line 14. You should add that header: 'Navigation', option there.
It's hard to answer this question without knowing how the theme you are using works. However, you can certainly change the selected attribute using javascript.
Here's the code you would use to set it to 'About Asco' using jQuery:
jQuery('.tinynav').val('/about-asco/')
alternatively (a little clearer, but more verbose):
jQuery('.tinynav option:first').prop('selected', true);
I was brought in to make a quick Wordpress theme for a client's existing site. Using the existing site's CSS and JS, and skeleton HTML, I was able to get the theme working in virtually every way except some. For starters, I can't seem to 'widgetize' the sidebar.
The HTML for the sidebar, before attempting to register for widgets, was as follows:
<div class="wms-column wms-column-nav">
<div class="wms-column-nav-body">
<h2>Blog</h2>
</div>
</div>
Bear in mind that I can add html inside of the inner div, but I cannot change the two outer divs. They must remain.
After reading http://codex.wordpress.org/Widgetizing_Themes and trying several examples, I get nothing but errors. Naturally, the widget area therefore refuses to show in Dashboard > Appearances.
How do I convert the above code to function as a widget-accepting sidebar? Is having id="sidebar" necessary? And are titles needed? The Codex page seems to imply the way you format the titles depends on the overall approach (example: divs vs. lists). The impression I am getting is that you're making a template that the widgets use over and over to kick out content. I figured you just were telling WP where to put widgets (and all of their content / format / intricacies were handling in the widget's code).
Widgetizing a theme a basically two steps.
Register your sidebar
Add the registered sidebar to the theme
In functions.php
From the Codex page for register_sidebar;
register_sidebar(array(
'name' => __( 'Right Hand Sidebar' ),
'id' => 'right-sidebar',
'description' => __( 'Widgets in this area will be shown on the right-hand side.' ),
'before_title' => '<h1>',
'after_title' => '</h1>'
));
In your theme template(s)
Add a call to dynamic_sidebar. This would probably be in sidebar.php
<div class="wms-column wms-column-nav">
<div class="wms-column-nav-body"><?php
dynamic_sidebar( 'right-sidebar' ); // your widgets will go here ?>
</div>
</div>
Notice that the parameter used in dynamic_sidebar matches the id used when registering the sidebar. That should be it. Of course, implementations can be more complicated-- including for example a hard-coded fallback sidebar or multiple sidebars-- but that is the basic started pack.