Customize PageHeader, CanvasArea and Images

4 posts in this topic


I'm wondering if there is a simple way to customize all PageHeaders, CanvasAreas and Images in my website changing only the CSS.



  • Set a background image and reduce the height.



  • Change de background color and reduce the height.



  • Put a yellow border in them.
Edited by donsa

Share this post

Link to post
Share on other sites



Please follow the forum policy of only have one question per topic in the future.


1. You can set a background using the background image option. Why do you want to reduce it's height ?


2. This can be achieved using the background color option.


3. You will need to use custom CSS. I recommend adding a class to your images, such as yellow-border then use the following CSS.


.yellow-border { border: 1px solid yellow; }


Your HTML would look something like this:


<img class="yellow-border" src="">

Share this post

Link to post
Share on other sites

Sure, I will do that next time.

The problem is that I already have created all pages. I want change the CSS to all elements instead have to change them in every single page.

If you could tell me the name of the elements, I will try to change them in the CSS to define a background-image, a background-color and the Height (is too tall, occupies a big percentage of the page).



Share this post

Link to post
Share on other sites

You can use Firebug or your browsers inspection tools to pinpoint the classes you need to add your CSS to. 

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

  • Similar Content

      By oseehys+
      Hey Guys, i have been having some fun with PL5, on my test site, still learning and trying to master 3 sections a day, am happy the launch has been postponed its for the best lets master it as much as possible.
      But we still gat to eat with DMS for now, so my issue has been on how to reduce my pin pad size in pinspro, right now it display 3 in a row, like the default theme, but i want it to display 4 in a row, if i reduce my screen resolution to 90% it becomes 4 in a row, that is the perfect size, i cant see any css on the forum be able to reduce the size,  so guys please, please this is very important, i need the css to adjust the size, of all the css @Danny has provided on the forum i cant see anyone that focus on the size reduction except on hiding the bottom meta area, mine is just to reduce the size, checkout the images below, the image with 4 rows is the perfect size i crave to have, while the pinpad with 3 rows is what i currently need to change.
      Thanks Guys for your support all this while.
    • Edge-to-edge images
      By janpeeters+
      Hi, I have a container with on the left a 6 column image section and on the right a six column text section. I'm not succeeding in getting a edge-to-edge image on the left. Even with padding set to 0, there remains a white gap under and on the left of the image. So I'm researching if I'm overlooking something, if I've found something that could be improved in PL5 or if this is 'by design'?
      I've set site lay-out in settings to 100%. I've set pl-framework-base to 'full width'/'unwrapped'. (sidenote: in the end I want to have this 'read width' but for testing purposes I set it to full width. This might ask for an override function in the editor so people can always choose to full-width a section although other content is read width.) The images beneath show the settings and lay-out. 
      I've set all padding on the container to 0, but there remains a gap underneath the image and on the left. 
      I've done the same for the padding on the image.

      I've inspected this with Chrome Dev tools and it shows the following:

      I could create custom CSS to remove these spaces but for PL5 to be even more flexibleI I would think that being able to have edge-to-edge images without too much hassle would be a great feature. You see this a lot in recent webdesign. But I might be overlooking something and it is already possible. 
      I've done some testing with the Window Height setting. I think it would be great if images could fill their container edge-to-edge too with this setting active.
      I've tried to make the image taller but then the aspect ratio changes. A locked aspect ratio function would be great for this. With responsive designs images get cropped all the time so for me cropping would not be a problem. Keeping it's aspect ratio locked automatically or as a setting would be nice. I guess most designers wouldn't want it unlocked. 

      That's it, a whole visual story. I hope that it's clear what I'm saying if not let me know and I'll try to clarify. 
      Thanks, Jan
      (by the way, the current forum software you're using is really the best you've had. It works so easily, brilliant)
      There seems to pop an image at the bottom that I didn't put here, forget about the image below, it's already above.

    • CSS Hero question
      By janpeeters+
      Hi all,
      I was totally excited to find out about 'CSS Hero' ( I read about it in the compatible plugins section of the PL5 docs ( For me it's a great way to more easily customize my sites because I'm not a CSS pro.
      I'm wondering about one thing though… Does anyone know if using this will result in a heavy penalty on page loading speeds? Would love to start using it but only if it doesn't cost too much in terms of speed.
      Thanks, Jan
    • WooCommerce Checkout page broken under DMS
      By nizami+
      Seem to have fallen foul of a DMS2/WooCommerce issue. 
      All pages display correctly save the WooCommerce Checkout page, which looks like this:
      Help massively appreciated as this is the last blocker before client site launch
    • Modal Popup Background
      By abuzzelli+
      I need the modal popup background to be solid and I can't get the css to work. Not sure what to do. Here's the page: