Width of the theme

Resolved Lucas
(@luquerias)

10 years ago
Hello, this is a question about customization. If you can’t help me I will understand. I have changed the width of the theme and adapt to be the same width of this website.

You can see it in here.

What i’ve done is to write this rules on the customize css section, but now it’s not working responsively:
```
.container .sixteen.columns {
    width: 1160px;
}
.container {
    width: 1160px;
}
.container .eleven.columns {
    width: 840px;
}
.blog_post .post-content {
    width: 770px;
}
```
Is there any easy way to change the width and make it woek responsively? Thanks a lot for the help….

Viewing 15 replies - 1 through 15 (of 25 total)

1 2 →

Thread Starter

Lucas

(@luquerias)

10 years ago

Hey, I have achieved what I was looking for.

1)First of all i have created a child theme.
2) Then I have changed these values in the style.css of the child theme:

.container .sixteen.columns {
    width: 1160px;
}
.container {
    width: 1160px;
}
.container .eleven.columns {
    width: 840px;
}
.blog_post .post-content {
    width: 770px;
}

and that’s it… 🙂

emilyhein727

(@emilyhein727)

10 years ago

Hi, I want to use your code to put in my custom css, but it is just a little too wide. Would you be able to modify the code above to make it just a little skinnier? Thanks!!

Thread Starter

Lucas

(@luquerias)

10 years ago

Hello, it won’t work if you put it in your custom css section of the theme. You will need to create a child theme and change it in the style.css of this new child theme…

You can find information of how to create a child theme here.

Anyway, what width do you need? I can do it for you but i need to know what is the size you need. Any url where i can have a look?

kwiecu

(@kwiecu)

10 years ago

Cold you post a link to your site? I would like to see the results 🙂

Thread Starter

Lucas

(@luquerias)

10 years ago

http://www.tccuadernos.com/blog/ 🙂

kwiecu

(@kwiecu)

10 years ago

I can see that you highly customized whole theme, also menu, footer. Could share it with me and send me customized theme file so that I can install it and fill with my data? I can’t code at all.

I understand that I will have to install/put it in my child theme?

Thread Starter

Lucas

(@luquerias)

10 years ago

You will have to code in header.php and footer.php too, if u can’t code at all it will be a problem.

Create a child theme a write the next on it:

