[ahmetsali]

Hi, in order to align masonry items horizontally you need to edit js/main.js source code and find line : 512,

                                // initialize isotope
				$containerBlog.isotope({
				  itemSelector : '.hentry',
				  layoutMode : 'masonry'
				});

and replace it with this;

                                // initialize isotope
				$containerBlog.isotope({
				  itemSelector : '.hentry',
				  layoutMode : 'fitRows'
				});

But this may not be the full solution because in order to align masonry items, their content should almost be identical, same aspect ratio for featured images, similar post title and excerpt lengths etc..

[ahmetsali]

the custom css code in my previous post works on my side and there is no chance it can conflict with external js code. Let me know when you add the custom css code again, and will check why it is not working on your site.

[ahmetsali]

Hi, it is possible to add custom fonts to the theme, check out the links below;

http://wordpress.org/plugins/font-uploader/

http://wpmu.org/adding-custom-fonts-to-wordpress-with-font-face-and-css/

http://wpsites.net/web-design/fonts-wordpress/

[ahmetsali]

actually it is not a problem, it is how we designed this theme, we don’t show post meta on blog list on mobile devices, only show them on post single pages. You can try this custom css to make it always appear;

@media (max-width: 767px) {
.blog-posts .entry-meta { display: block; }
}

[ahmetsali]

Hi, Alexey, please provide your url to see what’s wrong.

[ahmetsali]

you can try this custom css code;

.middle .row { max-width: 1040px; }

[ahmetsali]

Hi, this theme uses 12 columns grid, so you have to adjust your columns to be 12 columns in total. You can limit container width with custom css to shrink columns.

[ahmetsali]

Hi, you can align images left/right/center in wordpress’ content editor,

see this video.

[ahmetsali]

Hi, try this custom css code;

.main-navigation ul li { max-height: none; }
#site-navigation { padding-bottom: 0px; }

[ahmetsali]

Hi, you can try this custom css code;

.site-header .social { text-align: right; margin: 0 32px 20px 0;}

[ahmetsali]

Hi,

1-) try this custom css code

#commentform textarea {
    width: 100%;
    height: 220px;
}

2-) try this custom css code;

@media (min-width: 1200px) { 
	#secondary .widget { padding-left: 2em; }
}

[ahmetsali]

images only shrink if their width is bigger than their container width, in your situation it doesn’t shrink since image width is smaller than container width.

[ahmetsali]

ok, we will fix this in the next update, thanks for the feedback.

[ahmetsali]

Hi ,it can be possible but it requires more hard work, we can only provide customizations of some lines of code. You can hire someone experienced to do the job for you, if you are not familiar to wordpress-html coding.

[ahmetsali]

Hi,

1-) try this custom css code;

.readable-content {
    max-width: none;
}

if it doesn’t suit you, provide your page url.

2-) a-) You can try this custom css code;

.site-header .row {
    background: #eee;
}

b-) You can use image logo in the header: Theme Options > General > Image Logo.

[ahmetsali]

Hi, there might be some drawbacks about this approach but here is a starting point for you, you can try this custom css;

.rm-open .rm-wrapper {
    top: 0;
    bottom: 0;
}
.rm-open#rm-container {
    width: 33.3333%;
    max-width: none;
}

[ahmetsali]

if you want to make your current homepage narrow, try this custom css;

.readable-content { max-width: 580px; }

[ahmetsali]

try this one;

body.page-template-page-full-width-php #content > .row-fluid {
    max-width: 1200px;
}

this works on my side, if you can’t get it work, please provide your page url to see what’s wrong.

[ahmetsali]

or you can add this at the end of the custom css;

.entry-meta {
    display: block !important;
}

[ahmetsali]

all images will be responsive by default.

[ahmetsali]

Hi, actually this is how flexslider handles images in various resolutions. But you may try the custom css code below;

.flexslider .slides img {max-height: 427px; width: auto; margin: 0 auto; }

[ahmetsali]

i see you have used toogle shortcode, use accordion shortcode instead.

[accordions]
	[accordion active="active" title="accordion 1"]Put your content here.[/accordion]
	[accordion title="accordion 2"]Put your content here.[/accordion]
[/accordions]
 
active="" ... active keyword is for opened style
 
title="" ... the caption text of the accordion

[ahmetsali]

also add this custom css code;

.post-list .date { display: none; }

[ahmetsali]

Hi, post titles are center aligned by default.

[ahmetsali]

Hi, there is no vertical align in css in an easy way, but you can make the image look like centered with percentage margin-top as;

#bulb_before, #bulb_after {
    margin-top: 33%;
}

[ahmetsali]

Hi, we post answers generally in 24-48 hours.

now checking your site.

[ahmetsali]

@Kaneisha

try this custom css code;

input[type="image"] {
    border: 0 !important;
    width: auto !important;
}

[ahmetsali]

i just updated the code in my post above, try again.

[ahmetsali]

can you provide the page url where custom css ddin’t effect.

