Customize of Luxeritas child theme (style.css)

2019年5月11日

Luxeritas is a free and high-performance WordPress theme made in Japan. In this blog, I will introduce the customization contents of style.css of the child theme.

How to edit Luxeritas child themes

There are two ways to edit style.css.

1. Type directly into “Style sheet: style.css"

Stylesheet: Type directly into style.css

Management screen: Luxeritas → Edit child themes → Select “style.css" tag
Please write the style for the child theme according to the preference below ./*/" and later, enter the code.

2.Enter “Additional CSS" for appearance customization

Enter "Additional CSS" for appearance customization

Management screen: Luxeritas → Customization (Appearance) → Additional CSS
At the same time as entering the code, you can see the results of your codes, so I recommend this.

Style.css customizations

Make the site title bold

If it is a standard, the character is thin for a moment, and the impression is thin.

/* Site Title */
#sitename { font-weight: bold;}

In the material style with a shadow under the strip menu

This has a shadow on it.

Luxeritas Strip Menu: No Shadows

This will be it.It is a subtle difference, but the atmosphere of the site changes unexpectedly.

Luxeritas Strip Menu: With Shadows

/* Shadow under Global Navi*/
#nav {
box-shadow: 0 2px 10px rgba(0,0,0,.2)
}

Hover color that cannot be set from appearance customization

The hover color of the article title and the front and rear articles is red when it is standard.I think that this was not an item to change directly from the appearance customization.

color: You can change it by putting it in the code of your favorite color below.By the way, “#00b22f" is light green.In addition, the article title was made easy to see in bold.

 /* Article title*/
.entry-title a:hover{color:#00b22f;}
.entry-title {font-weight: bold;}

 /* Before and after articles */
#pnavi a:hover{color:#00b22f}

Blog card to material design

This kind of blog card is completed.When you move the cursor over it, it becomes fluffy.

Blog Cards

/* Blog Card Design */
a.blogcard-href =
    padding: 0px;
    min-height: 102px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0, .13);
    transition: .3s;
}
a.blogcard-href:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    transform: translateY(-5px);
}
.blogcard-img {
    margin: 0px 10px 0 0;
    border:none
}
p.blog-card-title {
    margin: 5px 5px 5px 5px;
}
p.blog-card-desc {
    display: none;
}
p.blogcard-link {
    clear: none;
    margin: 5px 0 5px 5px;
}
@media only screen and (max-width: 430px){
p.blogcard-link {
    display: none;
}}

We have been referring to the following pages.
Luxeritas blog card customized to float in SANGO style

Change the color of pagination

This remains as red as the article title, could not be changed from the appearance customization.It is gray in “#999999".

.pagination>.active>span, .pagination>li>a:hover{
	background: none;
	background-color: #999999;
}

It looks like this when i change it↓

Tag Cloud Redesign

/* Tag Cloud Redesign */
.tagcloud a {
border-radius: 3px; /* Round corners */
padding-bottom: 1px;
padding-left: 6px;
padding-right: 3px;
padding-top: 1px}

The corner of the tag is rounded to narrow the line width.

Tag Design

Remove the margin under the article title

When i put the advertisement of google Adsense under the article title, I was worried that the line between the lines before and after the ad seemed to be large.I was able to install it as compactly as possible when I deleted margin.

/* Meta Information (updated) Remove lower margin*/
.meta, .post .meta {
	padding: 5px 0;
	margin-bottom: 0px;
}

/* On the article, the margin deletion below the article */
.post-title-upper, .post-title-under {
	margin-bottom: 1px;
}

That’s all.