/*
Theme Name: TCCuadernos
Theme URI: http://themes.fruitfulcode.com/fruitful
Author: fruifrulcode
Author URI: http://fruitfulcode.com
Description: Fruitful - WordPress theme with powerful theme options panel and simple clean front end design. Ability to modify styles and options according to your needs. Two different layout types responsive and fixed. Easily upload logo, background, edit colors, header and menu positions, slider, fonts, social icons, footer, custom css and much more. Translated to Russian, German, Spanish, French, Vietnamese languages. WooCommerce and WPML ready.
Version: 1.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: white, orange, theme-options, responsive-layout, fixed-layout, custom-header, custom-background, custom-menu, custom-colors, custom-background, translation-ready, featured-images, full-width-template,  one-column, right-sidebar, editor-style
Text Domain: fruitful-child
Template: fruitful
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/
@import url("../fruitful/style.css");

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {
    border:0;
    font-family:inherit;
    font-size:100%;
    font-style:inherit;
    font-weight:inherit;
    margin:0;
    outline:0;
    padding:0;
    vertical-align:baseline;
}
html {
    font-size:62.5%;
    ms-text-size-adjust:100%;
    overflow:auto;
    webkit-text-size-adjust:100%;
}
body {
    background:none no-repeat scroll 0 0 #fff;
    font-size:14px;
    line-height:14px;
    text-rendering:optimizelegibility;
    color:#333333;
	overflow:hidden;
}
.container.page-container{
	margin-top:10px;
}
/*Fix fancybox 2*/
body.fancybox-lock {
    overflow:visible !important;
    margin-right:auto !important;
}
.container {
    position:relative;
    width:1160px;
    margin:0 auto;
    padding:0;
}
.container .column, .container .columns {
    float:left;
    display:inline;
    margin-left:10px;
    margin-right:10px;
}
.row {
    margin-bottom:20px;
}
/* Nested Column Classes */
.column.alpha, .columns.alpha {
    margin-left:0;
}
.column.omega, .columns.omega {
    margin-right:0;
}
/* Base Grid */
.container .one.column,.container .one.columns {
    width:40px;
}
.container .two.columns {
    width:100px;
}
.container .three.columns {
    width:160px;
}
.container .four.columns {
    width:220px;
}
.container .five.columns {
    width:280px;
}
.container .six.columns {
    width:340px;
}
.container .seven.columns {
    width:400px;
}
.container .eight.columns {
    width:460px;
}
.container .nine.columns {
    width:520px;
}
.container .ten.columns {
    width:580px;
}
.container .eleven.columns {
    width:840px;
}
.container .twelve.columns {
    width:700px;
}
.container .thirteen.columns {
    width:760px;
}
.container .fourteen.columns {
    width:820px;
}
.container .fifteen.columns {
    width:880px;
}
.container .sixteen.columns {
    width:1160px;
}
.container .one-third.column {
    width:300px;
}
.container .two-thirds.column {
    width:620px;
}
/* Offsets */
.container .offset-by-one {
    padding-left:60px;
}
.container .offset-by-two {
    padding-left:120px;
}
.container .offset-by-three {
    padding-left:180px;
}
.container .offset-by-four {
    padding-left:240px;
}
.container .offset-by-five {
    padding-left:300px;
}
.container .offset-by-six {
    padding-left:360px;
}
.container .offset-by-seven {
    padding-left:420px;
}
.container .offset-by-eight {
    padding-left:480px;
}
.container .offset-by-nine {
    padding-left:540px;
}
.container .offset-by-ten {
    padding-left:600px;
}
.container .offset-by-eleven {
    padding-left:660px;
}
.container .offset-by-twelve {
    padding-left:720px;
}
.container .offset-by-thirteen {
    padding-left:780px;
}
.container .offset-by-fourteen {
    padding-left:840px;
}
.container .offset-by-fifteen {
    padding-left:900px;
}
/* #Tablet (Portrait)================================================== */
/* Note:Design for a width of 768px */
@media only screen and (min-width:768px) and (max-width:959px) {
    .container {
    width:768px;
}
.container .column,.container .columns {
    margin-left:10px;
    margin-right:10px;
}
.column.alpha,.columns.alpha {
    margin-left:0;
    margin-right:10px;
}
.column.omega,.columns.omega {
    margin-right:0;
    margin-left:10px;
}
.alpha.omega {
    margin-left:0;
    margin-right:0;
}
.container .one.column,.container .one.columns {
    width:28px;
}
.container .two.columns {
    width:76px;
}
.container .three.columns {
    width:124px;
}
.container .four.columns {
    width:172px;
}
.container .five.columns {
    width:220px;
}
.container .six.columns {
    width:268px;
}
.container .seven.columns {
    width:316px;
}
.container .eight.columns {
    width:364px;
}
.container .nine.columns {
    width:412px;
}
.container .ten.columns {
    width:460px;
}
.container .eleven.columns {
    width:508px;
}
.container .twelve.columns {
    width:556px;
}
.container .thirteen.columns {
    width:604px;
}
.container .fourteen.columns {
    width:652px;
}
.container .fifteen.columns {
    width:700px;
}
.container .sixteen.columns {
    width:748px;
}
.container .one-third.column {
    width:236px;
}
.container .two-thirds.column {
    width:492px;
}
/* Offsets */
.container .offset-by-one {
    padding-left:48px;
}
.container .offset-by-two {
    padding-left:96px;
}
.container .offset-by-three {
    padding-left:144px;
}
.container .offset-by-four {
    padding-left:192px;
}
.container .offset-by-five {
    padding-left:240px;
}
.container .offset-by-six {
    padding-left:288px;
}
.container .offset-by-seven {
    padding-left:336px;
}
.container .offset-by-eight {
    padding-left:384px;
}
.container .offset-by-nine {
    padding-left:432px;
}
.container .offset-by-ten {
    padding-left:480px;
}
.container .offset-by-eleven {
    padding-left:528px;
}
.container .offset-by-twelve {
    padding-left:576px;
}
.container .offset-by-thirteen {
    padding-left:624px;
}
.container .offset-by-fourteen {
    padding-left:672px;
}
.container .offset-by-fifteen {
    padding-left:720px;
}
}
/* #Mobile (Portrait)================================================== */
/* Note:Design for a width of 320px */
@media only screen and (max-width:767px) {
    .container {
    width:300px;
}
.container .columns,.container .column {
    margin:0;
}
.container .one.column,.container .one.columns,.container .two.columns,.container .three.columns,.container .four.columns,.container .five.columns,.container .six.columns,.container .seven.columns,.container .eight.columns,.container .nine.columns,.container .ten.columns,.container .eleven.columns,.container .twelve.columns,.container .thirteen.columns,.container .fourteen.columns,.container .fifteen.columns,.container .sixteen.columns,.container .one-third.column,.container .two-thirds.column {
    width:300px;
}
/* Offsets */
.container .offset-by-one,.container .offset-by-two,.container .offset-by-three,.container .offset-by-four,.container .offset-by-five,.container .offset-by-six,.container .offset-by-seven,.container .offset-by-eight,.container .offset-by-nine,.container .offset-by-ten,.container .offset-by-eleven,.container .offset-by-twelve,.container .offset-by-thirteen,.container .offset-by-fourteen,.container .offset-by-fifteen {
    padding-left:0;
}
}
/* #Mobile (Landscape)================================================== */
/* Note:Design for a width of 480px */
@media only screen and (min-width:480px) and (max-width:767px) {
    .container {
		width:420px;
	}
	.container .columns,.container .column {
		margin:0;
	}
	.container .one.column,.container .one.columns,.container .two.columns,.container .three.columns,.container .four.columns,.container .five.columns,.container .six.columns,.container .seven.columns,.container .eight.columns,.container .nine.columns,.container .ten.columns,.container .eleven.columns,.container .twelve.columns,.container .thirteen.columns,.container .fourteen.columns,.container .fifteen.columns,.container .sixteen.columns,.container .one-third.column,.container .two-thirds.column {
		width:100%;
		max-width:420px;
	}
}
/* #Clearing================================================== */
/* Self Clearing Goodness */
.container:after {
    content:"";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
/* Use clearfix class on parent to clear nested columns, or wrap each row of columns in a <div class="row"> */
.clearfix:before,.clearfix:after,.row:before,.row:after {
    content:'';
    display:block;
    overflow:hidden;
    visibility:hidden;
    width:0;
    height:0;
}
.row:after,.clearfix:after {
    clear:both;
}
.row,.clearfix {
    zoom:1;
}
/* You can also use a <br class="clear" /> to clear columns */
.clear {
    clear:both;
    display:block;
    overflow:hidden;
    visibility:hidden;
    width:0;
    height:0;
}
article,aside,details,figcaption,figure,footer,header,nav,section {
    display:block;
}
ol, ul {
    list-style:none;
}
table {
    border-collapse:separate;
    border-spacing:0;
}
caption, th, td {
    font-weight:normal;
    text-align:left;
}
blockquote:before, blockquote:after, q:before, q:after {
    content:"";
}
blockquote, q {
    quotes:"" "";
}
a:hover, a:active {
    outline:0;
}
.site-content .entry-content p a img, .site-content .entry-content p img {
	box-shadow: 0 0px 1px rgba(0, 0, 0, 0.5)
}

.entry-content img, .entry-summary img, .comment-content img, .widget img, .wp-caption {
    max-width: 100%;
}

a img, img {
    border:0;
}
body,button,input,select,textarea {
    font-size:14px;
    line-height:1.5;
    font-weight:normal;
}
h1,h2,h3,h4,h5,h6 {
    clear:both;
	line-height:24px;
}
h1 {
	font-size: 27px;
}

h2 {
	font-size: 23px;
}

h3 {
	font-size: 20px;
}

h4 {
	font-size: 17px;
}

h5 {
	font-size: 14px;
}

h6 {
	font-size: 12px;
}
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.comment-content h1,
.comment-content h2,
.comment-content h3,
.comment-content h4,
.comment-content h5,
.comment-content h6{
    margin:10px 0;
	line-height:28px
}
hr {
    background-color:#ccc;
    border:0;
    height:1px;
    margin-bottom:1.5em;
}
p {
	margin: 1em 0 1em 0;
}
ul, ol {
    margin:0 0 1.5em 3em;
}
ul {
    list-style:disc;
}
ol {
    list-style:decimal;
}
ul ul, ol ol, ul ol, ol ul {
    margin-bottom:0;
    margin-left:1.5em;
}
dt {
    font-weight:bold;
}
dd {
    margin:0 1.5em 1.5em;
}
b, strong {
    font-weight:bold;
}
dfn, cite, em, i {
    font-style:italic;
}
blockquote {
    margin:0 1.5em;
}
address {
    margin:0 0 1.5em;
}
pre {
    background:#eee;
    font-family:"Courier 10 Pitch", Courier, monospace;
    font-size:1.5em;
    font-size:15px;
    line-height:1.6;
    margin-bottom:1.6em;
    max-width:100%;
    overflow:auto;
    padding:1.6em;
}
code, kbd, tt, var {
    font:15px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}
abbr, acronym {
    border-bottom:1px dotted #666;
    cursor:help;
}
mark, ins {
    background:#fff9c0;
    text-decoration:none;
}
sup,sub {
    font-size:75%;
    height:0;
    line-height:0;
    position:relative;
    vertical-align:baseline;
}
sup {
    bottom:1ex;
}
sub {
    top:.5ex;
}
small {
    font-size:75%;
}
big {
    font-size:125%;
}
figure {
    margin:0;
}
fieldset {
	border: 1px solid #c0c0c0;
	margin: 0 2px;
	padding: 0.35em 0.625em 0.75em;
}

legend {
	border: 0;
	padding: 0;
	white-space: normal;
}
table {
    margin:0 0 1.5em;
    width:100%;
}
th {
    text-transform:uppercase;
}
button,input,select,textarea {
    font-size:100%;
    margin:0;
    vertical-align:baseline;
    vertical-align:middle;
}
button, input {
    line-height:normal;
    overflow:visible;
}
button,html input[type="button"],input[type="reset"],input[type="submit"] {
    background:#f15a23;
	border:none;
    font-family:"Open Sans";
    color: #fff;
	text-transform:uppercase;
    cursor:pointer;
    font-size:1.4rem;
    font-size:14px;
    padding:0.62em .7em .5em;
    webkit-appearance:button;
	-webkit-transition: background 0.2s ease-in-out;
	-moz-transition: background 0.2s ease-in-out;
	-khtml-transition: background 0.2s ease-in-out;
	-o-transition: background 0.2s ease-in-out;
	-ms-transition: background 0.2s ease-in-out;
	transition: background 0.2s ease-in-out;
}
#comments{
	width:100%;
	float:left
}
#page #comments #commentform input[type="submit"] {
	max-height:none;
}
.single-post #comments #respond input[type="submit"]{
	line-height:12px;
}
button:hover,html input[type="button"]:hover,input[type="reset"]:hover,input[type="submit"]:hover {
    background:#fe4502;
}
button:focus,html input[type="button"]:focus,input[type="reset"]:focus,input[type="submit"]:focus,button:active,html input[type="button"]:active,input[type="reset"]:active,input[type="submit"]:active {
	background:#fe4502;
}
input[type="checkbox"],input[type="radio"] {
    box-sizing:border-box;
    padding:0;
}
input[type="search"] {
    box-sizing:content-box;
    moz-box-sizing:content-box;
    webkit-appearance:textfield;
    webkit-box-sizing:content-box;
}
input[type="search"]::-webkit-search-decoration {
    webkit-appearance:none;
}
button::-moz-focus-inner,input::-moz-focus-inner {
    border:0;
    padding:0;
}
input[type=text],input[type=email],input[type=url],textarea {
    border:1px solid #e5e5e5;
    border-radius:3px;
    color:#45494c;
}
input[type=text]:focus,input[type=email]:focus,textarea:focus {
    color:#111;
}
input[type=text],input[type=email],input[type=url] {
    padding:3px;
}

#commentform label {
width: 75px;
float: left;
}

textarea {
    overflow:auto;
    padding-left:3px;
    vertical-align:top;
    width:98%;
}
a {
    color:#333333;
}

a:hover,a:focus,a:active {
    color:#FF5D2A;
}

