Stylesheets not working

  • Resolved little1

    (@little1)


    4 years, 7 months ago

    I’m trying to create stylesheets for my blocks. I’ve made a stylesheet in the same folder as the php files for the black. All my block php files are in the same folder in my child theme. I’ve used the same naming convention for the css file as for the php file that I’m trying to style. My styles aren’t being reflected in the block, am I missing a step?

Viewing 10 replies - 1 through 10 (of 10 total)
  • Plugin Author Ryan Kienstra

    (@ryankienstra)

    Hi @little1,
    Thanks for bringing that up.

    You’re probably doing everything OK.

    But just to be sure, what’s the full path to the stylesheet, and the full path to the block template?

    Like wp-content/themes/example-child/blocks/block-foo.css and wp-content/themes/example-child/blocks/block-foo.php.

    Thread Starter little1

    (@little1)

    wp-content/themes/charm-child/blocks/block-pull-quote.php
    wp-content/themes/charm-child/blocks/block-pull-quote.css

    Hi,
    I found with some of my Custom Blocks I had to target the “editor wrapper” inorder to override default editor block styles (plus use an !important declaration), as in this example:

    .editor-styles-wrapper .highlight p {
	font-size: 1.5em!important;
}

    maybe that will help?

    • This reply was modified 4 years, 7 months ago by smrdo.
    Plugin Author Ryan Kienstra

    (@ryankienstra)

    Thanks, @smrdo! Good suggestion.

    Plugin Author Ryan Kienstra

    (@ryankienstra)

    Hi @little1,
    The CSS file path looks good.

    In the browser dev tools, under the ‘Sources’ tab, do you see block-pull-quote.css?

    https://cldup.com/L-vyQQNzrQ.png

    If not, could you please go to /wp-admin > Tools > Site Health > Info > ‘Copy site info to clipboard’, and paste that here?

    Thanks!

    Thread Starter little1

    (@little1)

    I am seeing the block-pull-quote css in the Source tab. https://proofingqueen.staging.wpengine.com/wp-content/themes/charm-child/blocks/block-pull-quote.css?ver=1.1.0

    Thread Starter little1

    (@little1)

    Pasting site health info here anyway in case it helps:

    
### wp-core ###

version: 5.4.2
site_language: en_CA
user_language: en_CA
timezone: America/Toronto
permalink: /%year%/%monthnum%/%day%/%postname%/
https_status: false
user_registration: 0
default_comment_status: open
multisite: false
user_count: 3
dotorg_communication: true

### wp-paths-sizes ###

wordpress_path: /nas/content/staging/proofingqueen
wordpress_size: 43.46 MB (45574856 bytes)
uploads_path: /nas/content/staging/proofingqueen/wp-content/uploads
uploads_size: 83.26 MB (87306570 bytes)
themes_path: /nas/content/staging/proofingqueen/wp-content/themes
themes_size: 7.94 MB (8322454 bytes)
plugins_path: /nas/content/staging/proofingqueen/wp-content/plugins
plugins_size: 18.11 MB (18986910 bytes)
database_size: 2.23 MB (2342912 bytes)
total_size: 155.00 MB (162533702 bytes)

### wp-dropins (1) ###

advanced-cache.php: true

### wp-active-theme ###

name: Charm-Child (charm-child)
version: 1.1.0
author: ThemeRain
author_website: (undefined)
parent_theme: Charm (charm)
theme_features: automatic-feed-links, title-tag, menus, html5, responsive-embeds, post-thumbnails, widgets
theme_path: /nas/content/staging/proofingqueen/wp-content/themes/charm-child

### wp-parent-theme ###

name: Charm (charm)
version: 1.1.0
author: ThemeRain
author_website: https://themeforest.net/user/themerain
theme_path: /nas/content/staging/proofingqueen/wp-content/themes/charm

### wp-themes-inactive (3) ###

Twenty Nineteen: version: 1.6, author: WordPress Team
Twenty Seventeen: version: 2.3, author: the WordPress team
Twenty Twenty: version: 1.4, author: the WordPress team

### wp-mu-plugins (4) ###

Force Strong Passwords - WPE Edition: version: 1.6.4, author: Jason Cosper
WP Engine Seamless Login Plugin: version: 1.5.5, author: WP Engine
WP Engine Security Auditor: version: 1.0.9, author: wpengine
WP Engine System: version: 4.0.0, author: WP Engine

