Beginner Questions regarding Coloring and the mobile Version

modernartisan
(@modernartisan)

6 years, 9 months ago
Dear Forum,

As the title states I am pretty new to wordpress, but have some experience coding.
I just started using the Olsen Light Theme and I love it!
While customizing it I ran into two problems, which have frustrated me for some time now.

1. I would like to have all the brownish yellow accent coloring in a different color. I know that is possible in the free version too and I’ve seen people do it.

2. I have two instagram plugins, one in each widget area. As the sidebar and footer plugins are shown beneath each other on the mobile version I only need to display one Instgram plugin. Is there any way to hide a widget on the mobile version?

I know how the custom CSS works, but I don’t know which code to write.
The page is: http://www.hanaviktorija.com.

Thanks in advance to anybody who reads this.
I hope you can help me,
best regards!
- This topic was modified 6 years, 9 months ago by modernartisan. Reason: Solved a problem

Viewing 3 replies - 1 through 3 (of 3 total)

Fotis
(@markwaregr)

6 years, 9 months ago
Hi there,
You can change the coloring in all elements
```
.btn,
.comment-reply-link,
input[type="button"],
input[type="submit"],
input[type="reset"],
button {
    background: red;
}
a:hover,
.entry-content a:hover,
.entry-meta a {
    color: red;
}
.entry-title a:hover {
    color: red;
}
.navigation > li > a:hover {
    color: red;
}
.navigation > li > a:hover,
.navigation > li.sfHover > a,
.navigation > li.sfHover > a:active {
    color: red;
}
.entry-utils .socials a:hover {
    color: red;
}
.entry-utils .read-more {
    color: red;
}
.read-more:hover {
    border-color: red;
}
```
in your custom CSS box under Customize->Additional CSS. Replace red with the color of your preference.

Finally, you can add this
```
@media (max-width:768px) {
    #jr_insta_slider-5 {
        display: none;
    }
}
```
in your custom CSS box under Appearance->Customize->Additional CSS to hide your right sidebar Instagram Widget in mobile devices.

Please have a look at this guide http://www.cssigniter.com/docs/article/using-the-developer-tools/
It will help you learn how to use your browser’s developer tools in order to be able to locate such styling easily and quickly.

Let me know if you get stuck somewhere.

Best Regards
Thread Starter modernartisan
(@modernartisan)

6 years, 9 months ago

Wow, thank you so much. The community here is awesome!
I got everything to work, but the search bar. Is there a way to change it too?

I want to especially thank you for providing me with learning resources.
That is wonderful and extremely helpful!
Fotis
(@markwaregr)

6 years, 9 months ago
Glad I could help!
You can add this
```
.searchform .searchsubmit{
 background:green;   
}
```
in your custom CSS box for your search bar button on the right.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Beginner Questions regarding Coloring and the mobile Version’ is closed to new replies.

Tags