Olsen is a stylish blogging theme WordPress created By CSSIgniter . You can check the Olsen theme demo . If you are using WordPress.com premium plan you can use this theme. It features a focused layout with crisp fonts, providing a fluid and relaxing reading experience. Its minimal design and unobtrusive color palette make it ideal for lifestyle and fashion bloggers who need their images to pop next to their content.
Here i am sharing css code to style your Olsen theme. So You can use my shared code and ask question in the comments section.
You can take my personal help in skype : om2000_cuet
To use background color
div#page {
background: darkred;
}
.container {
background: white;
}
To make selected menu item and hover menu item color change and to make it bold
.main-navigation a:hover, .main-navigation a:focus {
color: darkred !important;
font-weight: bold !important;
}
To change drop down menu hover background color
.main-navigation ul ul a:hover, .main-navigation ul ul a.focus {
background: darkred !important;
color: white !important;
}
To change top social icons black color to your favorite color
.jetpack-social-navigation-svg .icon {
color: red;
}
To change top social icons hover color
.jetpack-social-navigation-svg .icon:hover {
color: green !important;
}
To change Right sidebar widget title black background color,font, font size
#secondary .widget-title {
font-family: cursive;
font-weight: bold;
background: darkred;
color: #ffffff;
font-size: .7333rem;
text-transform: uppercase;
}
To change Homepage posts and single posts title
.entry-title, .entry-title a {
font-size: 1.7rem !important;
font-family: cursive;
color: darkred !important;
}
To change homepage posts titles hover color
.entry-title a:hover {
color: red !important;
}
If you don’t want to show page title when you go to a page
.page-template header.entry-header {
display: none;
}
or
if you want to change font size, font color and font family of single page title
.page-template header.entry-header .entry-title {
color: red;
font-family: cursive;
font-size: 24px;
}
If you don’t want to show post category and post date and author only in single post page
.single .entry-meta {
display: none !important;
}
If you want t change headings h1,h2,h3,h4, h5 and h6 to be different font and color
h1, h2, h3, h4, h5, h6 {
font-family: cursive;
font-weight: normal;
color: darkred !important;
}
To change blockquote font color, font size, font family and border color
blockquote {
font-family: cursive;
font-size: 1.2rem;
font-style: italic;
text-align: center;
border-top: solid 1px darkred;
border-bottom: solid 1px darkred;
color: darkred !important;
}
If you dont want to show category name at the top of the category archive page
display: none !important;
}
background: #ffffff;
color: darkred;
border: solid 2px darkred;
font-family: “Lato”, sans-serif;
font-size: .7333rem;
font-weight: bold;
text-transform: uppercase;
}
border-color: red !important;
}
border-bottom: solid 1px red;
}
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
All About Basic 
Hi, do you know how to get 2 columns with this theme? Thanks!
LikeLike
Hi
you want to make the homepage posts to show in 2 column?
and
while making it 2 column..you want to keep the sidebar?
let me know
Om
LikeLike
Hi,thanks for your quick reply! Yes that’s exactly what i’d like to do.
2 columns with sidebar on the right..
Nicky
LikeLike
Hi Nicky
sorry for the late response
i checked your requirements and found it may not look good?
try this code please
.home article {
width: 45%;
float: left;
height: 564px;
margin-right: 5%;
}
.home .entry-featured img {
height: 261px;
}
.home .entry-title {
font-size: 17px !important;
}
let me know what you think
Om
LikeLike
Hi, thanks but doesn’t work. You’re right, i may not actually look that good.
This is the site i like the idea of: https://www.cssigniter.com/demo2/?theme=olsenlight
I would like to add the social media icons to the continue reading line, and make my instagram pictures in the sidebar much bigger..
Thanks so much for your help, this is all very new to me!
Nicky
LikeLike
Hi Nicky
the social icons matter u mentioned..actually that will need me to check your dashboard ..as Olsen is a premium theme and you are using wordpress.com
as i don’t have premium plan…without checking from your dashboard can’t help u properly about that…
Regarding the Instagram images
would you mind to try this code and let me know? (i did it for desktop view only)
@media (min-width: 980px) and (max-width:1222560px) {
#secondary {
margin-left: 0% !important;
width: 33% !important;
}
.wpcom-instagram-columns-3 img {
max-width: 30% !important;
}
}
LikeLiked by 1 person
Wow fantastic! thanks, worked for the instagram pictures! 🙂
As for my wordpress, i have business not premium. So i will be limited as to what i can do i guess…
LikeLike
here is my blog so you can get an idea
https://nickyc.blog
LikeLike
Sorry, actually your code did work for the 2columns, im having a look at what it would be like!
LikeLike
Nice to know my code helped you 🙂
LikeLike
Hi again, I was wondering if you could help me with something else on my blog?
LikeLike
HI Nicky
let me know
Om
LikeLike
It is possible to have an instagram footer like the one on this site: https://www.cssigniter.com/demo2/?theme=olsenlight
Also, i don’t know the css code to center images in the sidebar on the right (liketyou gave me for the instagram sidebar widget), and is it possible to get these thin lines separting the different parts of the page? like on the site i added above?
Thanks a lot for your help, it is much appreciated! Nicky
LikeLike
HI Nicky
would u mind to share me screenshot which sidebar image you are referring please?
OM
LikeLike
i can’t seem to send photos…
It’s the photo gallery sidebar and the one just underneath of the milestone count down..
is there a CSS to center any sidebar so that i can use it for any sidebar in the future?
Thanks Nicky
LikeLike
Hi Nicky
to center the gallery image try this code
.gallery-row {
margin-right: 0px !important;
width: 100% !important;
padding-right: 0px !important;
margin-left: 10%;
}
To center the mile stone
.milestone-content {
margin-left: 16% !important;
}
let me know if that helps
Om
LikeLike
Wow amazing, thank u!! and what about the instagram footer at the bottom?
Thanks, Nicky
LikeLike
HI Nicky
Regarding footer instagram issue:
as i am not using premium plan…so..without checking your dashboard i cant help you properly for that
Om
LikeLike
Ok thanks anyway for all your help! Nicky
LikeLike
Hi , I am a non-technical person. I have no clue where to paste the codes which u have given here. I would really want to modify a lot of things in this theme?
Can u suggest me any user-friendly theme for fashion if that’s okay?
LikeLike
Hi Santhiya
if you are using wordpress.com free hosted site, you need to purchased premium plan.
Or, if you have your own domain and hosting..then you can either use simple custom css or can use dashboard’s Appearance > Customize >Additional CSS
Om
LikeLike
Hi Om – using the Olsen theme and can’t figure out the proper sidebar image size. Any idea? I have used a number of different sizes and it left-justifies the image and looks odd. I either need the correct size or need to figure out how to center the image in the sidebar. Would appreciate any assistance.
LikeLike
Hi Tammy
please share me the site url where you are working
Om
LikeLike
Hi, I would like to change the text on the button on front page slider from “continue reading” to something in Polish. Do you know how to go about it? Much appreciated 🙂
LikeLike
Hi
would you mind to share me your site url where you want to do the change?
Om
LikeLike
Hi there, i would like to get my page switching from “normal text menu” to a “hamburger menu”, beginning at a bigger width than for mobile. Would you know if there is any css for this? Thanks in advance, Marcus
LikeLike
Hi Marcus
would you mind to clarify the requirement some more?
sorry didn’t understand it properly
Om
LikeLiked by 1 person
Hi Om, oh sorry, here my try to clarify: I would like to see the menu formatted as a “hamburger” also on desktop, not only on mobile. Currently the desktop displays menu items as text. The page in question is https://visitswitzerland.photos/contests
Marcus
LikeLike
Hi Marcus
WP Mobile Menu
would u mind to check that plugins please?
though it is used for mobile….but you can show the mobile menu in desktop view too by using the settings ( by using the pixel value you want to show the humberger)
let me know what u think
Om
LikeLike
Hi and thanks for the plugin idea, i could set the width nicely, but overall it didn’t work as expected. I understand there is no easy CSS fix that sets the pixel value for the width? Marcus
LikeLike
HI Marcus
in such case i need to check the dashboard.
i prefer you communicate me in my fiverr profile please
Om
LikeLike
Hi i need top header apart from the menu i need heade above the logo and footer 3 grids could you please let me know
My blog is hyderabadbeautyblog.com
LikeLike
Hi
you mean,
you need to put the top header logo image (Hyderabad Beauty Blog) to be below the menu?
please let me know
Om
LikeLike
Hello 🙂 thank you for this post! I have one more question regarding a grid. There is a huge space after two posts, do you know how to reduce it? 🙂
LikeLike
Hi Monika
would you mind to tell in which site you are working on?
Om
LikeLike
Hi, the dropdown menu at the top of my site is not working, especially when viewed from a mobile phone. I have a pro version of the Olsen theme.
Thank you
LikeLike
Hi Tanya
would you mind to share me your site url to check?
Om
LikeLike
Hi,
how do make the header_sticky_menu full width of the page?
Many thanks,
Jayson
LikeLike
Hi Jayson
would you mind to share me the site url to check?
LikeLike
Here is the site url: https://whatdeethinks.supportlogic.com.au
LikeLike
Hi Jayson
please try this
@media (min-width: 993px) {
.is_stuck nav.nav {
width: 60% !important;
display: flex;
justify-content: center !important;
}
.site-bar.group.sticky-head.is_stuck {
width: 100% !important;
left: 0;
right: 0;
}
.is_stuck .site-tools.has-search {
display: flex;
justify-content: center !important;
}
}
Regards
Om
LikeLike
Thank you Om, that did the trick… greatly appreciated.
LikeLike
pleasure Jayson
LikeLike
Hello,
Do you know a way to change the logo on individual pages? I have a shop page and a blog page and I’d like to upload a different logo image for each. Honestly, what I really want is to have a different display header on each page, but I can’t figure that out. It seems that’s not available on the full theme as is.
Thanks
LikeLike
share me the pages urls please
LikeLike
Hi, Is it possible to edit the CSS to create a sticky sidebar from the top of the main content (rather than the top of the page/URL bar) of my pages/posts?
Many thanks,
Rosi
LikeLike
Thanks Rosi
i think that can be done
Regards
Om
LikeLike