.alignleft {
    display:inline;
    float:left;
    margin-right:1.5em;
}
.alignright {
    display:inline;
    float:right;
    margin-left:1.5em;
}
.aligncenter {
    clear:both;
    display:block;
    margin:0 auto;
}
.assistive-text {
    clip:rect(1px 1px 1px 1px);
    clip:rect(1px, 1px, 1px, 1px);
    position:absolute !important;
}
#header_language_select{
	float:right;
	height:100%;
	margin: 10px 0 0;
	padding:0;
	z-index:99999999;
}
#header_language_select ul{
	margin:0;
	list-style:none;
}
#header_language_select ul li.current{
	position: relative;
}
#lang-select-block a{
    display:block;
	color:#333333;
    text-decoration:none;
    text-transform:uppercase;
    padding:7px 20px;
	font-size:14px;
}
#lang-select-block .current a{
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-khtml-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
#lang-select-block li.current:hover>a{
	background:#F15A23;
	color:#ffffff;
}
ul#lang-select-popup{
    box-shadow:0 3px 3px rgba(0,0,0,0.2);
	background:#fff;
    display:block;
    float:left;
    left:-26px;
    moz-box-shadow:0 3px 3px rgba(0,0,0,0.2);
    webkit-box-shadow:0 3px 3px rgba(0,0,0,0.2);
    position:absolute;
    top:35px;
    -webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-khtml-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	opacity:0;
	margin:20px 0 0 0;
	_margin: 0; /*IE6 only*/
	visibility:hidden;
	z-index:999999;
}
#header_language_select ul li:hover > ul {
    margin: 0;
    opacity: 1;
    visibility: visible;
}
#lang-select-popup a {
    padding: 12px 15px;
    text-transform: none;
}
.main-navigation {
    display:block;
    float:left;
    margin:10px 0 0 0;
	position:relative;
}
.main-navigation ul {
    list-style:none;
    margin:0;
    padding-left:0;
}

.main-navigation li:first-child {
	margin:0;
}

.main-navigation li {
    margin:0 0 0 10px;
}

 .main-navigation li {
    float:left;
    position:relative;
}
.main-navigation a {
    display:block;
    text-decoration:none;
    /*color:#333333;*/
    text-transform:none;
    padding:7px 10px;
	font-size:14px;
}

.main-navigation ul ul {
    box-shadow:0 3px 3px rgba(0,0,0,0.2);
    display:block;
    float:left;
    left:0;
    moz-box-shadow:0 3px 3px rgba(0,0,0,0.2);
    webkit-box-shadow:0 3px 3px rgba(0,0,0,0.2);
    background:none #fff;
    position:absolute;
    top:35px;
    z-index:99999;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-khtml-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	opacity:0;
	margin:20px 0 0 0;
	_margin: 0; /*IE6 only*/
	visibility:hidden;
}
.main-navigation ul ul ul {
    left:100%;
    top:0;
	margin:0 0 0 20px;
}
.main-navigation ul ul a {
    min-width:155px;
    background:none ;
    padding:12px 15px !important;
    color:#333333;
    text-transform:none;
    font-size:14px;
    box-shadow:none !important;
	transition:background 0 linear !important;
}
.main-navigation ul ul li:first-child {
    background:none;
}
.main-navigation ul ul li {
	float:left;
    width:100%;
    margin:0 !important
}
.main-navigation ul li:hover > a {
    background:none repeat scroll 0 0 #F15A23;
    color:#fff;
    padding:7px 10px;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-khtml-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	font-size:14px;
}
.main-navigation ul ul:hover > a {
    color:#333 !important;
    text-shadow:none !important;
}
.main-navigation ul ul a:hover,
.main-navigation ul ul li.current_page_item a,
.main-navigation ul ul li.current-menu-item a,
.main-navigation ul ul li.current-menu-parent a,
.main-navigation ul ul li.current-menu-ancestor a {
    color:#333;
    text-shadow:none !important;
}
.main-navigation ul li:hover > ul {
    margin:0;
	opacity:1;
	visibility:visible;
}
.main-navigation ul li.current_page_item a,
.main-navigation ul li.current-menu-item a,
.main-navigation ul li.current-menu-parent a,
.main-navigation ul li.current_page_parent a,
.main-navigation ul li.current-menu-ancestor a {
    background:none repeat scroll 0 0 #F15A23;
    color:#fff;
    padding:7px 10px;
}
.menu-toggle {
    cursor:pointer;
}
.main-small-navigation .menu {
    display:none;
}
#masthead, #colophon, #content {
    float:left;
    width:100%;
    margin:10px 0;

}
#colophon {
    margin:0px 0!important;
    padding:0px 0!important;
	position: relative;
top:5px;
}
#colophon .site-info {
    font-size:12px;
    float:left;
    width:420px;
    padding:8px 0;
}
#masthead .social-icon{
    float:right;
	width: 100%;

}
#colophon .social-icon {
    float:right
}
#masthead .social-icon a{
	float:right;
    width:30px;
    height:30px;
    opacity:1;
    background-image:url(images/social.png);
    background-repeat:no-repeat;
}
#colophon .social-icon a {
    float:left;
    width:30px;
    height:30px;
    opacity:1;
    background-image:url(images/social.png);
    background-repeat:no-repeat;
}
#masthead .social-icon a:hover, #masthead .social-icon a:active,
#colophon .social-icon a:hover, #colophon .social-icon a:active {
    opacity:0.9
}
 #masthead .social-icon a.facebook,
 #colophon .social-icon a.facebook {
    background-position:-249px 0;
}
#masthead .social-icon a.twitter,
#colophon .social-icon a.twitter {
    background-position:-280px 0;
}
#masthead .social-icon a.linkedin,
#colophon .social-icon a.linkedin {
    background-position:-93px 0;
}
#masthead .social-icon a.myspace,
#colophon .social-icon a.myspace {
    background-position:-31px 0;
}
#masthead .social-icon a.googleplus,
#colophon .social-icon a.googleplus {
    background-position:-62px 0;
}
#masthead .social-icon a.dribbble,
#colophon .social-icon a.dribbble {
    background-position:0 0;
}
#masthead .social-icon a.skype,
#colophon .social-icon a.skype {
    background-position:-125px 0;
}
#masthead .social-icon a.flickr,
#colophon .social-icon a.flickr {
    background-position:-187px 0;
}
#masthead .social-icon a.youtube,
#colophon .social-icon a.youtube {
    background-position:-218px 0;
}
#masthead .social-icon a.rss,
#colophon .social-icon a.rss {
    background-position:-155px 0;
}
#masthead .social-icon a.vk,
#colophon .social-icon a.vk {
    background-position:-311px 0;
}
#masthead .social-icon a.pinterest,
#colophon .social-icon a.pinterest {
    background-position:-373px 0;
}
#masthead .social-icon a.instagram,
#colophon .social-icon a.instagram {
    background-position:-404px 0;
}

#masthead .social-icon a.yelp,
#colophon .social-icon a.yelp {
    background-position:-435px 0;
}

#masthead .social-icon a.email,
#colophon .social-icon a.email {
    background-position:-342px 0;
}
.sticky {
}
.hentry {
    margin:0 0 1.5em;
}
.entry-meta {
    clear:both;
}
.byline {
    display:none;
}
.single .byline,.group-blog .byline {
    display:inline;
}
.entry-content,.entry-summary {
    margin:1.5em 0 0;
}
.page-links {
    clear:both;
    margin:0 0 1.5em;
}
.blog .format-aside .entry-title,.archive .format-aside .entry-title {
    display:none;
}
.site-header img,.comment-content img,.widget img {
    max-width:100%;
}
.site-header img,.entry-content img,img[class*="align"],img[class*="wp-image-"] {
    height:auto;
}
.site-header img, img.size-full {
    width:auto;
	max-width: 100%;
}
.entry-content img.wp-smiley,.comment-content img.wp-smiley {
    border:none;
    margin-bottom:0;
    margin-top:0;
    padding:0;
}
.wp-caption {
    margin-bottom: 15px;
    max-width: 100%;
}

.entry-thumbnail {
	display: block;
    float: left;
	padding:0 4.4%;
    max-width: 91.2%;
	margin:20px 0 0;
	height:auto;
}

.entry-thumbnail .wp-post-image {
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.5);
	height: auto;
    width: 100%;
}

.format-audio .wp-audio-shortcode {
    height: 30px !important;
    margin: 20px 0;
    max-width: 450px !important;
}

.wp-caption.aligncenter,.wp-caption.alignleft,.wp-caption.alignright {
    margin-bottom:1.5em;
	margin-bottom:15px;
}
.wp-caption img {
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.5);
}
.wp-caption-text {
    text-align:center;
}
.wp-caption .wp-caption-text {
    margin:0.8075em 0;
}
.site-content .gallery a img {
    border:none;
    height:auto;
    max-width:90%;
}
.site-content .gallery dd {
    margin:0;
}
.site-content .gallery-columns-4 .gallery-item {
}
.site-content .gallery-columns-4 .gallery-item img {
}
embed,iframe,object {
    max-width:100%;
	clear:both;
}
.site-content .site-navigation {
    float:left;
    margin:0 0 1.5em;
    overflow:hidden;
    width:100%;
}
.site-content .nav-previous a,
.site-content .nav-next a{
	text-decoration:none
}
.site-content .nav-previous {
    float:left;
    width:46%;
}
.site-content .nav-next {
    float:right;
    text-align:right;
    width:46%;
}
.bypostauthor {
}
.widget {
    margin:0 0 1.5em;
}
#searchsubmit {
    display:none;
}
.main-slider-container {
    margin:10px 0;
    overflow:hidden;
    float:left;
    width:100%;
	position: relative;
}
.flex-direction-nav a {
	z-index:999
}

