WordPress.org

Ready to get started?Download WordPress

Forums

Whistles
new style tab whistles.min.css (2 posts)

  1. Vadim V
    Member
    Posted 7 months ago #

    Made style tabs may be useful to someone.
    Plus when you upgrade if erased styles, where will take.

    .whistles{clear: both;width: 100%;margin: 0 0 1.5rem;font-family:Georgia,sans-serif;line-height:1.5;}
    .whistles::after,.whistle-content::after{content: ".";display: block;height: 0;clear: both;visibility:hidden;}
    .whistle-title:hover{cursor:pointer;}
    .whistle-content{overflow:hidden;}
    .whistles-tabs{}
    .whistles-tabs .whistles-tabs-nav{list-style:none;margin:0;}
    .whistles-tabs .whistles-tabs-nav li{display:inline-block;}
    
    .whistles-tabs .whistles-tabs-nav li a{
    	display: inline-block;
    	padding: 10px 15px 8px; /* было padding: 0.5rem 1.5rem; */
    	font-size: 0.85em; /* было font-size: 0.75em; */
    	font-family: Arial,sans-serif;
    	font-weight: bold;
    	color: #7A7A7A;
    	/*background: #f5f5f5;*/
    	/*border: 1px solid #ececec;*/
    	border-right-width:0;
    	}
    .whistles-tabs .whistles-tabs-nav li:last-child a{border-right-width:1px;}
    .whistles-tabs .whistles-tabs-nav li a:hover{
    	color: #7A7A7A;
    	/*background:#f9f9f9;*/
    	}
    .whistles-tabs .whistles-tabs-nav li[aria-selected="true"] a{
    	color: #A5A2A2;
    	background: #F3F3F3;
    	/* background: #DF4123; насыщтемноранж сильно много оранж */
    	/* background: #004D6B; /* темн син */
    	border-bottom-color: #FFF;
    	-moz-box-shadow: 0px 1px 2px rgba(153, 153, 153, 0.4);
    	-webkit-box-shadow: 0px 1px 2px rgba(153, 153, 153, 0.4);
    	box-shadow: 0px 1px 2px rgba(153, 153, 153, 0.4);
    	-moz-border-radius: 19px;
    	-webkit-border-radius: 19px;
    	border-radius: 19px;
    	}
    
    .whistles-tabs .whistles-tabs-wrap{
    	/*
    	margin: -1px 0 0;
    	padding: 1.5rem 1.5rem 0 1.5rem;
    	color: #666;
    	background:#fff;
    	border: 1px solid #ececec
    	*/
    	}
    .whistles-tabs-wrap .whistle-content{}
    .whistles-toggle,.whistles-accordion{}
    
    .whistles-toggle .whistle-title,.whistles-accordion .whistle-title{
    	margin: 0;
    	padding: 0.5rem 1.5rem;
    	font-size: 0.75em;
    	font-family: Arial,sans-serif;
    	font-weight: bold;
    	color: #777;
    	background: #f5f5f5;
    	border: 1px solid #ececec;
    	border-top-width:0;
    	}
    .whistles-toggle .whistle-title:first-child,.whistles-accordion .whistle-title:first-child{border-top-width:1px}
    .whistles-toggle .whistle-title:hover,.whistles-toggle .whistle-title[aria-selected="true"],.whistles-accordion .whistle-title:hover,.whistles-accordion .whistle-title[aria-selected="true"]{color: #555;background:#ededed}
    
    .whistles-toggle .whistle-content,.whistles-accordion .whistle-content{
    	margin: -1px 0 0;
    	padding: 1.5rem 1.5rem 0 1.5rem;
    	color: #666;
    	background:#fff;
    	border: 1px solid #ececec;
    	-moz-box-sizing:border-box;box-sizing:border-box;
    	}

    http://wordpress.org/plugins/whistles/

  2. Vadim V
    Member
    Posted 6 months ago #

    It would be good that you add the ability to add new styles.
    To upgrade plug styles did not disappear.

    At this point I add here another style.
    Maybe someone will come in handy.
    And when you upgrade that I could quickly restore the style I want.

    Style Accordion
    whistles.min.css:

    .whistles{clear: both;width: 100%;margin: 0 0 1.5rem;font-family:Georgia,sans-serif;line-height:1.5}
    .whistles::after,.whistle-content::after{content: ".";display: block;height: 0;clear: both;visibility:hidden}
    .whistle-title:hover{cursor:pointer}
    .whistle-content{overflow:hidden}
    .whistles-tabs{}
    .whistles-tabs .whistles-tabs-nav{list-style:none;margin:0}
    .whistles-tabs .whistles-tabs-nav li{display:inline-block}
    .whistles-tabs .whistles-tabs-nav li a{
    	display: inline-block;
    	padding: 0.5rem 1.5rem;
    	font-size: 0.75em;
    	font-family: Arial,sans-serif;
    	font-weight: bold;
    	color: #777;
    	background: #f5f5f5;
    	border: 1px solid #ececec;
    	border-right-width:0
    	}
    .whistles-tabs .whistles-tabs-nav li:last-child a{border-right-width:1px}
    .whistles-tabs .whistles-tabs-nav li a:hover{color: #555;background:#f9f9f9}
    .whistles-tabs .whistles-tabs-nav li[aria-selected="true"] a{color: #555;background: #fff;border-bottom-color:#fff}
    .whistles-tabs .whistles-tabs-wrap{margin: -1px 0 0;padding: 1.5rem 1.5rem 0 1.5rem;color: #666;background:#fff;border: 1px solid #ececec}
    .whistles-tabs-wrap .whistle-content{}
    .whistles-toggle,.whistles-accordion{}
    .whistles-toggle .whistle-title,.whistles-accordion .whistle-title{
    	margin: 0;
    	padding: 9px 15px;		/* было padding: 0.5rem 1.5rem;*/
    	font-size: 16px;			/* было font-size: 0.75em;*/
    	font-family: Arial,sans-serif;
    	text-shadow: none;		/*не было этой строчки, ибо стили темы добавляют свою тень текста */
    	/* было font-weight: bold; */
    	color: #7E7878;			/* было color: #777;*/
    	background: #383838;		/*было background: #f5f5f5;*/
    	border-bottom: 1px solid #F5F4E5; /* было border: 1px solid #ececec; */
    	border-top-width:0
    	}
    .whistles-toggle .whistle-title:first-child,.whistles-accordion .whistle-title:first-child{
    	border-top-width:1px
    	}
    .whistles-toggle .whistle-title:hover,.whistles-toggle .whistle-title[aria-selected="true"],.whistles-accordion .whistle-title:hover,.whistles-accordion .whistle-title[aria-selected="true"]{
    	color: #0087F1;/* было color: #555; */
    	/* было background:#ededed */
    	text-shadow: none;
    	}
    .whistles-toggle .whistle-content,.whistles-accordion .whistle-content{
    	margin: -1px 0 0;
    	padding: 16px; /* было padding: 1.5rem 1.5rem 0 1.5rem;*/
    	color: #666;
    	background:#fff;
    	border: 1px solid #ececec;
    	-moz-box-sizing:border-box;
    	box-sizing:border-box
    	}

Reply

You must log in to post.

About this Plugin

About this Topic

Tags

No tags yet.