[SOLVED] Template creation

It's doing that due to the transparency. Normally a white background would be overtop of the border that's extending to the top and bottom. However, with transparency that background is lost and it causes the borders to be visible as they extend from the top of the div to the bottom of the div. You'd need to completely alter how the background is appended. Really though you do not need images for rounded displays, GJ has several and doesn't use a single image to accomplish it. For example the below class adds a rounded border.

I use CSS similar to this on our site (who/what is GJ incidentally?) and wanted to copy it to the CB Subs registration page but without a guide to what selector does what it is very difficult indeed and very time consuming. I thought it would be easy but this is proving to be very difficult indeed.

I cannot work out why the middle part of the image extends from the top to bottom of the div. One solution would be to change the transparent colour to that of the Joomla template, but it would not be that elegant.

I would really like to know how the template is generated by the script. If I knew which selector did what I should be able to modify it. I would think this would be a common request and surely the person who wrote the template would be able to provide this for paying client like me?

without a guide to what selector does what it is very difficult indeed and very time consuming. I thought it would be easy but this is proving to be very difficult indeed.

As explained there's nothing to guide, we're not here to teach you CSS which is quite literally all it is. You can add it to Joomla template CSS file, CB template CSS file, or CBSubs template CSS file; it doesn't matter which. The selectors can be found by inspecting the page with Firebug for Firefox or Chrome (F12 or right click and inspect). If this is too much of a task I suggest hiring a web designer to do this for you.

I cannot work out why the middle part of the image extends from the top to bottom of the div.

Because it's a div with a repeating Y background. You normally don't see the lines at the top and the bottom because the header and footer images have a background that covers the lines up.

One solution would be to change the transparent colour to that of the Joomla template, but it would not be that elegant.

The easiest solution is to just change the white to black (or whatever color your background is) instead of using transparency.

I would really like to know how the template is generated by the script.

The HTML is put together, but that's completely irrelevant as you're using CSS and not HTML. At any rate the HTML is in the below template file.

components/com_comprofiler/plugin/user/plug_cbpaidsubscriptions/templates/rounded/productusersubscription/default.php

If I knew which selector did what I should be able to modify it.

As explained earlier inspect with Firebug for Firefox or Chrome (F12 or right click and inspect). This will help you easily find CSS classes, etc..

I would think this would be a common request and surely the person who wrote the template would be able to provide this for paying client like me?

I already have. Please see my previous posts as I've provided you template paths already.

Thank you but I was able to find the template paths without posting here and am able to inspect the selectors with Firebug. I am not asking for a lesson in CSS, as I have mentioned before.

I was hoping for clarification of how the template operates because I have not found it clear at all despite hours trying to work out what is going on. If it was I would not have posted here, but maybe that is simply a reflection of my lack of skills as you have suggested.

From what I can see it is not just CSS. Data are being passed from a script that is generating the HTML structure of the page. The CSS styles it. Customisation requires knowledge of both.

I agree that the easiest way to fix this is to replace the white background of the graphic with the colour of the template.

I will have another look with Firebug to see if I can work our what is going on. I would be interested to hear if other clients would find an article on customising the template valuable; maybe it is just me.

Some of the HTML generated is internal (mostly just the inputs themselves), yes, but it's insignificant to the design (and can be moved). The major HTML that is used in the layout displayed is found below (as provided in my previous replies).

components/com_comprofiler/plugin/user/plug_cbpaidsubscriptions/templates/rounded/productusersubscription/default.php

The rest of the styling after the above is purely CSS. I don't know what more to tell you. The border extends from the top of the div to the bottom of the div. It does this because it's just a CSS background image set to repeat on the y axis.

Below is an example of rounded display using purely CSS on the default CBSubs template.

Below is an example of what it looks like.

Many thanks for this. That is most helpful and I will have a look.