Wordpress.com Theme Gema By PixelGrade is a dynamic grid-based layout inspired and shaped by your content diversity.It is a premium theme of wordpress.com which costs $125.The layout of this theme is little bit Pinterest type. You can see the demo by Gema theme.
So if you are searching to do blog in grid based site you can check Gema theme . Here I have shared the Gema theme modifications using which you give your Gema theme a new look.
You can use my shared code and ask question in the comments section.
You can take my personal help in skype : om2000_cuet
1. To change the Menu items style like color, font family, or font size in Gema theme use this code
.nav-menu li a {
font-size: 21px !important;
color: darkred !important;
font-family: cursive !important;
}
2. If you want to re-style the border color of homepage post grid in gema theme
.card–text .card__wrap::before, .card–text .card__wrap::after {
border: 2px solid darkred;
pointer-events: none;
}
.card__image {
border: 2px solid darkred !important;
}
3. Also if you want to change hover background dark (black) background
.card__shadow::after {
background: darkred !important;
}
4. If you want to change the border around title in homepage post grid
.card__title {
border: 2px solid darkred !important;
}
5. To change homepage post grid title’s font color, size and font family
.card__wrap h2 a {
font-family: cursive !important;
font-size: 19px !important;
color: darkred !important;
}
6. To change the “More” (read more) button background color in homepage
.btn {
background-color: darkred;
}
7. If you want to reduce the padding in Post grid box (box where More button showing)
.card–text .card__wrap {
padding: 52px 19px !important;
}
8. If you want to change the Post meta (category link, author and date which is showing when u hover over the post grid) —-font color, size and font family styling
.card__meta.entry-meta * {
font-family: cursive !important;
color: darkred;
font-size: 12px !important;
}
9. For single posts if you want to change the border color, border thickness around post title
.singular .entry-header, .attachment .entry-header {
border: 3px solid darkred !important;
}
.singular .entry-header::after, .attachment .entry-header::after {
border: 3px solid darkred;
}
10. If you want to change single post sidebar widget border color, border thickness
.widget {
border: 3px solid darkred !important;
}
11. To change the widget’s background shade color
.widget::before {
background: darkred !important;
}
12. If you want to change single post title’s font color, font size and font family
h1.entry-title span {
font-family: cursive !important;
color: darkblue;
font-size: 27px;
}
13. If you want to change author name and post date font color, font size and font family which is showing below the single post title
.entry-meta * {
font-family: cursive;
color: darkred;
font-size: 15px;
}
14. To reduce the gap just above the widget title
.widget {
padding-top: 19px !important;
}
15. If you want to change sidebar widget title’s font color, font family and font size
.widget__title {
color: darkred;
font-family: cursive;
font-size: 23px;
}
If you have any issue feel free to ask me question here in comments section
OR
You can take my personal help in skype : om2000_cuet
Hey! Is there a css code to make widgets show up on the home screen of this theme?
LikeLike
thanks
in which site you are using it?
let me know
Om
LikeLike
It’s for glamdom.us using the theme gema. I wanted the widget side bar to show up on the homepage so i can input my twitter and Instagram timelines on it
LikeLike
Actually as you are using wordpress.com ( i guess premium plan..right?) so you can do or edit only css of the theme…and can use the feature of the theme is providing to you
Om
LikeLike
Ok cool! Is there a css code that could help change the color of the space within the homepage title box specifically?
LikeLike
can u share me share me screenshot indicating which color you want to change please?
sorry didn’t understand
Om
LikeLike
I’m trying to send the photo but it’s the padding part of the post title. I’m trying to change the color from my site’s background color(which is pink) to white.
LikeLike
Try this
body {
background: white !important;
}
Om
LikeLike
Sorry. I’m not trying to change the website background. I’m trying to change the area that shows each posts title, author, and date published. It’s the little box that sits on the picture for each article. I’m trying to change the color from pink to white.
This code only changes the color of the border around it. I’m trying to change only the color inside. .card__title {
border: 2px solid darkred !important;
}
LikeLike
thanks try this
.card__title {
background: white !important;
}
let me know if it helps
Om
LikeLiked by 1 person
It worked! Thank you!
LikeLike
Hi! Is there a way to put a black outline around the site’s main title?
LikeLike
thanks,
sorry for the late
you mean to use black border around the title?
please let me know
Om
LikeLike
Yes! Currently my title is solid white, but I wanted to add a thin black outline to it to make it more distinct. How do I do that?
LikeLike
thanks
try this code
.site-title a span {
text-shadow: 4px 4px 4px #000, 4px 4px 4px #000, 4px 4px 4px #000, 4px 4px 4px #000;
}
let me know if it helps
Om
LikeLike
Hi! Is there a way to put a border around the text instead of a shadow behind?
LikeLike
ok try this
.site-title span {
border: 6px solid grey;
}
LikeLike
Hi again! This comes up as a box around the title. Is there a code that simply outlines around the text letters of the main title?
LikeLike
ok,
would u mind to try this code please
.site-title span {
-webkit-text-stroke: 1px black;
}
LikeLike
Hi there,
Thanks for all. But I try to change the word “More” on each post but I can’t find it. Could you help ? Thanks
LikeLike
Hi Jaona
what is your site url please?
share me the url
Regards
Om
LikeLike
Hello,
Thanks for answering. This is my url : andrianarisoa.org
Best regards
LikeLike
Thanks
you can try this
.card–text .btn {
font-size: 0px !important;
}
.card–text .btn::before {
content: “btn text”;
color: black !important;
text-indent: 0px !IMPORTANT;
font-size: 18px !important;
}
Regards
Om
LikeLike