Search the Community
Showing results for tags 'styling'.
Found 4 results
-
I may be misunderstanding how CKEdit fields are supposed to be used in processwire, but maybe someone can clear this up. I have a standard CKEdit field used for typing in body copy for the pages of the website. Doing headings, paragraphs, bold, table, etc is fine. But what if I want something a little different? For example, what if I want to be able to choose whether I wanted a standard bulleted list, or one that uses an image as the bullet points? Or maybe I want to be able to insert a 2 column CSS grid with items in it making it look like a two column bulleted list. Do I just dip into the CKEdit fields source dialog at that point? Do I use multiple fields almost like a page builder type of approach (rich text block, then a special list block, then another rich text block, etc)? I'm wondering what you all do. (Not just for bulleted lists, that was just an example) The image shows three types of bullet points I may want to be able to choose from depending on the situation.
-
Hello. I am working on a culinary web project where I am aiming at listing all recipes with a pagination after reaching the recipe limit. As far as I already did the pagination on another project, I was quite happy to use the code and see it in action. However, my joy was not lasting long as far as the present pagination HTML code differs from the other and I was scratching my head today for several hours and yet no solution to precisely match the styling. I was able to apply the pagination, show the prev/next and numbers properly, however the active class is not applied properly and the design has the prev/next arrows at the both ends of the recipe block (image attached). Here is the pagination original html code: <!-- Pagination --> <div class="sixteen columns"> <div class="pagination-container"> <nav class="pagination"> <ul> <li><a href="#" class="current-page">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </nav> <nav class="pagination-next-prev"> <ul> <li><a href="#" class="prev"></a></li> <li><a href="#" class="next"></a></li> </ul> </nav> </div> </div> And here is my pagination code (after making sure that the template pagination is enabled): <div class="sixteen columns"> <div class="pagination-container"> <?php echo $result->renderPager(array( "nextItemLabel" => __(">>"), "previousItemLabel" => __("<<"), "currentItemClass" => "current-page", 'listMarkup' => "<nav class='pagination'><ul>{out}</ul></nav>", 'itemMarkup' => "<li>{out}</li>", 'linkMarkup' => "<a href='{url}'>{out}</a>" )); ?> <nav class="pagination-next-prev"> <ul> <li><a href="#" class="prev"></a></li> <li><a href="#" class="next"></a></li> </ul> </nav> </div> </div> As far as the pagination active class is not applied on the <li> but on the <a href... > I tried to change the linkMarkup to: 'linkMarkup' => "<a href='{url}' class='{class}'>{out}</a>" however that shows that the {class} is not applied with linkMarkup but with itemMarkup. Tried to add the class to itemMarkup too, but the same result is showing. For sure the navigation is not an issue if it is next to the numbers, however I wanted to attempt to match fully the style and learn how can I move the prev and next pointers away from there or in other words to match the original theme. So any ideas how to achieve the proper functionality and obtain the previous/next page links? I read so many tutorials and manuals today mentioning to use prev() and next() but in my case the results are not coming from $page and the next page pointed to the next page in my admin but not the next results page.
-
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
-
Dear all, I have the following situation: There's a template with a PageTable field. All the PageTable elements may have different templates - let's call them element templates. These element templates use specific stylings and scripts. E.g., one element contains a contact form (built with FormBuilder) that needs form-specific CSS and JS. The page elements are not direct children of the page. They're attached to a separate page that serves as an element container. But that's just an aside. I general, when it comes to rendering my pages, I am following the "delayed output" strategy suggested by Ryan. Now my question is this: When I render the (main) page with all its PageTable elements (with possibly different templates), how do I include all the elements and their templates in the rendering strategy? Of course, in my (main) page template I could simply iterate over the elements and render them. However, at the time of rendering these elements, I haven't included their custom styling and script requirements yet. I should somehow do that before so that such specific stylings etc. can be included in the <head> section of the generated output. I hope you understand what I am trying to convey. I just want to do it the beautiful way, or the PW way Any suggestions are appreciated.