#page {position:relative;}
#page .container .btm_header, #page .container .entry-header {
    border-bottom:1px solid #d6d6d6;
	margin: 0 0 10px;
}

.search #page .container  .entry-header {
	border:0;
}

#page .container header .header-hgroup.left-pos {
    float:left;
    margin: 0 15px 0 0;
}

#page .container header .header-hgroup.center-pos {
	float: none;
	width:100%;
	display:block;
}

#page .container header .header-hgroup.center-pos a {
	text-align:center;
	display:block;
	float:none;
}

#page .container header .header-hgroup.right-pos  {
    float:right;
    margin: 0 0 0 15px;
}

#page .container header .menu-wrapper.left-pos {
	float:left;
	display:inline-block;
}

#page .container header .menu-wrapper.center-pos {
	float:none;
	display:block;
	margin:0 auto;
}

#page .container header .menu-wrapper.right-pos {
	float:right;
	display:inline-block;
}

#page .container header .header-hgroup.center-pos {
    float:right;
    margin: 0 15px 0 15px;
}

.page-header {
	 margin: 0 0 20px;
}

#page .container .content p {
    text-align:justify;
}
#page .description {
    float:left;
    width:100%;
    min-height:50px;
    margin:10px 0 20px 0}
#page .description .top_line, #page .description .btm_line {
    float:left;
    width:100%;
    height:13px}
#page .description .top_line {
    background:url(images/top-descr-hr.png) no-repeat center 0 transparent;
}
#page .description .btm_line {
    background:url(images/btm-descr-hr.png) no-repeat center 0 transparent;
}
#page .description .text {
    width:90%;
    margin:0 auto;
}
#page  .info_box_area {
    display: block;
    float: left;
    margin: 30px 0 25px;
    width: 100%;
}
#page .container header.entry-header h1.entry-title,
#page .container header.archive-header h1.archive-title {
    /*font-size:20px;*/
    padding:0 0 20px 0
}
#page  .info_box_area .info_box .infobox_title {
    margin:0 0 20px 0;
    font-weight:300}
#page .info_box_area .info_box .info_box_text {
    padding:0 25px;
}
#page .info_box_area .info_box img.icon {
    display:block;
    min-height:51px;
    margin:0 auto 15px;
    min-width:51px;
}
span.text_orange {
    color:#ff5d2a}
.select-menu {
    display:none;
    width:100%;
    margin:0 0 25px 0;
    cursor:pointer;
    padding:6px;
    background:#f9f9f9;
    border:1px solid #e3e3e3;
    color:#777;
    float:left}
header.post-header, .blog_post {
    float:left;
    width:100%}
.post-content .entry-summary,
.post-content .entry-content{clear:both}
.blog .blog_post,
.category .blog_post,
.tag .blog_post,
.author .blog_post,
.archive .blog_post,
.search .blog_post{
	margin:0 0 55px}
.blog .blog_post:last-of-type,
.category .blog_post:last-of-type,
.tag .blog_post:last-of-type,
.author .blog_post:last-of-type,
.search .blog_post:last-of-type{
	margin:0 0 35px}
.blog_post .date_of_post {
    position:relative;
	left:1px;
	width:54px;
    height:54px;
    color:#fff;
    float:left;
    margin:0;
	background: #F15A23;
}
.blog_post .date_of_post .day_post {
    font-size:20px;
    text-align:center;
    filter:none;
    float:left;
    width:100%;
    font-weight:bold;
    margin:5px 0 0 0
}
.blog_post .date_of_post .month_post {
    font-size:13px;
    text-align:center;
    float:left;
    width:100%;
    text-transform:uppercase;
    line-height:18px;
	position:relative;
	top: -6px;
}
.blog_post .post-content {
    float:left;
    width:770px;
	padding:0 0 18px 0;
	border:1px solid #d6d6d6
}
.search .blog_post .post-content {
    width:884px;	}
.blog_post .post-content .entry-content,
.blog_post .post-content .entry-summary{
	padding:20px 4.4% 10px;
	margin-top:0}
.blog_post .post-content footer.entry-meta{
	margin:0;
	padding:0 4.4%}
.blog_post .post-content footer.entry-meta .comments-link,
.blog_post .post-content footer.entry-meta .author-link,
.blog_post .post-content footer.entry-meta .cat-links,
.blog_post .post-content footer.entry-meta .tag-links {
	height:22px;
    width:auto;
    padding:0 0 2px 26px;
    margin:0 10px 0 0}
.blog_post .post-content footer.entry-meta .edit-link{
	float:right;
	width:auto;
    padding:0;
    margin:0;
}
.blog_post .post-content footer.entry-meta .comments-link {
    background:url(images/comment.png) no-repeat 0 0 transparent;
}
.blog_post .post-content footer.entry-meta .author-link {
    background:url(images/user.png) no-repeat 0 0 transparent;
}
.blog_post .post-content footer.entry-meta .cat-links {
    background:url(images/category.png) no-repeat 0 3px transparent;
}
.blog_post .post-content footer.entry-meta .tag-links {
    background:url(images/tag.png) no-repeat 0 3px transparent;
}
.blog_post .post-content footer.entry-meta .comments-link:hover,.blog_post .post-content footer.entry-meta .author-link:hover,.blog_post .post-content footer.entry-meta .cat-links:hover {
    opacity:0.9}
.blog_post .post-content footer.entry-meta .comments-link a,.blog_post .post-content footer.entry-meta .tag-links a,.blog_post .post-content footer.entry-meta .author-link a,.blog_post .post-content footer.entry-meta .cat-links a,.blog_post .post-content footer.entry-meta .edit-link a {
    text-decoration:none;
}
.more-link {
    text-decoration:none;
    font-size:13px}
/* =Custom posts= */
article.post-password-required header.post-header .post-title{
	width:85.61%;
	padding: 0 10% 13px 4.4%;
	background:url(images/post-password.png) no-repeat 97% 0 transparent;
}
article.format-link header.post-header .post-title{
	width:85.61%;
	padding: 0 10% 13px 4.4%;
	background:url(images/post-link.png) no-repeat 97% 0 transparent;
}
article[class*=tag-twitter] header.post-header .post-title{
	width:85.61%;
	padding: 0 10% 13px 4.4%;
	background:url(images/post-twitter.png) no-repeat 97% 0 transparent;
}
article.format-quote header.post-header .post-title{
	width:85.61%;
	padding: 0 10% 13px 4.4%;
	background:url(images/post-quote.png) no-repeat 97% 0 transparent;
}
cite{font-weight:bold}
cite a{font-weight:bold;text-decoration:none}
article.format-image .wp-caption a{
	position:relative;
	display:block;
}
.single-post article.format-image img{
	width: auto;
	max-width: 100%;
	box-shadow: 0 3px 4px rgba(0, 0, 0, 0.5);
}
article.format-image .wp-caption a:after{
	position:absolute;
	display:block;
	left:0;
	top:0;
	width:100%;
	height:100%;
	content:" ";
	background:url(images/image-linked.png) no-repeat center center transparent;
}
article.format-image .wp-caption a:hover:after{
	background:url(images/image-linked-hover.png) no-repeat center center transparent;
}
.mejs-controls .mejs-time-rail .mejs-time-loaded {
	background:#fff !important
}
.entry-content iframe{max-height:380px}

.logo-description {
	float:left;
	display:block;
	word-wrap: break-word;
	text-decoration:none;
	margin:5px 0 0 0;
	/*color:#333333;*/
}

.logo-description h1.site-title {
	font-size:20px !important;
	font-weight:bold;
	line-height:20px;
	/*color:#333333;*/
}

.logo-description h2.site-description {
	font-size:14px !important;
	/*color:#333333;*/
}

header.post-header .post-title {
    float:left;
    width:91.21%;
    margin:14px 0 0;
    padding: 0 4.4% 13px ;
	word-wrap: break-word;
	border-bottom:2px solid #f15a23;
}
header.post-header .post-title a {
    text-decoration:none;
}
#page .container #secondary {
    float:left;
    width:100%;
    margin:10px 0 0 0
}
#page .container #secondary .widget {
    float:left;
    width:98%;
}
#page .container #secondary .widget h3.widget-title, #page .container #secondary .widget h1.widget-title {
    font-size:17px;
    border-bottom:2px solid #f15a23;
    padding:0 0 10px 0;
    margin:0 0 20px 0
}
#page .container #secondary .widget ul {
    float:left;
    width:100%;
    list-style:none;
    margin:0 0 0 8px
}
#page .container #secondary .widget a {
    font-size:13px;
    text-decoration:none
}
#page .container #secondary .widget ul li {
    background:url(images/arrow_cat.png) no-repeat 0 8px transparent;
    margin:0 0 10px 0
    float:left;
    width:95%;
    padding:0 0 0 15px;
}
#page .container #secondary .widget ul li:hover {
    background:url(images/arrow_cat_curr.png) no-repeat 0 8px transparent;
    margin:0 0 10px 0
    float:left;
    width:95%;
    padding:0 0 0 15px;
}
#page .container #secondary .widget ul li.cat-item {
    background:url(images/arrow_cat.png) no-repeat 0 8px transparent;
    float:left;
    width:95%;
    padding:0 0 0 15px;
}
#page .container #secondary .widget ul li.current-cat,#page .container #secondary .widget ul li.cat-item:hover {
    background:url(images/arrow_cat_curr.png) no-repeat 0 9px transparent;
    float:left;
    width:95%;
    padding:0 0 0 15px;
}