[ahmetsali]

sorry, the code i provided was for tabs, you can use this for toggles;

.toggle { font-size: 16px; }

[ahmetsali]

Hi, try this custom css code;

.page .site-header { padding-bottom: 0.3em; }
.page .entry-content { padding-top: 0em; }

[ahmetsali]

Hi, put the code below to the External JS box under Theme Options > Style Tab.

<script>
(function ($) {
	$(function() {
		$('.blog-posts .hentry').each(function(index, element) {
                       $(this).find('.featured-image, .entry-content > .media-wrap, .entry-content > .flexslider').prependTo(this);
                });
	});
})(jQuery);	
</script>  

and put this to Custom Css box;

.hentry > .featured-image, .hentry > .media-wrap, .hentry > .flexslider { margin-top:0;  margin-bottom: 16px;  }

[ahmetsali]

hi, can you provide your page url with the accordions?

[ahmetsali]

Hi, try this custom css;

.home .post-list { max-width: 780px; margin-left: auto; margin-right: auto; }
.launch-wrap { text-align: center; }

[ahmetsali]

Hi, this is not easy to do with some lines of code. If you are not familiar with html coding you may consider working with a professional for further customizations.

[ahmetsali]

Hi, you can add lists with custom bullet icons like this;

<ul class="icons">
  <li><i class="icon-file"></i>Lists</li>
  <li><i class="icon-pushpin"></i>Buttons</li>
  <li><i class="icon-camera"></i>Button groups</li>
  <li><i class="icon-thumbs-down"></i>Navigation</li>
  <li><i class="icon-leaf"></i>Prepended form inputs</li>
  <li><i class="icon-download-alt"></i>Download icon</li>
</ul>

You can see available icons at;

http://fontawesome.io/3.2.1/icons/

[ahmetsali]

Hi,

1-) to remove date on post list

.blog-posts .post-date { display: none; }

2-) to remove the archives by month, and format.

.archives-by-month, .archives-by-format { display: none; }

3 and 4-) Put the code below to the External JS box under Theme Options > Style Tab.

<script>
	jQuery(document).ready(function($) {
		$('.last-30-posts h2').text('all posts');
		$('.archives-by-category').prependTo('.entry-content');
		});
</script>  

[ahmetsali]

it is working now, you may report the problem to plugin authors if you want to use these plugins.

[ahmetsali]

i made a mistake in the custom css, that should work;

h1.site-title img { max-height:  none; }

[ahmetsali]

Are you sure? i can still see the share plugin on your posts. And also exclude google profile from sidebar. These two causes the js errors.

[ahmetsali]

Hi, yes it is possible with some custom css code;

.main-navigation ul ul ul { left: 160px;  right: auto; border-right: 0; border-left: 3px solid #096; }
.main-navigation ul ul ul:after { top: 1.0em; left: auto; border:0; border-top: 12px solid #096; border-left: 12px solid transparent; right: 100%; margin-right: 3px;}

[ahmetsali]

Hi, about your question one;

– to disable image scaling for header logo, try this custom css code;

h1.site-title img { max-height: auto; }

[ahmetsali]

Hi, try this custom css;

.tabs .tab-content { font-size: 16px;}

[ahmetsali]

Hi, yes it is possible with some javascript code. Put the code below to the External JS box under Theme Options > Style Tab.

<script>
	jQuery(document).ready(function($) {
		$('.rm-button-open').click(function() { 
				$.fancybox({  
					type : 'iframe',
					href : 'http://www.youtube.com/embed/Du8ld5hrqN0?rel=0'
				 });
			});
			
		});
</script>

and change href to your video embed url accordingly.

[ahmetsali]

I still see plugin related js errors on your console;

Uncaught TypeError: Object [object Object] has no method 'on' sharing.js?ver=20121205:50
Uncaught TypeError: Object [object Object] has no method 'on' gprofiles.js?ver=2013Novaa:2

once disable all plugins then let me test it with all plugins disabled.

[ahmetsali]

Hi, you can add it as a x2 size portfolio item and ligthbox video format just like other.

[ahmetsali]

you have some javascript errors on your console, disable all plugins and see if it still occurs.

[ahmetsali]

ok, this should work;

#home:after {
content: "";
background-image: url('http://www.branddiaries.com/development/wp-content/uploads/2013/11/spiral.png');
background-position: left top;
background-repeat: repeat-y;
width: 44px;
height: 100%;
position: absolute;
top: 0;
left: -19px;
z-index: 1000; }

[ahmetsali]

Hi, since this is a responsive theme and container adjusts it’s width and height to different resolutions, there are no exact dimensions.

[ahmetsali]

Hi, try this custom css;

.ribbon strong { color: #FFF; text-shadow: 0 1px 0 #000; }
.ribbon-stitches-bottom, .ribbon-stitches-top { border-top-color: rgba(255, 255, 255, 0.25);
   -moz-box-shadow: none;
   -webkit-box-shadow: none;
   box-shadow: none;
}