Suggestion — Custom CSS

Suggestion — Custom CSS

This topic contains 5 replies, has 2 voices, and was last updated by  iceable 3 years, 11 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #6651
    Suggestion — Custom CSS

    Steve
    Participant

    First let me say that Silverclean is a terrific theme and that you have provided outstanding functionality and support. I have, so far, but one suggestion for making the theme more usable for more advanced developers, and that is to have an actual custom style sheet available.

    When I first bought the theme, I created a child theme so that I could have more control over styling. But some functionality was impaired and somewhere along the line I got a “Cheating, uh?” error message which really irritated me. So I deleted the child theme and have been modifying CSS by using the Main Settings > Custom CSS field. There are two issues I have with this provision:

    1) It’s a form field, so it’s not as easy to edit and maintain as a full file is. While good enough for a few minor tweaks, more extensive customizations are awkward.

    2) All location references (as for images) have to be full-path or site-root-relative, rather than css-location relative. This is the main problem. It requires hard coding image references which may change with version updates or requires those images to be copied to a stable location that may be different on a production installation from a development installation. There are solutions, of course, and it’s not the end of the world, but this particular aspect is not as friendly as the rest of the theme.

    The suggestion is to provide a setting that points to a custom css file, if possible, or to fix the issues with child theme so that a custom css file can be used without breaking other theme functionality.

    Thank you for your great work on this theme!

    #6657
    Reply to: Suggestion — Custom CSS

    iceable
    Keymaster
    Support
    Happy with my help?
    Buy me a beer!

    Hi, and thanks for the kind words and a great feedback!

    You definitely got a point here, custom css has some limits and a full-fledge custom css file could be useful in some cases, especially for heavy customizations and relative file paths.

    The custom css form field is indeed meant primarily for minor (or not too abundant) tweaks, but has the great advantage of being saved in the database. So when not-too-savvy or inattentive users update the theme to a new version, their custom css is still here and causes no headache!
    This is why this setting was made – and will remain – this way.

    However, advanced users can have their custom css file pretty easily with a tiny tweak (and without a child-theme):

    – Just add this at the end of functions.php (just before the last ?> tag):

    function my_custom_css() {
    	wp_register_style( 'custom-css', $stylesheet_directory_uri . 'custom-css.css'); 
    	wp_enqueue_style( 'custom-css' );
    }
    add_action('wp_enqueue_scripts', 'my_custom_css', 99);

    – Via FTP, add your custom-css.css file at the root of the theme

    – Now your custom-css.css file will be available from Appearance > Editor, and it will be enqueued last on the front-end, so it will be able to override all default styles (just like the custom css form field)

    I also take note of the child-theme support issue you mentioned, will need to double check this and hopefully fix it in the next update. Can you point to anything specific you did that triggered an error while working with a child-theme ?

    #6661
    Reply to: Suggestion — Custom CSS

    Steve
    Participant

    Thank you, Mathieu, for the code solution. This is one of the minor drawbacks to doing version updates by creating whole new themes instead of overwriting in a fixed “silverclean” theme directory. The custom function(s) and file(s) will need to be reproduced with each new version as well. It’s a small thing, but a detail to have to remember with each update, which perhaps will be few and far between anyway. No matter which way you go, there are drawbacks — if only the world were perfect! This at least gives me more flexibility and an easier editing view — thank you.

    I wish I could remember what I was trying to do that caused the error with the child theme. I think I was setting something in the theme options, but can’t say for sure. It was pretty much the first thing I did when I activated the child (it might have been trying to set the header image). When the error occurred right away, I just assumed that child themes were not supported after all, so I deleted it.

    I would have replied to my original suggestion post, but the forum will not let me. I am logged in, and can reply to any other thread in the pro support area, but on my own thread, my login state is lost, the login form does nothing (with no error), and at the bottom of the thread is the message “You must be logged in to reply to this topic.” I deleted the cookie, tried a different browser I had never used here before, and it didn’t matter, so there must be some goofy little checkbox somewhere that is not set. As you can see from this post, I can create a new thread, just can’t comment on my old one.

    Thank you very much for the great work and diligent support!

    #6668
    Reply to: Suggestion — Custom CSS

    iceable
    Keymaster
    Support
    Happy with my help?
    Buy me a beer!

    This is one of the minor drawbacks to doing version updates by creating whole new themes instead of overwriting in a fixed “silverclean” theme directory.

    Actually, if the updates were overwriting the existing directory, the would overwrite everything (including any and all customizations to all files, including a “custom css” file if there was one). This is what happens with the WP core update API, which is used for all themes from wporg repository.

    Making updates in the form of whole new theme is an additional layer of security for those who have made changes to the template files. These cannot be transferred automatically to the new version anyway, but at least the modified files are not lost in the process.

    Child-theme are supposed to be supported (they were not in the very first version but the problematic functions found to cause this have been fixed) but maybe a couple of hidden glitch remained. No problem you cannot remember precisely, I will make a new batch of extensive testing to find out what can still be an issue.

    I would have replied to my original suggestion post, but the forum will not let me.

    No problem, fixed this by merging both threads. Seems like something went wrong with the forum cache, will double check this as well 😉

    #6737
    Reply to: Suggestion — Custom CSS

    Steve
    Participant

    Mathieu – I’ve tried the code now to install a custom css (provided above), and finally got it going [ $stylesheet_directory_uri needs to be set first since it is local to icefit_styles() and is empty within my_custom_css(), so I duplicated the line from the earlier function ]. I am now able to set SOME styles (such as hiding elements, which of course would not be included in a theme css), but, unfortunately, the silverclean.css gets loaded AFTER the custom css, so I am unable to change any of the styles set there (such as image backgrounds). The add_action at priority 99 doesn’t push it to the end, and I’m not familiar enough with WP’s model to debug it.

    I appreciate your help anyway. Don’t worry about this support item (other than you may want to edit the solution above in case someone else finds it). For now, I will just replace some of the provided theme images and try to keep custom styles at a minimum on this project. On my next project using this theme, I’ll try the child theme again and see how that goes now that I am more familiar with the how all the features work.

    Thank you!

    #6740
    Reply to: Suggestion — Custom CSS

    iceable
    Keymaster
    Support
    Happy with my help?
    Buy me a beer!

    Hi, to be honest I didn’t try this function I quickly wrote, thinking it would work… So that’s my bad.

    Thanks for reporting back, that’s actually good to note (especially the 99 priority that doesn’t work as expected).

    A better solution is to register and enqueue this stylesheet in the pre-existing function so you are sure to control the order. The code I proposed above was meant to be more of a “general” solution that can easily be applied to any theme – too bad it doesn’t work exactly as expected!

    So, to fix it completely, you’ll need to find this line within the pre-existing function (line 159)

    wp_enqueue_style( 'silverclean' );

    And add this just after it:

    wp_register_style( 'custom-css', $stylesheet_directory_uri . 'custom-css.css'); 
    wp_enqueue_style( 'custom-css' );

    The $stylesheet_directory_uri var is defined in this function and this way you make sure to enqueue this stylesheet after the main one!

    By the way if you still have a hard time overriding some styles, you can try to use more qualified selectors (i.e. “#container div.class” can have a higher priority than “.class”, no matter which sheet is loaded first) and as last resort you can also use the !important rule.

Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Suggestion — Custom CSS’ is closed to new replies.


PayPal Verified
Secured by PayPal
Secure Credit Card payments powered by Stripe
SiteLock