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 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:

       
    • By Antonio Iorio
      Hi guys, as I would need your support. I state to be a beginner and I met the application the day before yesterday for the first time.
      I'm creating a manga reading site using wiremanga and I need to know how I can incorporate altervista advertising. (this is my site if you could serve http://dgtread.altervista.org/)
      I have also modified some elements of both the .css and php files but despite saving they are not updated.
    • By rafaoski
      Hello All ... I just added a new Site Profile ...
      It is important that you use the latest version that supports the new Fields => Fieldset in Tab , Fieldset ( Page ) for this time it is version 3.0.83 DEV
      A simple profile for quick start new Page ... There are several pages like About Us, Blog, Portfolio, Contact Page ...
      The profile is not based on any framework, I just used some css, flexbox, grid, font awesome, and added a simple FlexBox Grid called GRIDLEX ...
      CAN DOWNLOAD FROM THIS LINK:
      http://modules.processwire.com/modules/site-twilight/
      https://github.com/rafaoski/site-twilight
      Some Screenshots:

      OPTIONS PAGE:

      CONTACT PAGE:

      BLOG PAGE:

      ABOUT PAGE:

      PORTFOLIO PAGE:

       
      In addition, I added 2 great modules:
      Tracy Debugger:
      https://modules.processwire.com/modules/tracy-debugger/

      Markup Sitemap:
      http://modules.processwire.com/modules/markup-sitemap/