/*calendar widget*/
#calendar_wrap{
	width:212px;
	border:1px solid #d9d9d9;
	padding:30px;
	margin: 0 auto;
}
#calendar_wrap #wp-calendar{
	border:0px;
	padding:0;
	margin:0;
	width:212px
}
#calendar_wrap #wp-calendar thead{
	display:block;
	float:left;
}
#calendar_wrap #wp-calendar tbody{
	width:210px;
	float:left;
}
table#wp-calendar td{
	padding:7px 5px;
	border:0px;
	text-align:center;
}
table#wp-calendar th{
	width:20px;
	display:inline-block;
	padding:7px 5px;
	border:0px;
	text-align:center;
	color:#2c9bb3;
}
table#wp-calendar th:last-child,table#wp-calendar th:nth-child(6){
	color:#333333
}
#wp-calendar caption{
	border-bottom:2px solid #d6d6d6;
	padding:0 0 15px 0;
	margin:0 0 13px 0;
	text-transform:uppercase;
	font-size:18px;
}
#wp-calendar td{
	width: 20px;
	height:14px;
	font-size:12px;
	line-height:14px;
	float:left;
	border:0px;
	color:#d6d6d6;
}
table#wp-calendar td.cal_has_posts{
	width:18px;
	border:1px solid #d6d6d6;
	border-radius:16px;
	color:#d6d6d6;
}
#wp-calendar td#today, #wp-calendar td#today~td{
	color:#8a8a8a;
}
table#wp-calendar td[colspan="1"]{
	width:18px;
}
table#wp-calendar td[colspan="2"]{
	width:50px;
}
table#wp-calendar td[colspan="3"]{
	width:80px;
}
table#wp-calendar td[colspan="4"]{
	width:110px;
}
table#wp-calendar td[colspan="5"]{
	width:140px;
}
table#wp-calendar td[colspan="6"]{
	width:170px;
}
table#wp-calendar td#prev{
	width:80px;
	text-align:left;
}
table#wp-calendar td#next{
	width:80px;
	text-align:right;
}

input#s {
    background:url("images/search_icon.png") no-repeat scroll 97% 5px transparent;
    border-radius:2px 2px 2px 2px;
    float:left;
    font-size:13px;
    height:22px;
    line-height:1.2em;
    padding:4px 32px 4px 5px;
    width:235px;
}
input[type="password"] {
	border: 1px solid #e5e5e5;
	border-radius:2px 2px 2px 2px;
	font-size:13px;
    height:22px;
    line-height:1.2em;
    padding:4px 5px;
    width:220px;
}

#back-top   {
	bottom: 55px;
    display: none;
    position: absolute;
    right: 2%;
}

#back-top a  {
	text-decoration: none;
	font-size: 18px;
	color: #000;
}

.glr-container-image  {
	float:left;
	width:100%;
	display:block;
	margin:30px 0;
	position:relative;
}

table {
	border-collapse: collapse;
	text-align: left;
	width: 100%;
}
table {
	font: normal 12px/150% Arial, Helvetica, sans-serif;
	background: #fff;
	border: 1px solid #d6d6d6;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
}
table td,
table th {
	padding: 7px 10px;
}

table thead th,
table th {
	/*color:#333333; */
	font-size: 14px;
	border-bottom: 1px solid #d6d6d6;
} 

table tbody td {
	/*color: #7D7D7D; */
	border-bottom: 1px solid #d6d6d6;
	font-size: 12px;
	font-weight: normal;
}
table tbody tr:last-child td:last-child {
	border-right:1px solid #d6d6d6;
}
table tfoot td div {
	border-top: 1px solid #8C8C8C;
	background: #EBEBEB;
} 

table tfoot td {
	padding: 0;
	font-size: 12px
} 

table tfoot td div{
	padding: 2px;
}

table tfoot td ul {
	margin: 0;
	padding:0;
	list-style: none;
	text-align: right;
}

table tfoot  li {
	display: inline;
}

.post-content .entry-content table tbody tr th a {
	color:#F15A23;
	text-decoration:none;
}

table tfoot li a {
	text-decoration: none;
	display: inline-block;
	padding: 2px 8px;
	margin: 1px;
	color: #F5F5F5;
	border: 1px solid #8C8C8C;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #8C8C8C), color-stop(1, #7D7D7D) );
	background:-moz-linear-gradient( center top, #8C8C8C 5%, #7D7D7D 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#8C8C8C', endColorstr='#7D7D7D');
	background-color:#8C8C8C;
}
table tfoot ul.active,
table tfoot ul a:hover {
	text-decoration: none;
	border-color: #7D7D7D;
	color: #F5F5F5;
	background: none;
	background-color:#8C8C8C;
}

pre {
	background: #f5f5f5;
	color: #666;
	border:1px solid #d6d6d6;
	font-family: monospace;
	font-size: 14px;
	margin: 20px 0;
	overflow: auto;
	padding: 20px;
	white-space: pre;
	white-space: pre-wrap;
	word-wrap: break-word;
}

code,
kbd,
pre,
samp {
	font-family: monospace, serif;
	font-size: 14px;
	-webkit-hyphens: none;
	-moz-hyphens:    none;
	-ms-hyphens:     none;
	hyphens:         none;
}

blockquote,
q {
	-webkit-hyphens: none;
	-moz-hyphens:    none;
	-ms-hyphens:     none;
	hyphens:         none;
	quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
	content: "";
	content: none;
}

blockquote {
	font-size: 18px;
	font-style: italic;
	font-weight: 300;
	margin: 24px 35px;
}

blockquote blockquote {
	margin-right: 0;
}

blockquote cite,
blockquote small {
	font-size: 14px;
	font-weight: normal;
	text-transform: uppercase;
}

blockquote em,
blockquote i {
	font-style: normal;
	font-weight: 300;
}

blockquote strong,
blockquote b {
	font-weight: 400;
}

small {
	font-size: smaller;
}

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sup {
	top: -0.5em;
}

sub {
	bottom: -0.25em;
}

code {
	font-size: 12px;
	margin-left: 3px;
	color: #686758;
}

address {
	font-style: italic;
	margin: 0 0 24px;
}

.head-container {
	position:relative;
	left:0;
	width:100%;
	display:block;
	background-size: cover;
	background-attachment: fixed;
	background-position:center center;
	z-index:9999;
}

.head-container.fixed {
	position:fixed;
	top:0;
	left:0;
	-webkit-box-shadow: 0px 2px 2px rgba(50, 50, 50, 0.3);
	-moz-box-shadow:    0px 2px 2px rgba(50, 50, 50, 0.3);
	box-shadow:         0px 2px 2px rgba(50, 50, 50, 0.3);
	min-height: 0 !important;
	background-attachment:scroll !important;
	background-image:none !important;
	z-index: 99999;
	background-color:#fff;
}

.head-container.is_indent {
	top:32px;
}

.single-post #comments ol.commentlist li img.avatar,
.page #comments ol.commentlist li img.avatar  {
	padding: 3px;
	width: 32px;
	height: auto;
	background: #f7f6f7;
	border: 1px solid #f0eef0;
	line-height: 1;
}

#comments.comments-area h2.comments-title,
#comments.comments-area #respond.comment-respond h3.comment-reply-title {
	margin:20px 0;
	font-weight:normal;
}

#comments.comments-area ol.commentlist {
	margin:0 0 20px 0;
	padding: 0;
}

.commentlist,
.commentlist .children {
	list-style-type: none;
	padding: 0;
}
.comment-body {
    padding: 20px 0;
    position: relative;
}

.comment-form-author:before, .comment-form-author:after, .comment-form-email:before, .comment-form-email:after, .comment-form-url:before, .comment-form-url:after, .comment-body:before, .comment-body:after {
    content: "";
    display: table;
}
.comment-form-author:before, .comment-form-author:after, .comment-form-email:before, .comment-form-email:after, .comment-form-url:before, .comment-form-url:after, .comment-body:before, .comment-body:after {
    content: "";
    display: table;
}
.comment-body:after {
    clear: both;
}

