[solved.] Styling CGFeedbackModule

[Gamonon]

After install I found that the layout of the CGFeedbackModule module did not fit into my webpage and fonts and
color did not match my needs. Basically the standard layout of the module is a designers drama with f.i 255 chars long
name input fields extending outside the frame. Some of them but the textfield can be adjusted in a template.
I can't use it like that, so I wanted to work on the stylesheet to restyle it myself.

I did not find a stylesheet attached though in the module templates are fake classes even with variables like
in it.

Are there any Harry Potter like hidden or secret chambers or components that I have missed?
How can I get control over the layout of this module?

[sugna]

I use Form Builder and edit the form code updating with CSS see example. Is there a "Form Template" tab.

Example using Form Builder

http://tribemarkstudio.com/index.php?pa ... the-studio

Code: Select all

<div id="allforms">
{$fb_form_header}
{if $fb_form_done == 1}
	{* This first section is for displaying submission errors *}
	{if $fb_submission_error}
		<div class="error">{$fb_submission_error}</div>
		{if $fb_show_submission_errors}
			<div class="error">
			<ul>
			{foreach from=$fb_submission_error_list item=thisErr}
				<li>{$thisErr}</li>
			{/foreach}
			</ul>
		</div>
		{/if}
	{/if}
{else}
	{* this section is for displaying the form *}
	{* we start with validation errors *}
	{if $fb_form_has_validation_errors}
		<div class="error">
		<ul>
		{foreach from=$fb_form_validation_errors item=thisErr}
			<li>{$thisErr}</li>
		{/foreach}
		</ul>
		</div>
	{/if}
	{if $captcha_error}
		<div class="error">{$captcha_error}</div>
	{/if}

	{* and now the form itself *}
	{$fb_form_start}
	<div>{$fb_hidden}</div>
	<div{if $css_class != ''} class="{$css_class}"{/if}>
	{if $total_pages gt 1}<span>{$title_page_x_of_y}</span>{/if}
	{foreach from=$fields item=entry}
		{if $entry->display == 1}
        	{strip}
         	{if $entry->needs_div == 1}
            	<div
            	{if $entry->required == 1 || $entry->css_class != ''} class="
              		{if $entry->required == 1}
                		required
              		{/if}
              		{if $entry->required == 1 && $entry->css_class != ''} {/if}
              		{if $entry->css_class != ''}
                		{$entry->css_class}
              		{/if}
              		"
            	{/if}
            	>
         	{/if}
         	{if $entry->hide_name == 0}
            	<label class="text"{if $entry->multiple_parts != 1} for="{$entry->input_id}"{/if}>{$entry->name}
            	{if $entry->required_symbol != ''}
               		{$entry->required_symbol}
            	{/if}
            	</label>
         	{/if}
         	{if $entry->multiple_parts == 1}
            	{section name=numloop loop=$entry->input}
               		{if $entry->label_parts == 1}
               			<div>{$entry->input[numloop]->input} {$entry->input[numloop]->name}</div>
               		{else}
               			{$entry->input[numloop]->input}
               		{/if}
               		{if $entry->input[numloop]->op}{$entry->input[numloop]->op}{/if}
            	{/section}
         	{else}
            	{if $entry->smarty_eval == '1'}{eval var=$entry->input}{else}{$entry->input}{/if}
         	{/if}
         	
         	{if $entry->needs_div == 1}
            	</div>
         	{/if}
         	{/strip}
     	{/if}
	{/foreach}
	{if $has_captcha == 1}
		<div class="captcha">{$graphic_captcha}{$title_captcha}<br />{$input_captcha}</div>
	{/if}
	<input name="submit" class="submit" type="image" src="uploads/images/submit-button.gif" />
	</div>
	{$fb_form_end}
{/if}
{$fb_form_footer}
</div>

CSS

Code: Select all

/* --------- Form ---------- */



.formRow {clear:both; text-align:left; padding:4px; vertical-align:middle; overflow:hidden;  line-height:25px;}

.formButtonPad {clear:both; margin-left:63px;}

#allforms {
               
margin:10px 0 10px 0;
			

}

#allforms ul{
	
}


#allforms li{
	
margin:5px 0 5px 0;
list-style:none;


}

#allforms input {
font-weight:bold;
border:solid 1px #CCC;
height:20px;
width:250px;
margin:10px 0 10px 0 ;



}

#allforms textarea {
border:solid 1px #CCC;
height:20px;
width:250px;
height:150px;
margin:10px 0 10px 0 ;
padding:5px;

}

