[SOLVED] Template creation

krileon
Team Member
ONLINE
Posts: 68454
Thanks: 9068
Karma: 1434

11 years 2 months ago #220883 by krileon

Replied by krileon on topic 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.

.mini-layout {
	padding: 9px;
	border: 1px solid #DDD;
	-webkit-border-radius: 6px;
		-moz-border-radius: 6px;
			border-radius: 6px;
	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
		-moz-box-shadow: 0 1px 2px rgba(0,0,0,.075);
			box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
}

Kyle (Krileon)
Community Builder Team Member
Before posting on forums: Read FAQ thoroughly + Read our Documentation + Search the forums
CB links: Documentation - Localization - CB Quickstart - CB Paid Subscriptions - Add-Ons - Forge
--
If you are a Professional, Developer, or CB Paid Subscriptions subscriber and have a support issue please always post in your respective support forums for best results!
--
If I've missed your support post with a delay of 3 days or greater and are a Professional, Developer, or CBSubs subscriber please send me a private message with your thread and will reply when possible!
--
Please note I am available Monday - Friday from 8:00 AM CST to 4:00 PM CST. I am away on weekends (Saturday and Sunday) and if I've missed your post on or before a weekend after business hours please wait for the next following business day (Monday) and will get to your issue as soon as possible, thank you.
--
My role here is to provide guidance and assistance. I cannot provide custom code for each custom requirement. Please do not inquire me about custom development.

Please Log in to join the conversation.

agouldtdc
OFFLINE
Premium Member
Posts: 87
Thanks: 1
Karma: 0

11 years 2 months ago - 11 years 2 months ago #220901 by agouldtdc

Replied by agouldtdc on topic Template creation

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?

Last edit: 11 years 2 months ago by agouldtdc.

Please Log in to join the conversation.

krileon
Team Member
ONLINE
Posts: 68454
Thanks: 9068
Karma: 1434

11 years 2 months ago #220908 by krileon

Replied by krileon on topic Template creation

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.

Please Log in to join the conversation.

agouldtdc
OFFLINE
Premium Member
Posts: 87
Thanks: 1
Karma: 0

11 years 2 months ago - 11 years 2 months ago #220928 by agouldtdc

Replied by agouldtdc on topic Template creation

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.

Last edit: 11 years 2 months ago by agouldtdc.

Please Log in to join the conversation.

krileon
Team Member
ONLINE
Posts: 68454
Thanks: 9068
Karma: 1434

11 years 2 months ago #221000 by krileon

Replied by krileon on topic Template creation

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.

.cbregPlansList .cbregPlanSelector {
	display: inline-block;
	vertical-align: top;
	width: 250px;
	border: 1px solid #DDD;
	-webkit-border-radius: 6px;
		-moz-border-radius: 6px;
			border-radius: 6px;
	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
		-moz-box-shadow: 0 1px 2px rgba(0,0,0,.075);
			box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
}

.cbregPlansList .cbregPlanSelector .cbregTick {
	width: auto;
	background-color: rgb(243, 243, 243);
	border-bottom: 1px solid #DDD;
	margin: 0;
	padding: 7px 5px 7px 10px;
}

.cbregPlansList .cbregPlanSelector .cbRegNameDesc {
	float: none;
	width: auto;
	padding: 0;
}

.cbregPlansList .cbregPlanSelector .cbregName {
	float: none;
	width: auto;
	background-color: rgb(243, 243, 243);
	border-bottom: 1px solid #DDD;
	margin: 0;
	padding: 5px 27px 5px 10px;
}

.cbregPlansList .cbregSubPlanSelector .cbregPlanSelector {
	width: 98%;
}

Below is an example of what it looks like.

Please Log in to join the conversation.

agouldtdc
OFFLINE
Premium Member
Posts: 87
Thanks: 1
Karma: 0

11 years 2 months ago #221032 by agouldtdc

Replied by agouldtdc on topic Template creation

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

Please Log in to join the conversation.

Moderators: beat, nant, krileon

Time to create page: 0.249 seconds

[SOLVED] Template creation

Attachments:

Search

Login / Logout

Menu

User Menu