WordPress is a fantastic blogging tool, but unfortunately not perfect. Even after many updates and hundreds of new features, some basic user interface improvements are still needed for the usability.
I've been writing a lot of long list articles lately and in the process I discovered a problem with the built-in visual post editor in WordPress that I didn't know about before, or it didn't really bother me before.
In this quick tutorial, I'll show you how to change the width of the main text column in the visual WordPress post editor.
Problem
When creating large posts (mostly with pictures), I often had to save and preview the post to make sure the list was formatted correctly. In addition, I often had to write text directly on my image, because the size of the editor window is almost one and a half times larger than any of my images (as well as the main content block on my site):
Solution
The solution is relatively simple, but you need to know how to implement it. First, you need to find out the current width of the content block on your site. In my case, my blog's block width is 650px.
Then you will need to open your file functions.php and add the following code at the bottom of the file:
Function fb_change_mce_buttons ($ initArray) ($ initArray ["width"] = "650px"; return $ initArray;) add_filter ("tiny_mce_before_init", "fb_change_mce_buttons");
Result
As a result, you will see a post editor that matches the width of your content block on the site itself. This way, you can be sure that when you create an entry through the admin console, it will look as close as possible to the final result.
Remember that some screen resolutions will change your settings and, for example, will only show one column - this will depend on the width of your content.
From the author: I greet you friends. In the next article on the topic of WordPress, we will look at the question of how to change a WordPress template. If you have never encountered the need to change a WordPress template, then be sure to read this article, because sooner or later you will most likely have to face the issues of customizing and editing a WordPress template.
First, let's define the most common questions that users face when customizing a WordPress template for themselves. Here is an approximate list of them:
how to edit a WordPress template
change template width on WordPress
how to resize WordPress template
how to change WordPress template color
how to change font in WordPress template
And this is just a small list of problems that you may encounter or that you can help others solve, including for a fee if you are developing custom-made websites.
All questions in the list above can be solved in two ways, depending on the theme that is used for the site. Let's start with the simplest option, which doesn't require any layout knowledge. This option is suitable if the template supports editing from the settings.
Let's go to the section Appearance- Customize and see home page site and on the left side of the page there are available site settings. Among them may be design settings.
For example, let's try to change the color scheme of the site. Let's go to the Colors menu and change the background of the side and central parts of the site.
As you can see, it is quite convenient and changing the color of a WordPress template is quite simple - we see the result immediately and can evaluate it.
However, not every theme offers all the WordPress template customization we need. For example, it is unlikely that there will be settings that allow you to change the width of the template on WordPress, for example, even in the current theme there are no settings that allow you to change the font in the template, and so on. How to be in this case? This is where we will have to resort to the second option, and here we already need some layout skills.
So, most often we need to edit only one file - this is the style.css stylesheet. It is located in your theme folder. Let's change the font color as an example. By the way, you can do this directly from the WordPress admin area. Just be careful and attentive so as not to accidentally "break" the site. Best do backup topics before changing something in it. So, go to the Appearance - Editor menu and by default you should have a theme stylesheet open for editing.
If it is not, then select this file from the list on the right, it is called Style Sheet (style.css). Most often, the font color is set in the body, so we will find the styles for this element and write red for the font color.
After saving the file, we can refresh the site and see the red color for the main font on the site.
As you can see, customizing a WordPress template for yourself is a fairly simple task. A little knowledge of CSS is enough and you can modify the WordPress template and make the necessary template customization. In the same way, we can solve other similar problems. On this I say goodbye to you. Good luck and see you soon!
It often happens that a theme you like has a narrow area for entries and its settings do not provide for changing the width. In this case, it can be increased, with minimal knowledge Html and CSS... For example, let's use the popular, free Patagonia theme. You can expand the theme with the help of a wonderful plugin Firefox— Firebug... First you need to install it by downloading it from here. Then turn on plugin, as it shown on the picture - Tools tab — Web development — Firebug — open Firebug:
After that, at the bottom of the screen, it is necessary to select various elements by hovering the cursor and clicking with the mouse. In this case, on the right side, will be displayed CSS styles, and in the area of the page, this or that area will be highlighted - the main one, sidebar, header... We are now interested in the main area that we will get to when we "enter" the tag For example, increase the width main area from 550 pixels to 620 pixels. To do this, you need to make changes to the line width: 550px file style.css... If the theme is already installed, you can edit this file directly from the admin panel, if not, then you need to unpack the archive with the theme and make changes to the file using the editor. In our case, the theme is installed, so go to admin panel— Appearance — Editor- open the style.css file, find the line width: 550px and change the width value 550px to 620px. We press Update file. We go to the site and see that the area of posts has expanded, but in some places "ran over" to the right column. In this case, we need to proportionally narrow this area. For this, we also use Firebug plugin as in the previous case. Find the tag We do the same procedure with editing style.css as in the previous case with the main area, only now we edit the line margin: 0 0 0 580px; Change the padding value in it from 580px to 630px. Now everything is fine. The recording area is wider and does not overlap the area sidebar... It also happens that styles are written not only in the style.css file, but also in the file screen.css. Some WordPress Themes rather narrow in the side menu, the so-called sidebar, or, on the contrary, narrow in the articles section and naturally some webmasters need to expand certain boundaries, for example, that the banners fit. In this article, I will explain how resize the header, template, article section, or sidebar. You may want to change the size of the template both at the very beginning, as soon as you have installed it, and after you have written a number of articles and the first dozens of visitors began to appear. For example, I needed to expand the template after I wanted to try to earn the first couple of cents on advertising from my work - a blog. For these purposes, the banner advertising system from Google-Adsense was chosen. But in order to earn at least an unfortunate two cents, two parameters must be taken into account: those. we need to combine the first and second points, namely, to make sure that the banners from Google or Yandex are placed in the designated places, the left sidebar and in the articles. Since my template was too narrow for these purposes, and it makes no sense to hang small banners, because no one will click on them, then there is only one thing left - to stretch the side menu and the articles section. To understand how much we need to increase the width of this or that element, we need not to estimate at a glance "a centimeter is enough there, and half a centimeter there", but to find out these numbers exactly, in pixels. Almost any browser will help us with this, for example: Personally, I will show on the example of Safari, and you on any browser convenient for you. The difference should be in only one button. So, the base - our site size consists of 4 elements, the size of the template itself, the page size, the size of the article block and the left menu block. We will increase everything in turn, do not worry, it’s not scary. To change the width of the left menu. In this case, you can change both the pixels, as we did in paragraph 3-5, and the percentage on the page. To do this, it is enough to change the parameter instead of pixels That's all. Now we know what values we need to change in order for everything to fit. The only thing left to do is to enter the necessary data into the style file. After we understood the numbers, and wrote them down somewhere on a piece of paper, let's now change them for everyone, and not just for ourselves. For this: Personally, I chose the first, easy way for myself, since it allows you to make changes in just a couple of seconds. So, we are looking for the value 980. Searching the file returned only two parameters, which I need to change. The first one is responsible for the width of the entire site: #page (min-height: 100px; clear: both; width: 96%; padding: 0; padding-top: 24px; max-width: 980px; overflow: hidden; The second is for the width of two elements, the list of articles, and the left menu: Main-container (width: 980px; margin: 0 auto; overflow: hidden; padding: 0; background: #fff; position: relative; -webkit-box-shadow: 0px 0px 10px rgba (50, 50, 50, 0.17) ; -moz-box-shadow: 0px 0px 10px rgba (50, 50, 50, 0.17); box-shadow: 0px 0px 10px rgba (50, 50, 50, 0.17);) All we have to do is change the values 980 to 1080 and load back. That's all, but if you still have any questions, write in the comments, or me at, I will be glad to help you. You must be able to resize your template if you want to create a good website. By default, many themes offer awkward template skeletal dimensions. Narrow topics are just as bad as too broad. You must have a “sweet spot” that is just right for performing the functions on the site. Only in this way the content of your resource will be displayed correctly, and all the widgets will fit into the sidebar. In this article, you will learn what are the ways to adjust the size of the side columns. Without a sidebar, the site looks useless. If you want to somehow visually dilute the content of the page, you should change the WordPress template by adding a sidebar of a certain size. It usually has sidebars already installed by default. But the width of the sidebar is not always optimal for a particular project. Let's take a look at the methods of how to change the width and height of the side part of a WordPress site. You may not need to change anything. Change the sidebar only if it looks “crooked” and unnatural. First, make sure the sidebar is narrower than the main body of the page containing the content. The sidebar is not a key part of the site, so it shouldn't be paid much attention to - at most it can occupy 40% of the visible part of the page. Please note that if you have two (or more) sidebars, their width should not exceed 50% of the entire page width. It is better to use only one side column - it is more efficient this way. There is a “golden rule” of designers for sites that use only one sidebar. This rule states that if there is only one sidebar on a page, it should not occupy more than 38% of the site's width. Many eminent web designers speak about such a mysterious figure (for example: Jarel Remik). As for the height, it is important that the sidebar does not stick out from the top of the site. Its height in the upper limit should be the same as the main body of the page. But the lower limit can be changed to make the base part of the site longer. There is no need to try to cram everything that is on the site into the sidebar - only the basic. And if there is really a lot of information, then make two side columns, but you do not need to stretch the sidebar to the footer of the site. Now let's talk about how to independently resize the sidebars and the template framework itself without using any extras. This method involves changing source code pages. It is in the html tags that the template size parameter is enclosed. Please note that resizing can have negative consequences if you have uploaded a custom sized image as the background. Therefore, it is better to change the parameters of the wireframe at the stage of the site layout. Sidebar parameters in the code are in the form of a block. To change the size of the entire frame, including the side columns, you need to dig into the code and alternately adjust the digital parameters of the width and height of each element. Namely: To find out the dimensions of a specific block, you need to click on the wrapper item in the “View page code”. On the side, in the CSS section of the browser, you will see the numeric values for the width of the element in pixels. To resize the entire wireframe, you need to edit the main element, and then make changes to other elements. It is recommended to do this on local server so that your site does not "jump" in front of users. And, in general, it is better to do this even before the launch of an Internet project. To resize the sidebar, find a line like this This line is responsible for the parameters of the middle part of the page, that is, for the content block and for the side columns. Don't touch the “main” line - this is the main part of the site. You need to find the tag “mainnav” - this is the sidebar. All you need to do is change the width item in the CSS - enter a different size value. You can shrink or enlarge the sidebar, but remember to follow the dimensioning tips above to ensure your site displays correctly. In order for the changes made to be saved, they must be made on the server. That is, you can initially test the adjustments on local hosting, but then be sure to copy the edited style.css file and add it to the databases of the main server. Only then will the changes take effect. If you don't want to wade into the insides of cascading style sheets and look for elements that need to be edited, then you can use the Visual Sidebar Editor for WordPress plugin. This is a special module designed to generate side speakers. It is part of the more global Visual Composer tool. The Visual Composer plugin is a natural page builder for WordPress. With it, you can create a ready-made template from scratch. The module works with shortcodes and is very easy to install. If resizing the sidebar isn't the only thing you need to do, download the Visual Composer plugin and add the Visual Sidebar Editor as an add-on. If the problem is only with the size of the sidebar of the page, then the Visual Sidebar Editor module will suffice. The advantage of using a plugin to change the sidebar is that it does everything automatically. That is, you show what you want to change using the Drag & Drop system, and the module independently adjusts the element code based on your requests. If you want to try your hand at editing html tags, then the plugin will provide you with such an opportunity. In addition, it has special shortcodes for making additional functions to the site - more than 40 extensions. Another plus of using such a plugin for editing pages is saving changes, regardless of the engine version. Even if you update WordPress, the template will not change - it is controlled by the module. Therefore, you can upgrade to older versions or update WordPress - this will not do any harm to the dimension of the sidebar. In addition, the plugin works with convenient import and export - that is, you can copy sidebars from one site and move them to others. And, most importantly, the module works according to an extremely understandable principle - even a beginner will quickly master it. If you enjoy the work of the Visual Sidebar Editor, consider installing the complete add-on - the Visual Composer module. Then it will be easy for you to edit any element on the portal pages.
Why you may need to change the size of the template.
How to enlarge the template horizontally part 1, we understand the numbers
1
width: 31.8%;
These values mean how many percent of the width can be occupied by this or that element. The main thing is that in total the sidebar and the article should occupy 100%, and not more, otherwise everything will float across the page.How to enlarge the template horizontally part 2, change the width
1
2
3
4
5
6
7
8
#page (min- height: 100px; clear: both; width: 96%; padding: 0; padding- top: 24px; max- width: 980px; overflow: hidden;
1
2
3
4
5
6
7
8
9
10
11
... main- container (width: 980px; margin: 0 auto; overflow: hidden; padding: 0; background: #fff; position: relative; - webkit- box- shadow: 0px 0px 10px rgba (50, 50, 50, 0.17) ; - moz- box- shadow: 0px 0px 10px rgba (50, 50, 50, 0.17); box- shadow: 0px 0px 10px rgba (50, 50, 50, 0.17);)
What should be the size of the sidebar
How to resize the sidebar manually
Sidebar resizing plugin
