Up next in 10
How to Customize Author Section in Fletro Pro Blogger Theme
6K views
Jan 24, 2024
In this tutorial video, the presenter demonstrates how to customize the author section in the Fletro Pro Blogger Theme. The video likely covers step-by-step instructions on using the theme's customization options to personalize and enhance the appearance of the author section on a Blogger platform. Viewers can expect insights into adjusting settings, changing layouts, and potentially incorporating additional elements to make the author section more visually appealing and aligned with the overall theme design. Whether you're a blogger using the Fletro Pro theme or a content creator seeking to enhance the presentation of author information, this video aims to provide a practical guide for customizing the author section effectively.
View Video Transcript
0:00
What's up everyone, welcome to K2 Blogging and on this video I will show you how you can
0:03
customize the author section in your Flitro Pro theme. So here as you can see that I have customized this author section like this
0:11
So how you can change this default author section in Flitro Pro theme to something like this
0:18
So let's get started. So if you found this video helpful then make sure to hit the like button
0:23
I also recommend you to check out our Flitro Pro theme customization playlist
0:27
So I will leave this link in the description. So you can easily customize your Flator Pro theme by following this video
0:34
So let's start how you can change this author section from this to this
0:40
So for this I will go to Blogger dashboard and I will take a backup of the theme first
0:45
So in case if I do any mistake, I can easily restore it by copying the old code to our theme editor
0:53
So let's click on Edit HTML here and let's open a blog post and here, you'll see a blog post and
0:59
Here you will need to inspect the element a little bit to modify the changes
1:05
So first of all, we need to make this as a full width. So as you can see that it is showing 50% in this desktop version
1:13
So what I can do is I will right click on it and click on inspect here
1:18
And here I will select the parent deep element here. This is the deep class post authors
1:24
And here if you check the CSS code, here the max width set is 400 pixel
1:29
we need to change this pixel size to 100%. So it will always cover 100% max width like this
1:39
And as you can see that the author section is now 100%
1:42
And we don't want this background color, then I can simply remove this background color
1:47
field like this. So the background is removed and if you don't want the box shadow then you can also remove
1:54
this box shadow from the author section like this. So as you can see that it is now looking
1:59
quite clean and here we need to make some changes here. So here the top padding is 10 pixel
2:08
and the left and right padding is 12 pixels. So you can change this value as well. So let's
2:15
increase the top padding to something like 15 pixel or let's keep it 20 pixel. Now here you can also
2:23
adjust the margin so I can reduce the margin a little bit from 40 pixel to
2:29
20 pixel here like this so then I need to find this CSS code in theme so I will copy
2:37
it here and I will go to the template let's search for that code and here it is
2:44
so here you will see this fast line of code here so as you can see that we don need this background color So you can simply remove this and then we don need this box shadow code
2:57
So I can also remove that. And here you can increase the padding a little bit if you want and you can reduce the margin from 40 to something like 20 pixel
3:09
And I will change this max width from 400 pixel to 100% like
3:15
like this so we have done our first step then we need to modify other element
3:22
within the parent author section block so I will click on here and I will click on
3:27
the image so this is the deep class author image and under that there is a deep
3:33
class with author image so we need to increase the width of the image so by
3:38
default it is set to 36 pixel and the height is 36 pixel so let's make it
3:43
around 60 pixel and let's change the height to 60 pixel like this so as you
3:52
can see that now the author image is a little bit big so you can find this code
3:58
from here so I will copy this code and I will find that code from here here it is
4:10
so as you can see that the width is 36 so let's change it to 60 pixel here like this and you can change any other value if you want now we
4:24
need to increase the size of this author name and the author description so you can also
4:30
do that so let's select the author name here so let's click on author name here and if you
4:37
can see that there is no size at added here so let's add a font size attribute here
4:43
here and let's keep it like 16 pixel. So you can easily increase this value or decrease this value according to your preference
4:53
So let's keep it 16 pixel and we can also increase the size of this written by also
5:01
Let's select this element and you can increase the font size from 12 pixel to 14 pixel
5:08
like this. So we need to find this code in our theme
5:13
code and change it here so let's increase the font size to 14 pixel and let's add a new element
5:27
here font size to 16 pixel in the author name like this now let add a border here so to add the border what I can do is I will select the whole element here here in the post author and let add a border of two pixel solid
5:54
You can add your own color. So let's keep it like blue or blue violet or something like that
6:02
So you can change the color from here like this. or you can change the color like this so let's add this color here now you can
6:15
increase the border size if you want to something like four pixel now what I
6:21
can do is I will add the border left attribute and let's make it zero pixel now
6:30
let's add border right 0 pixel like this
6:39
So you can see that we have added a lining at the top and bottom and reduce or remove that border
6:45
left and right here. So I can copy this code from here and I will paste it here in the post author deep class
6:57
So let's add it here. Now we need to increase the size of theVELiction
7:10
So for this I will select the description here and I can increase the font size
7:17
So here the font size is set to 95%. So you can make it to absolute pixel
7:22
So let's keep it something like 16 pixel like this. And you can also change the font family if you want like you can add a font family attribute
7:32
here and you can change the font family. here as well like this so let's keep it something like this okay now you need to
7:46
find this code again and here let's change the font size to something like
7:59
16 pixel like this now let's increase the line of the description. So as you can see that by default is showing two lines and it is not
8:12
showing the complete author description here. To show that we need to make some changes in
8:17
the HTML code as well. So for this I can simply search for Control Plus app and
8:23
search for post author like this or you can right click on here Let click on author info let copy the class of this
8:38
deep section and let's type control plus F and search for that class and here
8:46
it is this is the author info here and here you can see that the length is set to
8:52
hundred so we need to increase that so let's keep it something like 500 so it will
8:57
show more description in the author section. So let's click on save here. Now let's go to the front
9:04
end and let's check if this description is increased or not. So as you can see that with a handful
9:10
year of practice. So it is cutting from here. So let me just refresh this again. And as you can
9:16
see that it is now showing more text. So we need to add more lines. So for this what I can
9:22
see like let's increase the length to something like 800. Now let's click on save here, now refresh this page and I think we need to add the, we need
9:38
to make some changes here again. So let's click on this and let's change the WebKit line clamp to 4
9:49
So that it will add more lines here. So we need to make the changes as well
9:54
So as you can see that by default it is set to two lines. So it is not increasing even if we have increased the length of the description
10:02
So we need to change the WebKit line camp to 4 here
10:08
4 is sufficient for my description. So if you have more description so we can increase it to 5 or 6
10:14
So what I can do is I will copy this code again and I will find this code and let's increase
10:23
the line clamp to 4. Let's click on save here. Now let's go to the front end and let me just refresh this page
10:34
And as you can see that it is now looking quite good. So you have successfully modified the author section in your Fleet Row Pro theme
10:42
So you can also modify it further in mobile device as well
10:46
You can add a media query attribute and change the styling in mobile device as well
10:52
So I will provide the code or CSS code for the author section
10:56
in the description so you can use that code out. So I hope you have successfully modified
11:02
your author section in Flitro Pro theme and if you have any doubt regarding this
11:06
then you can ask me in the comment section and if you want to see more videos like this
11:11
then make sure to hit the subscribe button and check out our Plitro Pro Theme customization playlist
11:17
And if you found this video helpful then make sure to hit the like button and I will see you
11:22
in the next one. Bye bye
#Skins
# Themes & Wallpapers