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

       
    • By rafaoski
      I would like every new Site Profile like new REGULAR Profile to have modern support for quick creation like browser sync, minify css, js . Something on the style below:
      https://foundationpress.olefredrik.com/
      https://understrap.com/
      One profile that does not have any CSS frontend attached but has the features needed to quickly add eg pagination, comment form, or site menu something like:
      https://roots.io/sage/
      OR
      https://laravel.com/docs/5.5/mix
      I'm not very godd with js but webpack.js meybe is good for this solution ... I would like to know what advanced users in the front end think about this combination and what would be the best ...
       
    • By Peter Knight
      Playing around with the UIKit theme this morning and tweaking it.
      It's called UIKit Classic and it's a nod to the Classic theme. 
      For me the Classic theme always sticks in my mind as being most definitively Processwire-ey because
      It was my fist intro to PW I thought the colours were quite unique and like the mix of blue, pink and green. They're very distinctive and I'd hate for PW to look like just another WP install. In a crowded CMS marketplace I think it's good to differentiate visually. The two screengrabs are just the same screen. A before and an after. 
      I put this together using the Chrome the web inspect tool so there's no fancy mixins or LESS etc. Actually there's not even any CSS now that I've refreshed the page.
      I do think there needs to be a detailed comprehensive through tutorial for people wishing to make their own themes. Probably 85% here don't need it and understand the directory structure and how it's all compiled but equally I think there's another 15% here with the design skills but not the tech chops to get this done. If we want designers to design themes then we need the process with screengrabs, list of software (I have CodeKit, Dreamweaver, Sublime etc).
      Anywho - just my 2€ worth

       
      The before shot below...

    • By louisstephens
      Perhaps someone can help me on this. I recently started poking around at uikit (I have used bootstrap and foundation previously) as I liked the admin theme and a few of the components. However, their documentation is a bit confusing and I can never get the desired results. I am sure I am doing something wrong, but I did not want to digg into v2, if things will be changing (for better or worse).
       
      I have the following:
      <div class="uk-section"> <div class="uk-container uk-container-large"> <div class="uk-child-width-1-1@s uk-grid-small uk-grid-match" uk-grid> <div class="uk-width-1-2"> <img src="images/logo.png" alt="" width="1183" height="167" /> </div> </div> </div> </div> <div class="uk-section"> <div class="uk-container uk-container-large"> <h3>Section</h3> <div class="uk-child-width-1-4@m uk-grid-small uk-grid-match" uk-grid> <div class="item"> <div class="uk-card uk-card-default uk-card-body"> <h3 class="uk-card-title">Default</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> <div class="item"> <div class="uk-card uk-card-default uk-card-body"> <h3 class="uk-card-title">Primary</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> <div class="item"> <div class="uk-card uk-card-default uk-card-body"> <h3 class="uk-card-title">Secondary</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> <div class="item"> <div class="uk-card uk-card-default uk-card-body"> <h3 class="uk-card-title">Secondary</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> </div> </div> </div> The cards at the bottom stack on mobile which is the desired effect. However, the logo at the top is squished and on mobile does not seem to be resizing to take on the .uk-child-width-1-1@s. Is there a way to prevent the logo from squishing, and for it to resize with the browser? 
      I have noticed when I do 
      <div class="uk-section"> <div class="uk-container uk-container-large"> <div class="uk-child-width-1-1@s uk-grid-small uk-grid-match" uk-grid> <div class="uk-width-1-2"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> <div class="uk-width-1-2"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> </div> </div> that the grid also does not collapse to full width either. I am positive I have just missed something in the documentation, or how uikit is supposed to work. However, for the life of me I can not find it.
       
    • By EyeDentify
      Simple example for loading template specific CSS file.
      This example asumes that you have your CSS file in a directory relative to template root.
      Like:
      templates/css/my_template_specific.css
      Also i use in the template a simple text field to hold the name of the CSS file i want to load.
      I call this field 'css_file'
      Use what you feel comfortable with.
      So in your header section of the DOM notice the "page specific CSS" part?
      Thats were the magic happens. What happens is that we check to see if the file exists in the CSS dir relative to template root.
      And if it does we load it. Simple and effective.
      I load all other CSS that is used all over the site in global_styles.css first.
      And make sure you load template specific last, because then you can easily override CSS in global.
       
      DOM header example:
      <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title><?PHP echo($page->title); ?></title> <!-- main CSS --> <link rel="stylesheet" href="<?PHP echo($config->urls->templates); ?>css/global_styles.css"> <!-- page specific CSS --> <?PHP /* Use relative path in file_exists() */ if(file_exists('css/' . $page->css_file)) { echo("<link rel=\"stylesheet\" href=\"{$config->urls->templates}css/{$page->css_file}\">"); } ?> </head> <body> Thats my way of doing it. I am sure there is plenty of more ways to do it. This is for the newbies or anyone that wants more options.
      Good luck with your CSS out there in Cyberspace.
      Cheers from EyeDentify