Skylark Theme,

kidsroboticsbkk · Member · Nov 24, 2015 at 7:24 pm
Copy link

Add topic to favorites
Hi,

I am trying to change my skylark css to the following:

1) Site Title
– blue text, light blue hover
– description, dark gray color
– larger text
2) Nav menu
– dark gray text, dark blue hover
– when clicked, dark blue
3) Featured section
– Content title: larger font; color black
– Content summary: larger font; color black
– More-link: change text from Continue reading(arrow) to Read more…
– everything larger text if possible

The website has small text all over, and I don’t know what I did wrong.
When I tested css validation, I had a lot of errors shown.

I think I was able to do some, but not all. And I know this is a long list, and I am not sure you will be able to help. but i am shooting for stars.

The website is for kidsroboticsbkk.com

Thanks a lot in advance!

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Nov 25, 2015 at 7:21 pm
Copy link
Hi there, add the following and you can adjust the font size on the site title and tagline. It appears you have the color already set to blue with light blue on hover.
```
.wf-active .site-title, .wf-active .site-title a {
    font-size: 21px;
}
.wf-active .site-description {
    font-size: 9px;
}
```
On the nav, it also looks like you have this all taken care of.

On the featured section, I se you have the color set. Since you are using custom fonts, we need to use a different CSS selector. Change the selector on that rule you have in your custom CSS to this.
.wf-active #featured-content .featured-post-content .entry-title

On the general font size, you have both Headings and Base Font set as “Small” in Customize > Fonts. You can change Headings to Normal or Large and then set Base Font to Normal and see what you think.

You have actually done a good job of getting your customizations going. Nice job!
kidsroboticsbkk · Member · Nov 26, 2015 at 3:20 pm
Copy link
Thanks A LOT, I was able to change most of my request.

I have a last request, can I change “Continue reading” to “Read more” of the more link.

I am not sure where to add the “selector” so I just pasted them where it was necessary. Here’s the link of the entire css I always copy and paste.

https://goo.gl/fawwll

A lot of online tutorial for editing CSS, I am still new at this, and you are a very helpful happy engineer.
kidsroboticsbkk · Member · Nov 26, 2015 at 3:33 pm
Copy link
I also lost the arrow in the theme (featured panel). I don’t know how to get it back.
thesacredpath · Member · Nov 27, 2015 at 11:22 pm
Copy link
On the Continue reading, you can give this a try.
```
.entry-summary .more-link a {
    visibility: hidden;
}
.entry-summary .more-link a:after {
    content: "Read more";
    visibility: visible;
    position: relative;
    top: -35px;
}
.entry-summary .more-link .meta-nav {
    visibility: visible;
    position: relative;
    float: right;
    right: 20px;
    top: -2px;
}
```
It looks like you have copied and pasted the entire stylesheet into the custom CSS panel which will cause issues like the nav icons disappearing. In general, unless you are completely replacing all the CSS with new, you write CSS rules that will override the existing CSS and include only what you are changing/adding. An added benefit is that when it comes time to make changes later on you aren’t having to search through so much to find what or where you changed something.

You need to remove these two CSS rules from your custom CSS in order to bring the arrows back.
```
#slider-prev {
    background: rgba(0, 0, 0, 0) url("images/prev.png") repeat scroll 0 0;
    left: 0;
}
#slider-next {
    background: rgba(0, 0, 0, 0) url("images/next.png") repeat scroll 0 0;
    right: 0;
}
```

No items found.