Recommended Posts

Hi,

I am trying to style the comments form (and comments list) to match the rest of the site. I know that it's possible to edit the CSS file for the comments module, but I would rather add my existing classes to the fields, instead of making another css file containing the same CSS styling.

I use the following to render the form: $page->comments->renderForm();

Is there an easy way to add the CSS classed to the fields?

 

//Jasper

Edited by formmailer
Solved

Share this post


Link to post
Share on other sites

Take a look at this post (https://processwire.com/talk/topic/17263-custom-comments-form-and-list-styling/?do=findComment&comment=151627): You can copy the comment files from wire/modules into the module folder of your site folder (site/modules) and there you can change your CSS classes and the markup too.

I think this is the best approach to adapt the comments output to your needs. You dont need to hack anything and it will not be overwritten during updates.

 

  • Like 1

Share this post


Link to post
Share on other sites

Hi!

Yes, I thought about doing that, but I was hoping there was a shortcut to this. A risk (even if it's a minimal one) is that future core updates could break the module.

I was hoping there would be a way to change classes without modifying the module. But if this isn't possible I'll go with the copied & modified module.

//Jasper

Share this post


Link to post
Share on other sites

Another approach would be to add the CSS classes with Jquery onload, but you are also not aware of changes in the future. I use the first method for years now and I had no problems. I dont think that there will be major changes taken in the future.  

At the moment you could only change some attributes of the form tag, but not for the inputs.:(

  • Like 1

Share this post


Link to post
Share on other sites

I managed to build the whole site without using Jquery, for speed optimization, so unfortunately the Jquery option is no alternative.

I will go for the copy solution. Thank you for your help!

  • Like 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By mjut
      Hello!
      I am trying to get some extra css-file into my admin templates. I managed to modify my admin.php to this:
      <?php namespace ProcessWire; require($config->paths->adminTemplates . 'controller.php'); echo "<link rel='stylesheet' type='text/css' href='" . $config->urls->templates . "css/admin.css'>"; By doing so, the css <link> is added to the very end of each parsed admin-html. (right AFTER the closing </body> tag.)
      That causes some trouble. e.g. the page tree is not displaying any more. Although, other pages are working - like the edit form of a page.
      My question: is there a correct way of adding my extra css to the admin area?
      Thanks for you help!
      Stephan
       
    • By rafaoski
      This profile can be used as a business card or very simple blog.
      Requires the latest version processwire 3.0.101 !!!
      Milligram Site Profile For Processwire 3x with include functions like:
      MarkupRegions
      FunctionsAPI
      wireIncludeFile | wireRenderFile
      Essentially, this structure uses minimalist CSS framework Milligram and the Flexbox Grid System Gridlex
       
      Live Example
      CAN DOWNLOAD FROM THIS LINK ( Basic Version and simple Blog Version )
      https://github.com/rafaoski/site-milligram
      https://github.com/rafaoski/site-milligram-blog
      Screenshot:

      If you want to use Laravel Mix you must first ensure that Node.js and NPM are installed on your machine.
      Basic example to Debian and Ubuntu based Linux distributions:
      Node.js
      curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash - sudo apt-get install -y nodejs
      See more installation options LINK
      npm is installed with Node.js just check in linux terminal like below:
      node -v
      npm -v
      Set BrowserSync inside folder /templates/webpack.mix.js and change your dev url
      proxy: 'http://localhost/mix/', to your installation processwire folder like:
      proxy: 'http://localhost/your-processwire-installation-folder/',
      Next install npm packages in your templates folder with command npm install
      Now, boot up the dev server npm run watch, and you're all set go!
      On completion, use the command npm run production to build styles and scripts in the dist folder
      Simple Usage ( Basic Command )
      Run npm install Watch npm run watch Build npm run production All files to Webpack build steps is inside file ( webpack.mix.js )
      Folder With all SCSS files is inside templates/src/scss
      All build styles and scripts is inside the ( dist ) folder
      References:
      Milligram
      Gridlex
      Laravel Mix
      Feather Icons
      Web Font Loader
      Verlok Lazy Load
      Cookie Consent
      Particles.js
       
       
       
       
    • By matsn0w
      Hey all,
      I am working on a website and I want to style the login page, but I'm a bit confused. 
      I want either the existing login page styled in my own way using some CSS (I guess I prefer that) or I want to create a custom page with a form to login. (Which I could style too).
      I used the code from Ryan and Renobird posted here - which works great - but that doesn't replace the original login page. 
      Is there a way to some sort of 'disable' the original login?
      I hope my question is clear and thanks in advance,
      matsn0w
    • By neophron
      Hi,
      I have an issue with a css file. In my templates folder is an »assets« folder with different subfolders like css, js and img.
      I uploaded the latest uikit3 css and js stuff to: assets --> uikit  --> css and js. In my template I'm calling them like this:
      <link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates?>assets/uikit/css/uikit.min.css" />
      This gives me an 403 error:
      GET http://mysite.com/site/templates/assets/uikit/css/uikit.min.css 403 (Forbidden)
      If I change the path to: <link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates?>assets/css/uikit.min.css" />
      everything is fine.
      Is this a logic behavior from Processwire?
    • By rafaoski
      This profile can be used as a simple business card or blog.
      The profile does not use any framework css structure, only styles based on CSS GRID and FLEX.
      To minimize page loading, I added lazy load for images ( Tupola Lazy Load ).
      With include functions like:
      MarkupRegions
      FunctionsAPI
      CAN DOWNLOAD FROM THIS LINK:
      https://github.com/rafaoski/site-grayscale-pw
      https://github.com/rafaoski/site-min-grayscale-pw
      Live Example
      Screenshot: