Extra button types

Hi,

i searched the forums but i could not find a similar question....

I use the rounded 4 xtypo button and gave it a custom color. However, i have 8 catagories wich will use different colors. Can i add 4 extra button types and colors? Can this be done in css?
11 years 8 months ago #1 by Kenny
The topic has been marked as resolved.
Hello

Well basically yes you can add other 4 button types and colors either you need to add that styles in css for example inside /plugins/content/xtypo/themes/default/style.css
/*@group Button */
.xtypo_button1,
.xtypo_button2,
.xtypo_button3 {
	display: inline-block!important;
	margin-right: 0.5em;
}
....

also you need to define the new styles inside /plugins/content/xtypo/xtypo.php
$regex = array(
...
"xtypo_button1" => array("<div class=\"xtypo_button1\">***code***</div>","#{xtypo_button1}(.*?){/xtypo_button1}#s") ,
"xtypo_button2" => array("<div class=\"xtypo_button2\">***code***</div>","#{xtypo_button2}(.*?){/xtypo_button2}#s") ,
"xtypo_button3" => array("<div class=\"xtypo_button3\">***code***</div>","#{xtypo_button3}(.*?){/xtypo_button3}#s") ,
/* add another ones below */
...
);

hope you can manage that....
11 years 8 months ago #2 by erwinschro
The topic has been marked as resolved.
I am sorry, I haven´t too much luck.

I created my folder theme (a duplicate of default.php), changed the name to futbval

I add after /*@end */
.xtypo_citas {
	font-family: 'FontAwesome';
	content: "\f10d";
	 background-position: top left;
	-moz-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	transform: rotate(180deg);
	font-size: 1.5em;
	font-style: italic;
	color: #666;
	border-radius: 10px;
	text-shadow: 0 1px 0 #fff;
    padding: 8px;
	background-color: #faebbc;
	border-top: 1px solid #e1cc89;
	border-bottom: 1px solid #e1cc89;
	margin: 5px;
    text-indent: 23px;
	}
 
 
.xtypo_citas span {
    	display: block;
    	font-family: 'FontAwesome';
		content: "\f10e";
    	background-position: bottom right;
		-moz-transform: rotate(180deg);
		-webkit-transform: rotate(180deg);
		-o-transform: rotate(180deg);
		-ms-transform: rotate(180deg);
		transform: rotate(180deg);
  	}

Then (like I already have an editor.css in my templates/css folder, I create a new folder called editorxtras, I added a file called editorxtra.css where this import rules:
@import url(../fonts/font-awesome/css/font-awesome.css); 
@import url(../../../../../plugins/content/xtypo/themes/futbval/style.css);

Finally I edit the xtypo.php and add
"xtypo_citas" => array("<div class=\"xtypo_citas\">***code***</div>","#{xtypo_citas}(.*?){/xtypo_citas}#s") ,
between $regex = array(...    ...);

Then in my template editor.css I addeed
@import url(editorxtras/editorxtra.css);

But When I think all its ok I go to the editor and my citas style doesn´t appear

I attach screen of the modal window.
11 years 6 days ago #3 by thomaszgz
The topic has been marked as resolved.
  • Posted by TemplatePlazza (5310) Offline
Hi Thomas, There's one more file need to be modified.
Open xtypo.html, at line 48 after this code :
case 'list_right' : 	tag = '<div class=\"xtypo_list_right clearfix\">' + text + '</div>'; break;
add this code
case 'citas' : 	tag = '<div class=\"xtypo_citas\">' + text + '</div>'; break;
then at line 254, after the code
<li><button onclick="insertTypo('dropcap');"><i class="icon3-arrow-7"></i>Dropcaps</button></li>
add this code :
<li><button onclick="insertTypo('citas');"><i class="icon3-arrow-7"></i>Citas</button></li>
11 years 6 days ago #4 by TemplatePlazza
The topic has been marked as resolved.
Ok friend, Thanks.... Now its working (only put rest the css classes and I alread have it). I know the procedure so I think I will haven't problems.

Lots of thanks for your time and your quick support.

Best Regards.

Thomas C.
11 years 5 days ago #5 by thomaszgz
The topic has been marked as resolved.
  • Posted by TemplatePlazza (5310) Offline
No problem at all. Glad could help
11 years 5 days ago #6 by TemplatePlazza
The topic has been marked as resolved.
Powered by Kunena Forum