### wp-plugins-active (11) ###

Atomic Blocks - Gutenberg Blocks Collection: version: 2.8.5, author: atomicblocks
Block Lab: version: 1.5.5, author: Block Lab
Contact Form 7: version: 5.1.9, author: Takayuki Miyoshi (latest version: 5.2)
Duplicate Page: version: 4.2, author: mndpsingh287
Gutenslider — The last WordPress slider you will ever need.: version: 4.0.4, author: eedee
Insert Headers and Footers: version: 1.4.5, author: WPBeginner (latest version: 1.4.6)
Orbisius Child Theme Creator: version: 1.5.1, author: Svetoslav Marinov (Slavi)
Slide Anything - Responsive Content / HTML Slider and Carousel: version: 2.3.20, author: Simon Edge
Smash Balloon Instagram Feed: version: 2.4.5, author: Smash Balloon
ThemeRain Core: version: 1.0.4, author: ThemeRain
WordPress Importer: version: 0.7, author: wordpressdotorg

### wp-plugins-inactive (2) ###

Akismet Anti-Spam: version: 4.1.6, author: Automattic
Enjoy Plugin for Instagram: version: 5.0.7, author: Mediabeta Srl

### wp-media ###

image_editor: WP_Image_Editor_Imagick
imagick_module_version: 1687
imagemagick_version: ImageMagick 6.9.7-4 Q16 x86_64 20170114 https://www.imagemagick.org
imagick_limits: 
	imagick::RESOURCETYPE_AREA: 38 MB
	imagick::RESOURCETYPE_DISK: 1073741824
	imagick::RESOURCETYPE_FILE: 6144
	imagick::RESOURCETYPE_MAP: 512 MB
	imagick::RESOURCETYPE_MEMORY: 256 MB
	imagick::RESOURCETYPE_THREAD: 1
gd_version: 2.2.5
ghostscript_version: unknown

### wp-server ###

server_architecture: Linux 4.15.0-1040-gcp x86_64
httpd_software: Apache
php_version: 7.4.6 64bit
php_sapi: apache2handler
max_input_variables: 10000
time_limit: 3600
memory_limit: 512M
max_input_time: 3600
upload_max_size: 50M
php_post_max_size: 100M
curl_version: 7.58.0 OpenSSL/1.1.1
suhosin: false
imagick_availability: true
htaccess_extra_rules: false

### wp-database ###

extension: mysqli
server_version: 5.7.29-32-log
client_version: mysqlnd 7.4.6

### wp-constants ###

WP_HOME: https://proofingqueen.staging.wpengine.com
WP_SITEURL: https://proofingqueen.staging.wpengine.com
WP_CONTENT_DIR: /nas/content/staging/proofingqueen/wp-content
WP_PLUGIN_DIR: /nas/content/staging/proofingqueen/wp-content/plugins
WP_MAX_MEMORY_LIMIT: 512M
WP_DEBUG: false
WP_DEBUG_DISPLAY: true
WP_DEBUG_LOG: false
SCRIPT_DEBUG: false
WP_CACHE: true
CONCATENATE_SCRIPTS: undefined
COMPRESS_SCRIPTS: undefined
COMPRESS_CSS: undefined
WP_LOCAL_DEV: undefined
DB_CHARSET: utf8
DB_COLLATE: utf8_unicode_ci

### wp-filesystem ###

wordpress: writable
wp-content: writable
uploads: writable
plugins: writable
themes: writable
mu-plugins: writable
    Plugin Author Ryan Kienstra

    (@ryankienstra)

    Hi @little1,
    Thanks for letting me know, and for including the Site Health information.

    Hm, so it looks like the CSS file is present.

    Could you copy the contents of that CSS file here? Do you see in the dev tools why those rules aren’t applying?

    Thanks!

    Thread Starter little1

    (@little1)

    Of course it’s working now for absolutely no apparent reason. Thank you for taking the time to troubleshoot this with me.

    Plugin Author Ryan Kienstra

    (@ryankienstra)

    Hi @little1,
    All good, the life of a developer, problems randomly appearing ??

    Glad to hear it’s working.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Stylesheets not working’ is closed to new replies.