#comments.comments-area ol.commentlist li {
	width: 100%;
}

#comments.comments-area ol.commentlist li.comment .comment-author {
	float:left;
	display:block;
	max-width:40px;
}

#comments.comments-area ol.commentlist li.comment .comment-author {
	font-size:12px;
	font-family:inherit;
}

#comments.comments-area ol.commentlist li.comment .comment-author cite.fn {
	display: block;
    float: left;
    width: 100%;
    word-wrap: break-word;
	text-align:center;
}
.comment-meta{
	width:90%;
}
#comments .comment-meta cite.fn,
#comments .comment-meta cite.fn a {
	color:#777777;
	font-style:normal;
}
.comment-content em{
	position:relative;
	top:3px;
}
#comments.comments-area ol.commentlist li.comment .comment-author span.says {
	float:left;
}
.comment-content{
    position:relative;
	float: right;
	width: calc(100% - 78px);
	width: -moz-calc(100% - 78px);
	width: -o-calc(100% - 78px);
	width: -webkit-calc(100% - 78px);
    word-wrap: break-word;
	border: 1px solid #F0EEF0;
    border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
    padding: 14px 14px 0;
}

#comments.comments-area ol.commentlist li.comment .comment-meta a.meta-date {
	color: #A2A2A2;
    font-size: 13px;
	text-decoration:none;
}
#comments.comments-area ol.commentlist li.comment .comment-meta a.comment-edit-link {
	font-size: 13px;
	text-decoration:none;
}
.commentlist .reply {
	position:absolute;
	top:14px;
	right:14px;
}
#comments.comments-area ol.commentlist li.comment .reply a.comment-reply-link {
	text-decoration:none;
}

.comment-respond {
	width:100%;
	display:block;
	margin:20px 0;
}

#comments.comments-area #respond.comment-respond form#commentform.comment-form p.comment-form-comment label {
	margin:0 0 5px 0;
	float:left;
	display:block;
	width:100%;
}

.commentsErrorBox {
    color: #F15A23;
    line-height: 1em;
    margin-bottom: 27px;
    padding: 14px 26px 14px 46px;
	overflow:hidden;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	border: 1px solid #FF5C2C;
	background:url(images/error.png) no-repeat 12px center transparent;
	display:inline-block;
	width:88%;
}	

.commentsErrorBox ul {
	margin:0;
	padding:0;
	list-style:none;
	list-style:none;
	margin:5px 0;
	padding:0;
}

.gallery {
	display:block;
    float:left;
	display:block;
	width:100%;
}
.blog_post .gallery {
	padding:0 0 20px;
}
.gallery .gallery-item {
	float:left;
	display:block;
	margin: 0 4px 4px 0;
	position:relative;
	overflow:hidden;
}

.gallery-caption {
    background-color: rgba(0, 0, 0, 0.7);
    bottom: 0;
    color: #FFFFFF;
    font-size: 14px;
    left: 0;
    line-height: 1.3;
    margin: 0;
    max-height: 50%;
    opacity: 0;
    padding: 2px 8px;
    position: absolute;
    text-align: left;
    -webkit-transition: opacity 400ms ease;
	transition:         opacity 400ms ease;
    width: 100%;
	font-style: italic;
    font-weight: 300;
}

.gallery-caption:before {
    box-shadow: 0 -10px 15px #000000 inset;
    content: "";
    height: 100%;
    left: 0;
    min-height: 49px;
    position: absolute;
    top: 0;
    width: 100%;
}

.gallery .gallery-item .gallery-icon a {
	float:left;
}

.gallery .gallery-item .gallery-icon a img.attachment-thumbnail {
    display: block;
    float: left;
    max-width: 100%;
    width: 100%;
}

.gallery-item:hover .gallery-caption {
	opacity: 1;
}

.gallery-columns-1 .gallery-item, .gallery-columns-2 .gallery-item, .gallery-columns-3 .gallery-item {
    text-align: center;
}

.gallery.gallery-columns-1 .gallery-item:nth-of-type(1n),
.gallery.gallery-columns-2 .gallery-item:nth-of-type(2n),
.gallery.gallery-columns-3 .gallery-item:nth-of-type(3n),
.gallery.gallery-columns-4 .gallery-item:nth-of-type(4n),
.gallery.gallery-columns-5 .gallery-item:nth-of-type(5n),
.gallery.gallery-columns-6 .gallery-item:nth-of-type(6n),
.gallery.gallery-columns-7 .gallery-item:nth-of-type(7n),
.gallery.gallery-columns-8 .gallery-item:nth-of-type(8n),
.gallery.gallery-columns-9 .gallery-item:nth-of-type(9n) {
	margin: 0 0 4px 0;
}

.page-links {
    clear: both;
    font-size: 16px;
    font-style: italic;
    font-weight: normal;
    line-height: 2.2;
    margin: 20px 0;
    text-transform: uppercase;
}

body.page .entry-thumbnail {
    display: block;
    float: left;
    height: auto;
    margin: 0 0 20px;
    max-width: 91.2%;
    padding: 0 4.4%;
}
body.page .entry-thumbnail .wp-post-image {
    box-shadow: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
    height: auto;
    width: 100%;
}

aside #lang_sel {
    z-index: 5;
}

/*Custom Tabs*/
/*
.custom-tabs {
	float:left;
	display:block;
	width:100%;
	max-width:100%;
	height:100%;
	margin:0 0 60px 0;
}

.custom-tabs ul {
	float: left;
	margin: 0;
	width: 100%;
	list-style:none;
	 max-width: 240px;
}

.custom-tabs ul li {
	float: left;
	margin: 0;
	width: 228px;
	min-height: 25px;
	border-bottom: 1px solid #e5e5e5;
	border-right: 1px solid #e5e5e5;
	padding: 0 0 0 10px;
	background-image: url("images/menu_shadow.png");
	background-repeat: no-repeat;
	background-position: right 0;
	border-left: 1px solid #FFFFFF;
	border-left: 1px solid #FFFFFF;
}

.custom-tabs ul li a {
	float: left;
	font-weight: bold;
	line-height: 25px;
	min-width: 10em;
	padding: 14px 5px;
	width: 150px;
	text-decoration:none; color:#818181;
}

.custom-tabs ul li.current {
	background-color: #fefefe;
	border-left:1px solid #e5e5e5;
	border-right:0;
	-webkit-border-top-left-radius: 4px;
	-webkit-border-bottom-left-radius: 4px;
	-moz-border-radius-topleft: 4px;
	-moz-border-radius-bottomleft: 4px;
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
	background-image:none;
}

.custom-tabs ul li:first-child {
	border-top:1px solid #e5e5e5;
}

.custom-tabs ul li.current a {
	border-bottom-color: #6D6D6D;
	border-top-color: #808080;
	color:#3e3e3e;
	outline: 0;
}

.custom-tabs ul li:hover {
	color:#e1704b
}

.custom-tabs .tab-content {
	background: none repeat scroll 0 0 #FFFFFF;
    display: none;
    float: right;
    max-width: 640px;
    min-height: 600px;
    padding: 0 15px;
    width: 100%;
}
*/

@media only screen and (min-width:959px) {
	.single-post .sixteen.columns.alpha.omega .blog_post .post-content {width:94%}
}

/* All Mobile Sizes (devices and browser) */
@media only screen and (min-width:768px) {
	.search header.post-header .post-title { width:94.01%; padding: 0 3% 13px ;}
	.blog_post .post-content .entry-summary{padding:20px 3% 10px;margin-top:0}
	.search .blog_post .post-content footer.entry-meta{	padding:0 3%}
	.search article.post-password-required header.post-header .post-title{width:90.51%;padding: 0 6.5% 13px 3%;}
	.search article.format-link header.post-header .post-title{width:90.51%;padding: 0 6.5% 13px 3%;}
	.search article[class*=tag-twitter] header.post-header .post-title{width:90.51%;padding: 0 6.5% 13px 3%;}
	.search article.format-quote header.post-header .post-title{width:90.51%;padding: 0 6.5% 13px 3%;}
	/*single post*/
	.single-post .eleven.columns.omega{float:right}
	.single-post .five.columns.alpha{float:left}
}
@media only screen and (min-width:768px) and (max-width:959px) {
	.blog_post .post-content { width: 452px;}
	.search .blog_post .post-content { width:692px; }
	#calendar_wrap{padding:10px 3px}
	input#s { width:177px;}
	/*single post*/
	.single-post .sixteen.columns.alpha.omega .blog_post .post-content {width:92%}
}
@media screen and ( max-width: 782px ) {
	.head-container.is_indent {top: 46px;}
}
@media screen and (max-width: 600px) {
	.head-container.is_indent {top: 0;}
}
@media only screen and (max-width:767px) {
	.page-container{margin-bottom:40px;}
    /* nav menu ul & select */
	.menu { display:none; }
	#header_language_select{display:none;}
	.widget_nav_menu .menu {display:block;}
	.main-navigation { float:none !important; }
	#page .container header .header-hgroup { margin: 0 0 15px; }
	.select-menu { display:block; }
	#back-top { display: none; }
	.blog_post .post-content,
	.search .blog_post .post-content {width: 338px;}
	input#s { width:343px; }
	body.post-type-archive #searchform input#s{max-width:100%}
	.comment-meta{	width:80%;}
	#page .container #secondary .widget>ul>li.cat-item{overflow-x:hidden}
	.flex-control-nav{display:none}
	.page-header{width: 94%;padding: 10px 3%;margin:0}
	#comments	{width: 94%;padding: 10px 3%;margin:0}
	article		{width: 94%;padding: 10px 3%;margin:0}
	#colophon	{width: 94%;padding: 10px 3%;margin:0}
	#page .container #secondary	{width: 94%;padding: 10px 3%;margin:40px 0 0 0}
	#colophon .site-info{width:100%}
}

