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');
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>
)
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.
I have inherited a work for another developer, it is a website made with WP Bakery Page Builder and I have to fix some design issues.
The thing is that the other developer add some custom css code that I don't find in the backend.
It is generated as inlince css in the index.php. Looks like this.
<noscript><style type="text/css">body .wpex-vc-row-stretched, body .vc_row-o-full-height { visibility: visible; }</style></noscript><style type="text/css" data-type="vc_shortcodes-custom-css">.vc_custom_1530389595419{padding-top: 5% !important;padding-bottom: 5% !important;}</style>
I have problems with these vc_custom_* classes, I want to remove all of them.
Can you guys help me to find these mysterious css?
Thank you so much.
I had exactly the same problem. But as the previous answers have suggested, it is more a matter of codification than of code.
The solution for me was to enter:
And then the values that are automatically like vc_custom_
are margins, border and padding
You can use conditional tags to target the specific page you need to remove the styles on. You can use is_page() to target a page page (as opposed to another post type) and pass a page ID, slug, title, or no argument to target any page.
function wpse_217881_remove_scripts() {
// Check for the page you want to target
if ( is_page( 'About Me And Joe' ) ) {
// Remove Styles
wp_dequeue_style( 'parent-style' );
wp_dequeue_style( 'child-style' );
wp_dequeue_style( 'parent-style-css' );
wp_deregister_style( 'parent-style' );
wp_deregister_style( 'child-style' );
wp_deregister_style( 'parent-style-css' );
}
}
I'm assuming you already are, but to be explicit, you should be calling the function that dequeue/deregisters the styles from an action hook - in this instance wp_enqueue_scripts.
From the wp_enqueue_scripts docs:
Despite the name, it is used for enqueuing both scripts and styles
I'm currently building a custom theme on top of the _S Underscores Wordpress theme. One of the things I immediately did was remove all the content in the style.css file, as I want to create my own styling (largely using Bootstrap).
However, I can't seem to get certain attributes in the style.css to make changes to the html. For example, I'm trying to set the following <h1> tag to red. But it will not change.
<h1 id="testOfContent">Test</h1>
CSS (in the style.css file provided by Underscores):
#testOfContent {
color: red;
}
However, the font remains black. How do you manipulate a wordpress theme (especially _S Underscores which is meant to be customizable) to use your own css? Any ideas as to why it won't register my own CSS?
Here's my functions.php file and how I'm loading the script:
function tlas_css() {
// Enqueue bootstrap css
wp_register_style('bootstrap-css', get_template_directory_uri() . '/bootstrap-3.3.4/css/bootstrap.min.css');
wp_enqueue_style('bootstrap-css');
// Enqueue custom stylesheet
wp_enqueue_style( 'tlas-custom-style', get_template_directory_uri() . '/css/tlas.css' );
wp_enqueue_style( 'tlas-style', get_template_directory_uri() . '/style.css');
}
add_action( 'wp_enqueue_scripts', 'tlas_css' );
You should use wp_enqueue_style( 'your-style', get_stylesheet_uri() ); which retrieves the URI of the current theme stylesheet.
Read more on codex.wordpress.org
The workflow I prefer to customize and add to the css for the _s theme is by editing the .scss Sass files. Be sure to select the Advanced Options so you can tick the _sassify! check box if using the _s theme Generator at https://underscores.me/#generator
Then you can import the Bootstrap Sass you want since Bootstrap 4 is written with Sass. If you prefer using Bootstrap 3, you can find it's Sass ports as well.
If you're not sure how to build the Sass, I put together a Webpack 4 development workflow for the Sassify option included with the underscores Wordpress starter theme. Hope this helps https://jimfrenette.com/2018/08/completely-blank-no-css-_s-wordpress-starter-theme/
If you are working with Chrome, try to clear cache (ctrl+F5).
Or Open Dev tools > settings > preferences > network > disable cache (when dev tool is open)
You can try this one:
add_action( 'wp_enqueue_scripts', 'yourstyle' );
function yourstyle() {
wp_enqueue_style( 'yourstyle', get_template_directory_uri() . '/css/yourstyle.css', array(), PARENT_THEME_VERSION );
}
I generate in Cakephp with Html->link a link
echo $this->Html->link('Download',array(
'plugin'=> 'galleries',
'controller'=> 'galleries',
'action'=> 'download',
$download),array('class'=>'down'));
The output is
Download
This link is not recognized. I can not click on it.
But if I put the output link and implement it in the HTML code, all is fine
After this I tried to echo the link - same problem.
This is a snippet from my view
<nav>next<?php if($download){ echo $this->Html->link('Download',array('plugin' => 'galleries', 'controller' => 'galleries','action' => 'download', $download),array('class'=>'down')); } ?>prev</nav>
Maybe somebody can give me a little hint?
Solution:
It was not a PHP Problem but CSS Problem... specially a z-index Problem in my Jquery Plugin (ImageViewer) rolleyes
The schemata of the HTML is:
<article><div class="info"><nav></nav</div></article><article><div class="info"><nav></nav</div></article><article><div class="info"><nav></nav</div></article>
The Problem were the nav tags in every article tag. The "prev&next" links appear in every nav structure but not the "download" link. ergo: i can click on the "prev&next" links but not on the "download" link... So, for a fast solution i set the z-index for my current article view. But i must rework my HTML Code structure
Thanks for reading my question.