#allforms .required select{
background:#fff;
border:solid 1px #CCC;
height:20px;
width:250px;
margin:2px 0 5px 0 ;
padding:5px;


}

#allforms .submit {
margin:10px 0 0 0;
width:71px;
height:27px;
border:0;

}





.text {
font-size:12px;
font-weight:bold;
color:#FFF;


}

.required input{
background:#fff;
padding:5px 0  0 5px;
font-weight:bold;

}


.error {
color:#FFF;
font-weight:bold;
background-color:#990000;
padding:10px;
margin:0 0 20px 0;

}

.error li{
list-style:none;


}

.success {
color:#009933;
background-color:#CFFE9C;
padding:5px;
border: solid 1px #009933;


}

.submit {
margin:10px 0 0 0;
width:71px;
height:27px;
border:0;

}



	/* Sample FormBuilder CSS base */
	#detailed-form form {margin-top:0}
	#detailed-form form form, td, th, li { font-size: 100%}
	#detailed-form form form div {margin-bottom:0}
	#detailed-form form fieldset div {
		margin-bottom:0.5em;
		margin-left:1em;
	}
	#detailed-form form fieldset div div {
		margin-top:0.5em;
		margin-left:1em
	}
	#detailed-form form fieldset {
		margin-bottom:1em;
		border:1px solid #CCC;
		padding:0.5em
	}
	#detailed-form form fieldset label {
		width:auto;
	}
	#detailed-form form legend {
		color:#FFF;
		background:#379aff;
		font-size:1.2em;
font-weight:bold;
		margin-bottom:0.5em;
		padding:0.2em;
		width:auto;
		border:1px solid #CCC
	}
	#detailed-form form textarea {
		margin: 0.5em 0;
		width:98%;
		height: 6em


	}