@media only screen and (min-width:480px) and (max-width:767px) {
	.mejs-controls div.mejs-time-rail{width:149px !important}
	.info_box_area .info_box {margin: 0 0 35px 0;float: left;display: block;width: 100%;}
	.responsive .select-menu{margin: 16px 0 25px 0 !important}
}
@media only screen and (max-width:479px) {
	#masthead .social-icon{float: left;clear: both;margin:20px 0;}
	.blog_post .date_of_post {	width: 50px; height: 50px; float:none; left:0; top:1px}
	.blog_post .date_of_post .day_post {font-size: 18px;}
	.blog_post .post-content,
	.search .blog_post .post-content{width: 281px;}
	input#s {   width:235px;}
	#page .container #secondary .widget>ul>li.cat-item{overflow-x:hidden}
	.info_box_area .info_box {margin: 0 0 35px 0;float: left;display: block;width: 100%;}
	.responsive .select-menu{margin: 16px 0 25px 0 !important}
}
*:first-child+html #page .container .content .info_box_area {
    margin-bottom:25px}
@media only screen and (max-device-width:1024px) and (orientation:portrait)  {}
@media only screen and (max-device-width:1024px) and (orientation:landscape) {}

.topgrey {

background-color:#414141;
color:#ffffff;
font-size: 12px;
height:40px;
}

.topgrey a{
color:#ffffff;
text-decoration:none;
padding-right:15px;
}
.topgrey a:visited {
color:#ffffff;
text-decoration:none;}
.topgrey a:hover {
color:#ffffff;
text-decoration:underline;}
.topgrey a:active {
color:#ffffff;
text-decoration:underline;}

.topgrey-inside {
width: 1140px;
margin-left: auto ;
  margin-right: auto ;
position:relative;
top:10px;
left:20px;
}
@media (max-width: 830px) {
.topgrey {
background-color:#414141;
color:#ffffff;
font-size: 12px;
height:90px;
}
}
@media (max-width: 1136px) {
.topgrey-inside {
width: 80%;
margin-left: auto ;
  margin-right: auto ;
position:relative;
top:10px;
}
}

.bottomgrey {
border-top:1px solid #000000;
border-style:dotted;
    clear: both;
background-color:#F0F0F0;
}

.bottomgrey-inside {
    clear: both;
background-color:#DDDDDD;
color:#666666;
font-size: 12px;
height:240px;
width: 1170px;
margin-left: auto ;
  margin-right: auto ;
position:relative;
}
.divfooter {
float:left;
width:22%;
    display: block;
margin-top:30px;
margin-left:17px;
padding-right: 10px;
}
.nav-list-footer {
    margin-bottom: 0;
    padding-left: 15px;
    padding-right: 15px;
}
.navfooter {
    list-style: none outside none;
    margin-left: 0;
    font-family: 'Source Sans Pro',sans-serif;
    font-size: 13px;

}
ul {
    display: block;
}
.navfooter li a {
    color: #666666;
}
.nav-list-footer > li > a, .nav-list-footer {
    text-shadow: 0 0 0;
}
.nav-list-footer > li > a {
    padding: 3px 15px;
}
.nav-list-footer > li > a, .nav-list-footer {
    margin-left: -15px;
    margin-right: -15px;
}
.navfooter > li > a {
    display: block;
    text-decoration: none;
}
.navfooter li a:hover { color: #333333; background-color:#CCCCCC}

@media all and (max-width: 1170px) and (min-width: 800px) {
.bottomgrey-inside {
    clear: both;
background-color:#DDDDDD;
color:#666666;
font-size: 12px;
height:240px;
width: 900px;
margin-left: auto ;
  margin-right: auto ;
position:relative;
}
.nav-list-footer > li > a, .nav-list-footer {
    margin-left: -15px;
    margin-right: -15px;
    width:180px;
}
}
@media all and (max-width: 800px) and (min-width: 600px) {
.bottomgrey-inside {
    clear: both;
background-color:#DDDDDD;
color:#666666;
font-size: 12px;
height:400px;
width: 600px;
margin-left: auto ;
  margin-right: auto ;
position:relative;
}
}
@media all and (max-width: 600px) and (min-width: 300px) {
.bottomgrey-inside {
    clear: both;
background-color:#DDDDDD;
color:#666666;
font-size: 12px;
height:680px;
width: 300px;
margin-left: auto ;
  margin-right: auto ;
position:relative;
}
.divfooter {
width: 300px;
    clear: both;
float:left;
margin-top:30px;
margin-left:17px;
padding-right: 10px;
}
.nav-list-footer > li > a, .nav-list-footer {
    margin-left: -15px;
    margin-right: -15px;
    width: 250px;
}
}
@media all and (max-width: 300px) and (min-width: 150px) {
.bottomgrey-inside {
    clear: both;
background-color:#DDDDDD;
color:#666666;
font-size: 12px;
height:680px;
width: 300px;
margin-left: auto ;
  margin-right: auto ;
position:relative;
}
.divfooter {
width: 300px;
    clear: both;
float:left;
margin-top:30px;
margin-left:17px;
padding-right: 10px;
}
.nav-list-footer > li > a, .nav-list-footer {
    margin-left: -15px;
    margin-right: -15px;
    width: 250px;
}
}
#masthead, #colophon, #content {
    min-height: 0px!important;
border: 0px solid #D6D6D6;
}

and then put this in your footer.php

<?php
/**
 * The template for displaying the footer.
 *
 * Contains the closing of the id=main div and all content after
 *
 * @package WordPress
 * @subpackage Fruitful theme
 * @since Fruitful theme 1.0
 */
?>
		</div>
			<div class="sixteen columns">
				<footer id="colophon" class="site-footer" role="contentinfo">
					<div class="site-info">
						<?php fruitful_get_footer_text(); ?>
					</div><!-- .site-info -->
					<?php if (!fruitful_is_social_header()) {
							   fruitful_get_socials_icon();
						  }
					?>
				</footer><!-- #colophon .site-footer -->
			</div>
			</div><!-- #main .site-main -->
			<div id="back-top">
				<a rel="nofollow" href="#top" title="Back to top">↑</a>
			</div>

		</div><!-- #page .hfeed .site -->
		<!--WordPress Development by Fruitful Code-->
<div class="bottomgrey"><div class="bottomgrey-inside">
<div class="divfooter">
<h4><strong>TC Cuadernos</strong></h4>
<strong>General de Ediciones de Arquitectura, S.L.</strong><br/><br/>
Avda. Reino de Valencia, 84, 6<br/>
46005 Valencia España<br/>
NIF: ESB97319131<br/><br/>

Tel: (+34) 963950443<br/>
Email: info@tccuadernos.com
</div>
<div class="divfooter">
<h4><strong>Contacto</strong></h4>
<ul class="navfooter nav-list-footer">
<li><a href="http://www.tccuadernos.com/content/17-contactar" title="Contacto">Contactar</a></li>
<li><a href="http://www.tccuadernos.com/contactenos" title="Formulario">Formulario de Contacto</a></li>
</ul>
</div>
<div class="divfooter">
<h4><strong>Ayuda</strong></h4>
<ul class="navfooter nav-list-footer">
<li><a href="http://www.tccuadernos.com/content/6-como-comprar">Cómo comprar en tccuadernos.com</a></li>
<li><a href="http://www.tccuadernos.com/content/7-formas-de-pago" title="Pago">Formas de Pago</a></li>
<li><a href="http://www.tccuadernos.com/content/8-envio-y-plazos-de-entrega" title="Transporte">Envío y Plazos de entrega</a></li>
<li><a href="http://www.tccuadernos.com/content/10-publicaciones-digitales" title="Digital">Publicaciones digitales</a></li>
</ul>

