Luxeritas Child theme (style.css) customization
Luxeritas is a domestic free and highly functional Wordpress theme.In this blog, I will introduce the customized contents of style.css of the child theme.
How to edit Luxeritas child theme
There are two ways to edit style.css
1. Enter directly in "Style Sheet: style.css"
Management screen: Luxeritas → Edit child theme → Select "style.css" tag
Enter the code after "/ * Please write the style for the child theme according to your preference. * /".
2.Enter in "Additional CSS" for appearance customization
Management screen: Luxeritas → Customize (appearance) → Additional CSS
We recommend this because you can see the result of reflecting the code at the same time you enter the code.
Customized style.css
Bold site title
For those who think that the standard characters are a little thin and the impression is thin.
/ * Site title * / #sitename {font-weight: bold;}
Add a shadow under the strip menu to make it look like a material
There is a shadow on this ...
It will be this.It's a subtle difference, but the atmosphere of the site changes unexpectedly.
/ * Shadow under global navigation * / #nav {box-shadow: 0 2px 10px rgba (0,0,0, .2)}
Hover color that cannot be set from appearance customization
The standard hover color for article titles and previous and next articles is red.I don't think there were any items 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.Also, the article title is bold to make it easier to read.
/ * Article title * / .entry-title a: hover {color: # 00b22f;} .entry-title {font-weight: bold;} / * Previous and next articles * / #pnavi a: hover {color: # 00b22f}
Blog card for material design
You will have a blog card like this.Move the cursor to make it fluffy.
/ * Blog card design * / a.blogcard-href {padding: 0px; min-height: 102px; box-shadow: 0 2px 5px rgba (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;}}
I referred to the following page.
Customize your Luxeritas blog card to make it float like a SANGO
Change pagenation color
Like the article title, it remained red and could not be changed from the appearance customization. It is grayed out with "# 999999".
.pagination> .active> span, .pagination> li> a: hover {background: none; background-color: # 999999;}
When you change it, it looks like this ↓
Tag cloud design change
/ * Tag cloud design change * / .tagcloud a {border-radius: 3px; / * Round the corners * / padding-bottom: 1px; padding-left: 6px; padding-right: 3px; padding-top: 1px }
I rounded the corners of the tag to narrow the line width.
Removed margins under article title
When I put a google adsense ad under the article title, I was worried that the line spacing before and after the ad seemed to be large. After removing the margin, I was able to install it as compactly as possible.
/ * Meta Information (Updated) Remove lower margin * / .meta, .post .meta {padding: 5px 0; margin-bottom: 0px;} / * Remove margin above and below article * / .post- title-upper, .post-title-under {margin-bottom: 1px;}
that's all.