#detailed-form form input{
border: solid 1px #CCC;
}





	/* Apply this class to text/select input fields with shorter labels
		to help alignment */
	.short-label label {float:left; width:10em}
	.short-label fieldset div input,
	.short-label fieldset div select {width:16em;}

	/* Pretty up your Captcha image output */
	.captcha {
		margin:0.5em 0;
		width:200px;
		text-align:center
	}
	.captcha img {border:1px solid #F60; margin-bottom:0.5em}
	.captcha input {width:196px; margin-top:0.5em}

	/* Just a bit more room for the Submit button */
	#detailed-form .submit {margin:0.5em 0  0 15px; }

Form Example Here

[Dr.CSS]

Look at the source of the page to find what if any classes/IDs it has then you can make your own style sheet for it, none of CGs modules come with a style sheet...

[Gamonon]

Sugna: thanks for the effort to post your code. I've done a quick copy/paste, but for me it results in
no form at all. I dont'use Formbuilder but I also don't read such option in the helpfile of the module?.


Dr.CSS: sorry but you've gotta be kidding. That should not be the way to go. It's like an architect or
construction-worker that builds my house but doesn't include a door. And then tells me to try enter
my house through the chimney.

Reading the source code of the generated page, tels me  things as " And be honest as a
css expert, classes in the template like is something
for a techie to understand without a proper guide.

Not only is there no stylesheet attached but there is even no 'handler' or guide to attach it yourself.
The word 'style' isn't even mentioned nor considered in the brief documentation that is in this cgmodule.

And again I will invest so much time to make this work as I want. As all the previous months would be
wasted if I switched to a better documented and supported cms now.

That's of my chest, thanks for replying both
John

[Dr.CSS]

And when he did add style sheets he got a lot of flack for not styling it the way they wanted it, if you know what your doing then it shouldn't be that hard to addd class calls or IDs where needed, if you can't find it in the template code you can add a number like 2 or a few numbers to show you what is where then go back and add what you need to the part it shows you...

I've done things like class='a{counter}' to some templates and it will give me a running number of classes like a1, a2, a3, etc. that I can use to style it the way I want...

Like this one, note the border on the bottom of some and not others...

http://wipsite.medtechglobal.com/nz/med ... er-nz.html

[sugna]

Go to the template

Code: Select all

{* original rss feed template *}
<?xml version="1.0"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
  <channel>
  {* note: if you have not configured pretty urls or mod rewrite, the next line may fail when trying to validate the feed *}
  <atom:link href="{$feed_url}" rel="self" type="application/rss+xml" />
    <title>{$feed.title}</title>
    {if isset($feed.link) && !empty($feed.link)}<link>{$feed.link}</link>{/if}
    {if isset($feed.description) && !empty($feed.description)}<description>{$feed.description}</description>{/if}
    {if isset($feed.copyright) && !empty($feed.copyright)}<copyright>{$feed.copyright}</copyright>{/if}
    {if isset($generator)}<generator>{$generator}</generator>{/if}
    {if isset($feed.managing_editor) && !empty($feed.managing_editor)}<managingEditor>{$feed.managing_editor}</managingEditor>{/if}
    {if isset($admin_email)}<webMaster>{$admin_email} ({$admin_user->firstname} {$admin_user->lastname})</webMaster>{/if}
    {if isset($feed.image) && !empty($feed.image)}
      <image>
	{if isset($feed.description) && !empty($feed.description)}<description>{$feed.description}</description>{/if}
        {if isset($feed.link) && !empty($feed.link)}<link>{$feed.link}</link>{/if}
        <title>{$feed.title}</title>
        <url>{$file_location}/{$feed.image}</url>
      </image>
    {/if}

    {* an example of how to create a feed from a call to the news module *}
    {* you can use any smarty variable that is available in the news summary template *}
    {* you can substitute this logic with output from any module that supports a summary
       view, or possibly get artistic and mix output from different modules *}
    {news assign='junk'}
    {foreach from=$items item='entry'}
    <item>
      <title>{$entry->title|cms_html_entity_decode}</title>
      <link>{$entry->moreurl}</link>
      {capture assign='description'}{if isset($entry->summary)}{$entry->summary}{else}{$entry->content}{/if}{/capture}
      <description>{$description|trim|strip_tags|summarize:40}</description>
      <pubDate>{$entry->postdate|rfc_date}</pubDate>
      <guid>{$entry->moreurl}</guid>
    </item>
    {/foreach}
  </channel>
</rss>

use styles to make things look better

Code: Select all

<h1><title>{$feed.title}</title></h1>
<div class="pub-date"><pubDate>{$entry->postdate|rfc_date}</pubDate></div>

Style example

.pub-date {

font-weight: bold;

}

I think that should work.

Form Builder is much better.



Shane

[tyman00]

@Gamonon: While having something out of the box is nice, DrCss is right. The developer had too many complaints about it not fitting their site. So he provides a basic example for you to go off of and style on your own to fit your own site.

Don't think of it as an architect not putting a door in. He did a basic structure for you like an architect would. Just like it's up to you to choose the colors and look of your house, it's up to you to style the module.

[Gamonon]

I understand your approach Dr.CSS As I said, again it will take me time to invent the wheel again.
I see more people in this forum that have the same issue. cgfeedback has been released 5 times
in the last year. How difficult would had have been to include an attached stylesheet. So not styled,
but attached.

Thanks for you suggested method though
John

[tyman00]

It's not the difficulty that's an issue. It's the fact that no one is ever happy with what is available. Instead of the "why no stylesheets" post there would be "why did you style it that way posts."

It's seriously not that hard to style these templates. Probably easier than trying to modify an existing template to do what I want it to. Plan a few extra minutes to style your templates. It will look better in the long run versus using a stylesheet that was designed having no forethought of your site layout. These modules aren't meant to be a brand new show room car, they are meant to be a kit car that you assemble, massage and make into your own image.

[Gamonon]

tyman00, you're not getting the point. Let me try to explain a last time.

It's the fact that no one is ever happy with what is available.

If my electrician would design the lights in the rooms, I would not be happy for sure, so he doesn't do that.
If he didn't mount the switches and the outlets, I would fire him ( or worse 

It's seriously not that hard to style these templates. Probably easier than trying to modify an existing template

If you're saying that it is easier to figure out how to connect a new css stylesheet to a template that has fantasy
classes with variables included, than it is to modify an exiting css stylesheet that is already attached.
What could I possibly answer to that.

These modules aren't meant to be a brand new show room car, they are meant to be a kit car that you assemble, massage and make into your own image.

Even a brand new kit car has all the components included and a clear and complete manual to build it yourself.
If it didn't come with an electrical scheme, only very few would/could take the effort to design it them self. 

I am somewhat bewildered to see that both the design and usability factor are structurally ignored by almost every one that is contributing. I say almost, as there are some that do an examplenary  nice job. This forum is full with legitimate but unnecessary (unanswered) questions and problems of users. And sure, also a lot from people that don't read what is available, including me some time(.)

The strength of OpenSource is letting other people contribute to the quality and usability of the concerning system. That can only be achieved if the lead developers and designers are giving the right example. Call it behavior by example if you like.
Not doing so results in the fact that as designer I am not to thrilled to publish my design solutions here. Most of them took me a lot (to much) of time and why should I support the technical designer if he doesn't give me the leads to do my part. This would be an example of behavior by example 

I'll close this topic as [solved] though it's not really.