</div>
<div class="divfooter">
<h4><strong>Empresa</strong></h4>
<ul class="navfooter nav-list-footer">
<li><a href="http://www.tccuadernos.com/content/16-acerca-de-nosotros" title="Nosotros">Acerca de nosotros</a></li>
<li><a href="http://www.tccuadernos.com/content/2-politica-de-privacidad" title="Privacidad">Política de privacidad</a></li>
<li><a href="http://www.tccuadernos.com/content/3-condiciones-generales" title="Condiciones Generales">Condiciones Generales</a></li>
<li><a href="http://www.tccuadernos.com/index.php?controller=sitemap" title="Mapa web">Mapa del sitio</a></li>
</ul>
</div>
</div></div>
<?php wp_footer(); ?>
</body>
</html>

And this on your header.php

<?php
/**
* The Header for our theme.
* Displays all of the <head> section and everything up till <div id="main">
* @package WordPress
* @subpackage Fruitful theme
* @since Fruitful theme 1.0
**/
?><!DOCTYPE html>
<!--[if IE 7]><html class="ie ie7" <?php language_attributes(); ?>><![endif]-->
<!--[if IE 8]><html class="ie ie8" <?php language_attributes(); ?>><![endif]-->
<!--[if !(IE 7) | !(IE 8)  ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<?php fruitful_metadevice(); ?>
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php fruitful_get_favicon(); ?>
<!--[if lt IE 9]><script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script><![endif]-->
<?php wp_head(); ?>
</head>
<body <?php
		$additional_body_classes = '';
		if (class_exists('Woocommerce')) {
			if (is_shop()) { $additional_body_classes .= 'shop-page '; }
		}
		$theme_options = fruitful_ret_options("fruitful_theme_options");
		if (isset($theme_options['responsive']) && ($theme_options['responsive'] == 'on')) {
			$additional_body_classes .= 'responsive ';
		}
		body_class(trim($additional_body_classes));
	  ?>>

<div class="topgrey"><div class="topgrey-inside">
<span style="float:left;">TC Cuadernos. Revista de arquitectura- libros de arquitectura</span>
<span style="float:right;">
<a href="http://www.tccuadernos.com/mi-cuenta">Crear cuenta</a>
<a href="http://www.tccuadernos.com/mi-cuenta">Iniciar sesión</a>
<img style="position:relative; top:2px; right:4px;" src="http://www.tccuadernos.com/blog/wp-content/themes/tccuadernos//images/carrito.png"><a href="http://www.tccuadernos.com/pedido-rapido">Carrito</a>
<a href="http://www.tccuadernos.com/content/category/2-ayuda">Ayuda</a>
</span>
</div></div>

	<div id="page" class="hfeed site">
		<div class="head-container">
			<div class="container">
				<div class="sixteen columns">
					<header id="masthead" class="site-header" role="banner">
						<?php
							if (fruitful_is_social_header()) {
								fruitful_get_socials_icon();
							} 

							$logo_pos_class = $menu_pos_class = '';
							$options = fruitful_get_theme_options();
							$logo_position = $options['logo_position'];
							$menu_position = $options['menu_position'];

							$logo_pos_class = fruitful_get_class_pos($logo_position);
							$menu_pos_class = fruitful_get_class_pos($menu_position);
						?>

						<div data-originalstyle="<?php echo $logo_pos_class; ?>" class="header-hgroup <?php echo $logo_pos_class; ?>">
							<?php echo fruitful_get_logo(); ?>
						</div>	

						<div data-originalstyle="<?php echo $menu_pos_class; ?>" class="menu-wrapper <?php echo $menu_pos_class; ?>">
							<?php fruitful_get_languages_list(); ?>

							<?php if (class_exists('Woocommerce')) { ?>
								<?php if (!empty($theme_options['showcart'])) {
										if (($theme_options['showcart']) == 'on'){?>
											<div class="cart-button">
												<a href="<?php echo get_permalink( woocommerce_get_page_id( 'cart' ) ); ?>" class="cart-contents">
													<div class="cart_image"></div>
													<span class="num_of_product_cart"><?php global $woocommerce;
													echo $woocommerce->cart->cart_contents_count; ?> </span>
												</a>
											</div>
									<?php } ?>
								<?php } ?>
							<?php } ?>

							<nav role="navigation" class="site-navigation main-navigation">
								<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
							</nav><!-- .site-navigation .main-navigation -->
						</div>
					</header><!-- #masthead .site-header -->
				</div>
			</div>
		</div>		

		<div class="container page-container">
			<?php do_action( 'before' ); ?>
				<div class="sixteen columns">

I haven’t modify anything else… just a text widget for the social icons. Create a text widget and write this on it:

<div id="colophon">
					<div class="social-icon"><a target="_blank" href="http://www.tccuadernos.com/blog/feed/" class="facebook"></a><a target="_blank" href="http://www.tccuadernos.com/blog/feed/" class="twitter"></a><a target="_blank" href="http://www.tccuadernos.com/blog/feed/" class="googleplus"></a><a target="_blank" href="http://www.tccuadernos.com/blog/feed/" class="rss"></a></div>				</div>

I don’t think I can’t do more for you, sorry…be aware that the files i have modify are not editable from wordpress admin screen, you will have to hard code them…

kwiecu

(@kwiecu)

10 years ago

Thanks 🙂 I’ll tray it

kwiecu

(@kwiecu)

10 years ago

I’ve manged to customize my style.css using a great plugin – Child Theme Configurator. I don’t know what values I should set for full-width. I changed values below into higher but it doesn’t work. Any advice?

.container .sixteen.columns {
    width: 1160px;
}
.container {
    width: 1160px;
}
.container .eleven.columns {
    width: 840px;
}
.blog_post .post-content {
    width: 770px;
}

PHP files also should be changed in a child theme, should’t they?

Thanks in advance for any help.

Thread Starter

Lucas

(@luquerias)

10 years ago

.container .sixteen.columns {
    width: 1160px;
}
.container {
    width: 1160px;
}
.container .eleven.columns {
    width: 840px;
}
.blog_post .post-content {
    width: 770px;
}

These are the values I changed on my child theme… no, you don’t need to modify php files in a child theme, it’s just for the css. You don’t need to modify php unles you want to make higher modification…

Cold you post a link to your site?

kwiecu

(@kwiecu)

10 years ago

I think I haven’t been clear enough.

I’d like to change footer.php and header.php as you posted above. I was able to edit style.css, however, I’d like to obtain full width website (now it’s only 1160px).

I’m gonna post the result when it’s ready 🙂

Thread Starter

Lucas

(@luquerias)

10 years ago

If you want to change footer and header like me you will have to put the codes I wrote above on your php files header.php and footer.php and the css on the css file.

What do you mean with full width website? It has to be some width…. or you want it to be 100% in any device, like this theme?

Thread Starter

Lucas

(@luquerias)

10 years ago

But if you change width more than 1160px the footer will not show properly, it will be 1160px…

kwiecu

(@kwiecu)

10 years ago

Exactly, I want it to be 100% in any device.

So you say I should edit parent theme’s header and footer.php? Every update overwrite it, right?

Thread Starter

Lucas

(@luquerias)

10 years ago

Yeah, every update of the theme will overwrite your php files… it’s the bad thing about this kind of modifications on php files.

Ok, if you want your theme to 100% and fluid you can try this:

.container {
    width: 100%;
}
.container .sixteen.columns {
    width: 100%;
}
.container .eleven.columns {
    width: 80%;
}
.blog_post .post-content {
    width: 100%;
}

And then some media css queries:

@media all and (max-width: 1600px) and (min-width: 1000px) {
.container {
    width: 100%;
}
.container .sixteen.columns {
    width: 100%;
}
.container .eleven.columns {
    width: 75%;
}
.blog_post .post-content {
    width: 100%;
}

}

@media all and (max-width: 1250px) and (min-width: 1000px) {
.container {
    width: 100%;
}
.container .sixteen.columns {
    width: 100%;
}
.container .eleven.columns {
    width: 70%;
}
.blog_post .post-content {
    width: 100%;
}

}

@media all and (max-width: 1050px) and (min-width: 950px) {
.container {
    width: 100%;
}
.container .sixteen.columns {
    width: 100%;
}
.container .eleven.columns {
    width: 65%;
}
.blog_post .post-content {
    width: 100%;
}

}

Try this css queries if you want it to be 100% responsive.

Viewing 15 replies - 1 through 15 (of 25 total)

1 2 →

The topic ‘Width of the theme’ is closed to new replies.